I am trying to make a javascript drop-down navigation menu for my first rails web site, and I am having some problems with where the menu list divs pop up on the page.
What I have is a horizontal menu bar with headings (the headings are links to the home page of each section), and then lists of the pages within that same section are *supposed to* appear directly underneath their heading when you hover over the heading. Pretty standard stuff.
All of the effects and everything are working great, the only problem I am having is that the divs that hold the page lists pop up about 50px farther down and also to the right than I expected, so that they are far away from the header. This is a really big problem because the menu disappears when your cursor exits the header, so you never have time to click on anything in the dropdown menu!
Now, there's just one more catch: I ran into a bug with getting my menus to disappear at first, so I found the solution on another site that makes all of the effects work. But that code places the div off of the page to the left using CSS, and then uses JavaScript to bring the div back into view, so... No, I cannot use CSS to position the div, I have to change the JavaScript.
Ok, so here's the code:
/* HTML for the headers & menus*/ <html> <div id="navbar"> <ul id="tabbar" > <li class="tab" id="home_page_button"><a href="/home" title="the home page"id="home_page_tab">Home</a></li> <li class="tab" id="about_button" onmouseover="showmenu('about_menu','about_button');" onmouseout="hidemenu('about_menu');"> <a href="/aboutus/about" id="about_tab">About</a> <div class="amenu" id="about_menu" onmouseover="showmenu('about_menu','about_button');" onmouseout="hidemenu('about_menu');"> <ul> <li class="menu_item"><a href="/aboutus/about">Our Team</a></li> <li class="menu_item"><a href="/aboutus/about">Our Mission</a></li> <li class="menu_item"><a href="/aboutus/about">Our Story</a></li> <li class="menu_item"><a href="/aboutus/about">Contact Us</a></li> </ul> </div> </li> <li class="tab" id="store_button" onmouseover="showmenu('store_menu','store_button');" onmouseout="hidemenu('store_menu');"> <a href="/store/shop" id="store_tab">Store</a> <div class="amenu" id="store_menu" onmouseover="showmenu('store_menu','store_button');" onmouseout="hidemenu('store_menu');"> <ul> <li class="menu_item"><a href="/store/shop">Store</a></li> <li class="menu_item"><a href="/store/shop">Add-On Products</a></li> <li class="menu_item"><a href="/store/shop">Custom Packages</a></li> </ul> </div> </li> </div> </html>
/*JavaScript for hiding/showing menus*/ <script type="text/javascript"> var zindex=1000; function showmenu(menuid,buttonid) { if (eval('typeof(menuisvisible_'+menuid+')==\'undefined\'')) { eval('menuisvisible_'+menuid+'=false; showingmenu_'+menuid+'=false; hidingmenu_'+menuid+'=false; menubuttonid_'+menuid+'=\''+buttonid+'\''); } eval('shouldshowmenu_'+menuid+'=true;'); showmenunow(menuid); } function showmenunow(menuid) { if (eval('menuisvisible_'+menuid+'==false') && eval('shouldshowmenu_'+menuid+'==true') && eval('showingmenu_'+menuid+'==false') && eval('hidingmenu_'+menuid+'==false')) { eval('shouldhidemenu_'+menuid+'=false; showingmenu_'+menuid+'=true'); var obj = document.getElementById(eval('menubuttonid_'+menuid)); var curleft = curtop = 0; var i = 1; while (obj) { curleft += obj.offsetLeft; curtop += obj.offsetTop; obj = obj.offsetParent; i++; }
var e=document.getElementById(menuid); e.style.position="absolute"; e.style.top=curtop+"px"; e.style.left=curleft+"px"; e.style.display="inline"; e.style.zIndex=zindex++; time = 500; p=50; t=0; s= 100/(time/p); o=0; changeOpac(o,menuid); while (o<=100) { setTimeout("changeOpac("+Math.round(o)+",'"+menuid+"')",t); o=o+s; t = t+p; } setTimeout('showingmenu_'+menuid+'=false; menuisvisible_'+menuid+'=true; hidemenunow(\''+menuid+'\');',t+p); }
} function hidemenu(menuid) { eval('shouldshowmenu_'+menuid+'=false'); setTimeout('hidemenunow(\''+menuid+'\')', 600); } function hidemenunow(menuid) { if (eval('menuisvisible_'+menuid+'==true') && eval('shouldshowmenu_'+menuid+'==false') && eval('hidingmenu_'+menuid+'==false') && eval('showingmenu_'+menuid+'==false')) { eval('hidingmenu_'+menuid+'=true'); time = 500; p=50; t=0; s= 100/(time/p); o=100; changeOpac(o,menuid); while (o>=0) { setTimeout("changeOpac("+Math.round(o)+",'"+menuid+"')",t); o=o-s; t = t+p; } setTimeout('document.getElementById(\''+menuid+'\').style.left= \'-999em\';changeOpac(100,\''+menuid+'\'); hidingmenu_'+menuid+'=false; menuisvisible_'+menuid+'=false; showmenunow(\''+menuid+'\');',t+p); } } function changeOpac(opacity, id) { var object = document.getElementById(id).style; object.opacity = (opacity / 100); object.MozOpacity = (opacity / 100); object.KhtmlOpacity = (opacity / 100); object.filter = "alpha(opacity=" + opacity + ")"; } </script>
<style type="text/css"> /* Navigation menu style*/ #tabbar { margin: 0px 20px 0px 20px; padding: 0px 0px 0px 0px; text-align: left; display: block; width: 760px; vertical-align: bottom; background-color:#000000; }
#tabbarbox { margin: 0 auto; padding: 7px 0 0 0; width: 760px; background: rgb(231,231,231) url("images/tabbar.jpg") no-repeat bottom center; vertical-align: bottom; } .tab, .tabselected { display: table-cell; text-align: center; height: 22px; padding: 0px 2px 0px 2px; margin: 0px 0px 0px 0px; vertical-align: middle; } #tabbar a { display: table-cell; text-align: center; height: 22px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; vertical-align: middle; }
.tabbar_button_l { display: table-cell; vertical-align: middle; } .tabbar_button_c { margin: 0 7px 0 7px; padding: 2px 0 2px 0; vertical-align: middle; }
.tab .tabbar_button_l { background: transparent url(images/tab_unselected_left.jpg) no-repeat top left; } .tab .tabbar_button_c { background: transparent url(images/tab_unselected_central.jpg) repeat-x top; } .tab .tabbar_button_r { background: transparent url(images/tab_unselected_right.jpg) no-repeat top right; }
.tabselected .tabbar_button_l { background: transparent url(images/tab_left.jpg) no-repeat top left; } .tabselected .tabbar_button_c { background: transparent url(images/tab_central.jpg) repeat-x top; } .tabselected .tabbar_button_r { background: transparent url(images/tab_right.jpg) no-repeat top right; }
.amenu { position: absolute; left: -999em; margin: 25px 0px 0px 2px; padding: 5px 5px 5px 5px; border: 1px solid #A2A2A2; background-color: #E6E6E6; min-width: 88px; text-align: left; } .amenu ul{ padding:0; margin:0px 0px 0px 17px; } .amenu ul li { display: list-item; list-style-type: none; margin: 0; padding: 0; vertical-align: middle; } .amenu ul ul{ padding: 0; margin: 0px 0px 0px 10px; } .amenu:hover{ left: 0em; } /* IE Hack */ .grouphover { left: 0em; } </style>
Sorry, I don't have a live preview, but hopefully I gave enough info in this super-long post. =)
I'm sure the answer is not too complicated, as I learned the JavaScript from online tutorials, and I'm probably just not familiar with the solution.
Thanks a million in advance for any help guys!
