www.webdeveloper.com
Results 1 to 2 of 2

Thread: JavaScript dropdown menu issue

  1. #1
    Join Date
    Jan 2011
    Posts
    18

    JavaScript dropdown menu issue

    I'm trying to make a dropdown menu in JS, and I have some difficulties with it.
    This is my code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<title>Untitled Document</title>
    		<style>
    			@import "stil.css";
    		</style>
    		<script type="text/javascript" src="test.js"></script>
    	</head>
    	<ul id="sddm">
        <li><a href="#" id="home" onmouseover="pokazi('m1')" onmouseout="tzatvori()"
            >Home</a>
            <div id="m1" >
            <a href="#" onmouseover="pokazi2('m3')" onmouseout="tzatvori()">HTML Drop Down</a>
    		<div id="m3">
    		<a href="#" onmouseover="pokazi('m3')" onmouseout="tzatvori()">DHTML Menu</a>
    		<a href="#" onmouseover="pokazi('m3')" onmouseout="tzatvori()">DHTML Menu</a>
    		<a href="#" onmouseover="pokazi('m3')" onmouseout="tzatvori()">DHTML Menu</a>
    		<a href="#" onmouseover="pokazi('m3')" onmouseout="tzatvori()">DHTML Menu</a>
    		</div>
            <a href="#" onmouseover="pokazi('m1')" onmouseout="tzatvori()">DHTML Menu</a>
            <a href="#" onmouseover="pokazi('m1')" onmouseout="tzatvori()">JavaScript DropDown</a>
            <a href="#" onmouseover="pokazi('m1')" onmouseout="tzatvori()">Cascading Menu</a>
            <a href="#" onmouseover="pokazi('m1')" onmouseout="tzatvori()">CSS Horizontal Menu</a>
            </div>
        </li>
    	<li><a href="#" id="home" onmouseover="pokazi('m2')" onmouseout="tzatvori()"
            >Gira</a>
            <div id="m2" >
            <a href="#" onmouseover="pokazi('m2')" onmouseout="tzatvori()">HTML Drop Down</a>
            <a href="#" onmouseover="pokazi('m2')" onmouseout="tzatvori()">DHTML Menu</a>
            <a href="#" onmouseover="pokazi('m2')" onmouseout="tzatvori()">JavaScript DropDown</a>
            <a href="#" onmouseover="pokazi('m2')" onmouseout="tzatvori()">Cascading Menu</a>
            <a href="#" onmouseover="pokazi('m2')" onmouseout="tzatvori()">CSS Horizontal Menu</a>
            </div>
        </li>
    </ul>
    <div style="clear:both"></div>
    </html>
    Code:
     *{
    	float:none;
    	margin:0;
    	padding:0;
    }
    
    #sddm li 
    {	float:left;
    list-style:none;
    }
    #m1 {
    	visibility:hidden;
    	position:absolute;
    }
    #home{
    	display:inline;
    }
    #m2 {
    	visibility:hidden;
    	position:absolute;
    }
    #stuff a{
    	float:left;
    	display:block;
    }
    #sddm div a{
    	display:block;
    }
    #m3{
    	position:absolute;
    	visibility:hidden;
    	left:140px;
    	top:-5px;
    }
    Code:
    var timeout	= 500;
    var closetimer	= 0;
    var ddmenuitem	= 0;
    
    function pokazi(id){
    	cleartimer();
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    	/*OVO MORA OVDE INACE NECE DA ZATVORI */ 
    	ddmenuitem=document.getElementById(id);
    	ddmenuitem.style.visibility='visible';
    }
    function pokazi2(id){
    	cleartimer();
    
    	ddmenuitem=document.getElementById(id);
    	ddmenuitem.style.visibility='visible';
    }
    
    function zatvori(){
    	ddmenuitem.style.visibility="hidden";
    }
    function tzatvori(){
    	closetimer=setTimeout("zatvori()",timeout);
    }
    function cleartimer(){
    	clearTimeout(closetimer);
    	closetimer=null;
    }
    I'm still new with JavaScript so I'm having some problems here.
    If you put your mouse over Home the dropdown menu will appear, and if you put your mouse over the first link in the dropdown (HTML Drop Down), you'll see that the sidemenu appears.
    Now comes the bad part.
    When the sidemenu appears and you move your mouse to the second top link (Gira), you'll see that sidemenu disappears but the previous menu stays and the new dropdown from Gira overlaps with the dropdown menu from Home.
    Can someone help me with this one a bit?
    I edited script from http://javascript-array.com/scripts/...drop_down_menu for this menu, because it seemed like the easiest solution for a JavaScript beginer.
    If you have any easier way to make dropdown menus with JS feel free to give me a link.

  2. #2
    Join Date
    Jan 2011
    Location
    San Francisco
    Posts
    19
    I think the problem is with pokazi2, which wasn't in the original script. The function tzatvori only hides the last drop-down menu drawn. When you draw the sub-menu (m3) with your pokazi2 function, you reset ddemnuitem to be the m3 div. You continue resetting it by calling pokazi('m3') on mouseOvers. This means that the m1 div will never be hidden once the m3 div is shown, which I think is what you're describing. I would recommend the following: change pokazi2 to something like this:
    Code:
    function pokazi2(id){
    	cleartimer();
            var childMenuItem = document.getElementById(id); //don't reset ddmenuitem
            childMenuItem.style.visibility='visible';
    }
    And then ALWAYS call pokazi2('m3') for the m3 div, even on the mouseOver events inside the menu. I think that should work.

    Alternatively, rewrite tzatvori to take an id and only hide the correct elements.

    As for the position of the second menu, you just have to give a "left" value in the css to m2.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

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



Recent Articles