Horizontal-Vertical Menu with Arrow Keys Navigation

Javascript Course

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.


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>

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net