Classy Drop Down Menu with JavaScript


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 1 of 1

Thread: Classy Drop Down Menu with JavaScript

Threaded View

  1. #1
    Join Date
    Jul 2006
    Posts
    2

    Question Classy Drop Down Menu with JavaScript

    I had a typo on the document.get command for the submenu. Thanks anyway!


    Tom Duffy's Pop Goes the Menu code is great but I'm having trouble adding additional menu items. I'm getting an error message and it is usually at the </script> tag. I'm pretty certain it is because I can not figure out what numbers to use in positioning, possibly the first submenu position. Would appreciate any assistance. Thank you.

    This is the code:

    <html>
    <head>
    <title>Ergonomics Site</title>
    <style>
    .menu a{
    color: white;
    text-decoration: none;
    }
    .menu a:hover{
    color: yellow;
    }
    .menuBar{
    background-color: rgb(50,50,130);
    position: absolute;
    top: 0;
    left: 0;
    height: 15;
    z-index: 1;
    padding: 4px;
    }
    .menuTrigger{
    font: 10pt Verdana, sans-serif;
    color: white;
    background-color: rgb(50,50,130);
    position: absolute;
    top: 0;
    padding: 4px;
    width: 100;
    height: 15;
    z-index: 2;
    cursor: pointer;
    cursor: hand;
    }
    .menu{
    font: 8pt Verdana, sans-serif;
    color: white;
    background-color: rgb(50,50,130);
    position: absolute;
    top: 23;
    padding: 5px;
    width: 100;
    visibility: hidden;
    z-index: 2;
    }
    </style>
    <script language="JavaScript">
    var mnuSelected = '';
    var subMnuSelected = '';
    function showMenu(menu){
    hideMenu(mnuSelected);
    document.getElementById(menu).style.visibility = 'visible';
    mnuSelected = menu;
    }
    function hideMenu(menu){
    if(mnuSelected!='')
    document.getElementById(menu).style.visibility = 'hidden';
    }
    function showSubMenu(menu){
    hideSubMenu(subMnuSelected);
    document.getElementById(menu).style.visibility = 'visible';
    subMnuSelected = menu;
    }
    function hideSubMenu(menu){
    if(subMnuSelected!='')
    document.getElementById(menu).style.visibility = 'hidden';
    }
    function init(){
    if(document.all){
    aWidth = document.body.clientWidth;
    document.getElementById('menuBar').style.width = aWidth;
    }else{
    aWidth = innerWidth;
    document.getElementById('menuBar').style.width = aWidth-35;
    }
    document.getElementById('1').style.left = parseInt((aWidth/2 - 300));
    document.getElementById('2').style.left = parseInt((aWidth/2 - 200));
    document.getElementById('3').style.left = parseInt((aWidth/2 - 100));
    document.getElementById('4').style.left = parseInt(aWidth/2);
    document.getElementById('5').style.left = parseInt((aWidth/2 + 100));
    document.getElementById('6').style.left = parseInt((aWidth/2 + 200));
    document.getElementById('mnu1').style.left = document.getElementById('1').style.left;
    document.getElementById('mnu2').style.left = document.getElementById('2').style.left;
    document.getElementById('mnu3').style.left = document.getElementById('3').style.left;
    document.getElementById('mnu4').style.left = document.getElementById('4').style.left;
    document.getElementById('mnu5').style.left = document.getElementById('5').style.left;
    document.getElementById('mnu6').style.left = document.getElementById('6').style.left;
    document.getElementById('mnu11Sub1').style.left = parseInt(document.getElementById('11').style.left) + 300;
    }
    </script></head>
    <body onLoad="init()" onResize="history.go(0)" bgcolor="#EEEEEE">
    <div id="menuBar" class="menuBar"></div>
    <div id="1" class="menuTrigger" onMouseOut="this.style.color='';" onMouseOver="showMenu('mnu1'); hideSubMenu(subMnuSelected);this.style.color='yellow';">1</div>
    <div id="2" class="menuTrigger" onMouseOut="this.style.color='white';" onMouseOver="showMenu('mnu2'); hideSubMenu(subMnuSelected);this.style.color='yellow';">2</div>
    <div id="3" class="menuTrigger" onMouseOut="this.style.color='white';" onMouseOver="showMenu('mnu3'); hideSubMenu(subMnuSelected);this.style.color='yellow';">3</div>
    <div id="4" class="menuTrigger" onMouseOut="this.style.color='white';" onMouseOver="showMenu('mnu4'); hideSubMenu(subMnuSelected);this.style.color='yellow';">4</div>
    <div id="5" class="menuTrigger" onMouseOut="this.style.color='white';" onMouseOver="showMenu('mnu5'); hideSubMenu(subMnuSelected);this.style.color='yellow';">5</div>
    <div id="6" class="menuTrigger" onMouseOut="this.style.color='white';" onMouseOver="showMenu('mnu6'); hideSubMenu(subMnuSelected);this.style.color='yellow';">6</div>
    <div id="mnu1" class="menu" onMouseOut="hideMenu(mnuSelected);hideSubMenu(subMnuSelected);" onMouseOver="showMenu(mnuSelected)">
    <p onMouseOver="this.style.backgroundColor='red'; showSubMenu('mnu11Sub1');" onMouseOut="this.style.backgroundColor='';event.cancelBubble=true;"><a href="#">11</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">111</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">111</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">111</a></p>
    </div>
    <div id="mnu2" class="menu" onMouseOut="hideMenu(mnuSelected)" onMouseOver="showMenu(mnuSelected)">
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">2</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">2</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">2</a></p>
    </div>
    <div id="mnu3" class="menu" onMouseOut="hideMenu(mnuSelected)" onMouseOver="showMenu(mnuSelected)">
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">3</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">3</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">3</a></p>
    </div>
    <div id="mnu4" class="menu" onMouseOut="hideMenu(mnuSelected)" onMouseOver="showMenu(mnuSelected)">
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">4</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">4</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">4</a></p>
    </div>
    <div id="mnu5" class="menu" onMouseOut="hideMenu(mnuSelected)" onMouseOver="showMenu(mnuSelected)">
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">5</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">5</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">5</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">5</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">5</a></p>
    </div>
    <div id="mnu6" class="menu" onMouseOut="hideMenu(mnuSelected)" onMouseOver="showMenu(mnuSelected)">
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#"6</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">6</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">6</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">6</a></p>
    </div>
    <div id="mnu11Sub1" class="menu" style="top: 30" onMouseOut="hideMenu(mnuSelected); hideSubMenu(subMnuSelected)" onMouseOver="showMenu(mnuSelected); showSubMenu(subMnuSelected)">
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">Sub About 1</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">Sub About 1</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">Sub About 1</a></p>
    <p onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=''"><a href="#">Sub About 1</a></p>
    </div>
    <p>&nbsp;</p>
    <p style="margin-left: 10">&nbsp;</p>
    <p style="margin-left: 10">&nbsp;</p>
    </body>
    </html>
    Last edited by odayette; 07-19-2006 at 10:46 AM. Reason: Problem Solved

Similar Threads

  1. Javascript Menu and Tomcat
    By a.sh1 in forum Web
    Replies: 0
    Last Post: 03-13-2006, 05:27 PM
  2. Replies: 1
    Last Post: 03-03-2005, 10:56 PM
  3. javascript menu
    By sks in forum Open Source
    Replies: 1
    Last Post: 12-18-2000, 12:40 PM
  4. Sample Sites.
    By Murray Foxcroft in forum Web
    Replies: 5
    Last Post: 11-02-2000, 02:42 AM
  5. Drop Down Menu
    By Pradeep Jain in forum Web
    Replies: 0
    Last Post: 07-03-2000, 07:41 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center