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, http://coursesweb.net/ -->
<ul id="menuv">
 <li class="oli"><a href="http://coursesweb.net/" title="Home">Home</a></li>
 <li class="oli">CSS Tutorials
  <ul>
   <li><a href="http://coursesweb.net/css/css3-new-background-properties_t" title="Border properties">CSS3 Border properties</a></li>
   <li><a href="http://coursesweb.net/css/css3-opacity_t" title="opacity">CSS3 opacity</a></li>
  </ul>
 </li>
 <li class="oli">HTML Tutorials
  <ul>
   <li><a href="http://coursesweb.net/html/html5-quick-tutorial_t" title="HTML5 Quick Tutorial">HTML5 Quick Tutorial</a></li>
   <li><a href="http://coursesweb.net/html/html5-canvas_t" title="HTML5 canvas Tutorial">HTML5 canvas Tutorial</a></li>
   <li><a href="http://coursesweb.net/html/html5-new-tags_t" title="HTML5 New Tags">HTML5 New Tags</a></li>
  </ul>
 </li>
 <li class="oli"><a href="http://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){
 // http://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>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Horizontal-Vertical Menu with Arrow Keys Navigation

Last accessed pages

  1. Football Cars (4322)
  2. Waitress (556)
  3. JavaScript code and PHP (19859)
  4. My New Room 2 (352)
  5. Pool Master Secure (3904)

Popular pages this month

  1. Flash Games - Free online Games (1360)
  2. Qwop (1158)
  3. Tunnel Rush (1062)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (983)
  5. Drag Racer V3 (758)