JS MENU


CSS drop down menus with out java script are always better. But some browsers will not support these css3 / pure css menus due to which the menus will not fetch the required results. In this context, JavaScript enabled menu will be the better option. But most of these scripts will be on premium. For this reason only, I have prepared this simple JS menu and the code is given below. The skeleton of the web page is here under. <html> <head> <script type="text/javascript"> ... ... the java script code goes here.. ... </script> <style type="text/css"> ... ... the CSS code goes here ... .... </style> </head> <body> ... ... html code goes here... ... </body> <html> JAVA SCRIPT CODE
var TimeOut = 300; var currentLayer = null; var currentitem = null; var currentLayerNum = 0; var noClose = 0; var closeTimer = null; function mopen(n) { var l = document.getElementById("menu"+n); var mm = document.getElementById("mmenu"+n); if(l) { mcancelclosetime(); l.style.visibility='visible'; if(currentLayer && (currentLayerNum != n)) currentLayer.style.visibility='hidden'; currentLayer = l; currentitem = mm; currentLayerNum = n; } else if(currentLayer) { currentLayer.style.visibility='hidden'; currentLayerNum = 0; currentitem = null; currentLayer = null; } } function mclosetime() { closeTimer = window.setTimeout(mclose, TimeOut); } function mcancelclosetime() { if(closeTimer) { window.clearTimeout(closeTimer); closeTimer = null; } } function mclose() { if(currentLayer && noClose!=1) { currentLayer.style.visibility='hidden'; currentLayerNum = 0; currentLayer = null; currentitem = null; } else { noClose = 0; } currentLayer = null; currentitem = null; } document.onclick = mclose;
CSS CODE
#nav li { border-top: 3px solid red; border-top: 3px solid red; list-style: none; float: left; font: bold 16px arial; } #nav li a.menu { display: block; text-align: center; background: #2175bc; padding: 4px 10px; margin: 0 1px 0 0; color: #FFF; width: 110px; text-decoration: none; } #nav li a.menu:hover { background: #2586d7; } .submenu { background: #2175bc; border-bottom: 3px solid red; visibility: hidden; position: absolute; z-index: 5; } .submenu a { display: block; font: 16px arial; text-align: left; text-decoration: none; color: #ffffff; width: 110px; padding: 4px 10px; text-align: center; } .submenu a:hover { background: #2586d7; color: yellow; text-align: right; }
HTML CODE
<ul id="nav"> <li><a href="#" class="menu" id="mmenu1" onmouseover="mopen(1);" onmouseout="mclosetime();">MENU-1</a> <div class="submenu" id="menu1" onmouseover="mcancelclosetime()" onmouseout="mclosetime();"> <a href="#">SUB 1-1</a> <a href="#">SUB 1-2</a> <a href="#">SUB 1-3</a> <a href="#">SUB 1-4</a> </div> </li> <li><a href="#" class="menu" id="mmenu2" onmouseover="mopen(2);" onmouseout="mclosetime();">MENU-2</a> <div class="submenu" id="menu2" onmouseover="mcancelclosetime()" onmouseout="mclosetime();"> <a href="#">SUB 2-1</a> <a href="#">SUB 2-2</a> <a href="#">SUB 2-3</a> <a href="#">SUB 2-4</a> </div> </li> <li><a href="#" class="menu" id="mmenu3" onmouseover="mopen(3);" onmouseout="mclosetime();">MENU-3</a> <div class="submenu" id="menu3" onmouseover="mcancelclosetime()" onmouseout="mclosetime();"> <a href="#">SUB 3-1</a> <a href="#">SUB 3-2</a> <a href="#">SUB 3-3</a> <a href="#">SUB 3-4</a> </div> </li> <li><a href="#" class="menu" id="mmenu4" onmouseover="mopen(4);" onmouseout="mclosetime();">MENU-4</a> <div class="submenu" id="menu4" onmouseover="mcancelclosetime()" onmouseout="mclosetime();"> <a href="#">SUB 4-1</a> <a href="#">SUB 4-2</a> <a href="#">SUB 4-3</a> <a href="#">SUB 4-4</a> </div> </li> </ul>



10 comments:

  1. Can this menu be put into an external CSS file to be available on every web page?

    ReplyDelete
  2. Yes. You can put the code in separate css file and the file extension should be .css Also you may put the JS in external file to avoid page slow.

    link rel="stylesheet" type="text/css" href="main/zzz.css" /

    ReplyDelete
  3. Thank you for making this dd support for ie.

    ReplyDelete
  4. Replies
    1. Very simple. Open a ext document in Notepad. After copy pasting the entire java script code, click the "FILE" button on the left side of the menu bar, then the "SAVE AS" button will appear. Click the "SAVE AS" button, one box will appear, type following:

      * Put the name with extension of ".js" against "FILE NAME" - like "menu.js"
      * Put the type of file to all file against " SAVE AS TYPE" - like "all files"
      then press the save button - so that you will get the js external file of "menu.js"

      In case you want, external cssfile, then put the file name as "menu.css" and balance is same.
      Hope you understand.

      http://www.freemenu.info/2013/12/simple-drop-down-menu.html

      Delete
  5. Hey. Im really trying hard to not only understand all the coding but to make it work. i must be doing something very wrong because the code is not working - check out the test here: http://www.groomacar.co.za/demo_topfix/test.html
    i copied and pasted just as you wrote it... please help!

    ReplyDelete
    Replies
    1. This is a little late but there is a space in the type property of your script tag. You have <script type="text/java script"> where it should be <script type="text/javascript"> with javascript as one word, no space.

      Again, a little late but maybe it'll help. Also, you have two <head> start tags. Although this still worked for me when testing, it is incorrect.

      Delete
  6. This comment has been removed by the author.

    ReplyDelete