In this page it is presented a
Horizontal-Vertical menu made with CSS and a JavaScript script that gives the posibility to navigate through the menu lists using
keyboard arrow keys: Left, Down, Right, Up; and the Enter keyboard button to open the link.
Click here to see an example.
To use this script, add the following CSS code in the HEAD area of your HTML document.
<style type="text/css"><!--
#menuv {
position:relative;
padding:2px;
}
/* Properties for horizontal menu */
#menuv li {
float:left;
margin:1px 8px;
border:1px solid blue;
background-color:#daedfe;
padding:1px 2px;
list-style-type:none;
font-weight:600;
text-align:left;
text-decoration:nderline;
}
#menuv .olishow {
background-color: yellow;
}
/* Properties for vertical menu */
#menuv .oli ul, #menuv .olishow ul {
display:none;
position:absolute;
margin:1px auto 1px -8px;
background-color:#f0f1fe;
border:1px dashed blue;
padding:1px;
}
#menuv li ul li {
position:relative;
clear:both;
width:99%;
margin:1px 0;
border:none;
background-color:#edfeed;
padding:1px;
}
#menuv li:hover ul, #menuv .olishow ul {
display:block;
}
/* Links in sub-menu */
#menuv ul li a {
display:block;
margin:0;
font-weight:normal;
padding:1px;
}
#menuv ul li a:hover, #menuv ul .vlishow a {
background-color:#fefefe;
text-decoration:none;
font-style:oblique;
color:#fb0001;
}
--></style>
Then, in the BODY of your HTML page add this code, contains the Menu and the JavaScript script.
- Edit data in the menu (text, links) with your data. You can add more horizontal, and vertical menu lists, but it is important to have
id="menuv" in the main <ul>, and
class="oli" to each <li> which represents the horizontal menu (the JavaScript code must be added after the HTML code with the Menu lists).
<!-- Horisontal-Vertical Menu, https://coursesweb.net/ -->
<ul id="menuv">
<li class="oli"><a href="https://coursesweb.net/" title="Home">Home</a></li>
<li class="oli">CSS Tutorials
<ul>
<li><a href="https://coursesweb.net/css/css3-new-background-properties_t" title="Border properties">CSS3 Border properties</a></li>
<li><a href="https://coursesweb.net/css/css3-opacity_t" title="opacity">CSS3 opacity</a></li>
</ul>
</li>
<li class="oli">HTML Tutorials
<ul>
<li><a href="https://coursesweb.net/html/html5-quick-tutorial_t" title="HTML5 Quick Tutorial">HTML5 Quick Tutorial</a></li>
<li><a href="https://coursesweb.net/html/html5-canvas_t" title="HTML5 canvas Tutorial">HTML5 canvas Tutorial</a></li>
<li><a href="https://coursesweb.net/html/html5-new-tags_t" title="HTML5 New Tags">HTML5 New Tags</a></li>
</ul>
</li>
<li class="oli"><a href="https://coursesweb.net/ex/contact" title="Contact">Contact</a></li>
</ul>
<script type="text/javascript"><!--
// gets all <li> within #menu element
var menuli = document.getElementById('menuv').getElementsByTagName('li');
var nrmenuli = menuli.length;
var oli = []; // store horisontal menu items
var crt_oli; // store current horisontal element
var vli = []; // store vertical menu list in within current horisontal element
var nroli = 0; // number of horisontal menu items
var nrvli = 0; // number of vertical menu lists
var url_adr = ''; // store the URL address added in the anchor <a> of current navigated list
// traverse $menuli to add the horisontal menus in $oli
for(var i=0; i<nrmenuli; i++) {
if(menuli[i].className == 'oli') {
oli.push(menuli[i]);
}
}
var ih = -1; // to store the index of current horizontal item in $oli
var iv = -1; // to store the index of current vertical item in $vli
// accessed on press the Left /Right arrow keys
// show current horisontal menu
function showOli(index) {
iv = -1; // reset imdex of vertical menu when moves to other horisontal menu
url_adr = ''; // empty this variable
for(var i=0; i<nroli; i++) {
oli[i].className = 'oli';
}
crt_oli = oli[index]; // store current horisontal element
crt_oli.className = 'olishow'; // set class="olishow"
// if current horisontal menu contains vertical menu, store it in $vli, and display it
if(crt_oli.getElementsByTagName('ul').length > 0 && crt_oli.getElementsByTagName('ul')[0].getElementsByTagName('li')) {
vli = crt_oli.getElementsByTagName('ul')[0].getElementsByTagName('li');
nrvli = vli.length;
showVli(); // calls showVli() to set class="vli" to all list in its vertical menu
}
else {
// if current horisontal menu no has vertical list
// if contains a link, calls the function setUrlAdr() to add its "href" value in $url_adr
if(crt_oli.getElementsByTagName('a').length > 0) setUrlAdr(crt_oli.getElementsByTagName('a')[0]);
vli = []; // empties $vli
nrvli = 0;
}
}
// accessed on press the Up /Down arrow keys
// show current vertical menu
function showVli(index) {
url_adr = ''; // empties this variable
if(nrvli > 0) {
for(var i=0; i<nrvli; i++) {
vli[i].className = 'vli';
}
if(index >= 0) {
vli[index].className = 'vlishow';
// if contains a link, calls the function setUrlAdr() to add its "href" value in $url_adr
if(vli[index].getElementsByTagName('a').length > 0) setUrlAdr(vli[index].getElementsByTagName('a')[0]);
}
}
}
// adds in $url_adr the "href" value of the anchor element <a> passed in "link" parameter
function setUrlAdr(link) {
url_adr = link.href;
}
// function with code to get the pressed keyboard key
function KeyCheck(e){
// https://coursesweb.net/
nroli = oli.length;
var keyid = (window.event) ? event.keyCode : e.keyCode; // get the code of the key pressed
// modify the index of horisontal /vertical item, calls the indicated function according to pressed key
switch(keyid) {
// Left
case 37:
ih--;
if(ih < 0) ih = 0;
showOli(ih);
break;
// Up
case 38:
iv--;
if(iv < 0) iv = 0;
showVli(iv);
break;
// Right
case 39:
ih++;
if(ih >= nroli) ih = 0;
showOli(ih);
break;
// Down
case 40:
iv++;
if(iv >= nrvli) iv = 0;
showVli(iv);
break;
// Enter (opens the link)
case 13:
if(url_adr != '') window.location = url_adr;
break;
}
}
// access the KeyCheck() function when a keyboard button is pressed
document.onkeydown = KeyCheck;
--></script>