Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Apr 2007
    Posts
    317
    Thanks
    24
    Thanked 3 Times in 3 Posts

    Drop Down Navigation problem

    I am trying to integrate a drop down menu in a horizontal menu that i have completed. The problem is that when you hover over the list element it will drop down but it doesn't drop down under the right list element. It appears that it is dropping down at the beginning of my <ul>. What do i have to do to fix this?

    Heres my css.
    Code:
    #hor_menu {margin:0; padding:0; font: bold 11px/1.5em Verdana;}
    #hor_menu h2 {font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px;}
    #hor_menu img {border: none;} 
    #tabsJ {float:left; width:100%; background:#fff; font-size:93%; line-height:normal; border-bottom:1px solid #24618E;}
    #tabsJ ul {margin:0; padding:10px 10px 0 50px; list-style:none;}
    #tabsJ li {display:inline; margin:0; padding:0;}
    #tabsJ a {float:left; background:url("../images/tableftJ.gif") no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none;}
    #tabsJ a span {float:left; display:block; background:url("../images/tabrightJ.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#24618E;}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsJ a span {float:none;}
    /* End IE5-Mac hack */
    #tabsJ a:hover span {color:#FFF;}
    #tabsJ a:hover {background-position:0% -42px; display:block;}
    #tabsJ a:hover span {background-position:100% -42px; display:block;}
    #tabsJ div {position: absolute; visibility: hidden; margin: 0; padding: 0; background: #EAEBD8; width:200px; border: 1px solid #3c3c3c;}
    #tabsJ div a {position: relative; display: block; margin: 0; padding: 5px; width: 190px; white-space: nowrap; text-align: left;text-decoration: none; background: #EAEBD8; color: #3c3c3c; font: bold 11px arial;}
    #tabsJ div a:hover{background: #999999; color: #FFF;}
    heres my html
    Code:
    <div id="hor_menu">
    
    <div id="tabsJ">
      <ul>
        <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
        <li><a href="#" title="Link 2" onmouseover="mopen('m2')" onmouseout="mclosetime()"><span>Link 2</span></a>
    		<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    		<a href="">link</a>
    		<a href="">link</a>
    		<a href="">link</a>
    		<a href="">link</a>
    		<a href="">link</a>
    		<a href="">link</a>
    		</div>
    	</li>
        <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
        <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
        <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
        <li><a href="#" title="Link 6" onmouseover="mopen('m2')" onmouseout="mclosetime()"><span>Link 6</span></a></li>
    		<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    		<a href="">link</a>
    		<a href="">link</a>
    		<a href="">link</a>
    		<a href="">link</a>
    		<a href="">link</a>
    		<a href="">link</a>
    		</div>
    	<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
      </ul>
    </div>
    
    </div>
    Thanks in advance.

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Hi i had a look but none of the links display any drop down whatsoever I'm guessing because I need the js functions:

    mopen(), mclosetime(), mcancelclosetime()

    Can you provide those?
    You can not say you know how to do something, until you can teach it to someone else.

  • #3
    Regular Coder
    Join Date
    Apr 2007
    Posts
    317
    Thanks
    24
    Thanked 3 Times in 3 Posts
    sure thing...here you go. I'd actually like to eliminate the javascript but i don't know how to do that.


    Code:
    var timeout	= 500;
    var closetimer	= 0;
    var ddmenuitem	= 0;
    
    // open hidden layer
    function mopen(id)
    {	
    	// cancel close timer
    	mcancelclosetime();
    
    	// close old layer
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    
    	// get new layer and show it
    	ddmenuitem = document.getElementById(id);
    	ddmenuitem.style.visibility = 'visible';
    
    }
    // close showed layer
    function mclose()
    {
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    }
    
    // go close timer
    function mclosetime()
    {
    	closetimer = window.setTimeout(mclose, timeout);
    }
    
    // cancel close timer
    function mcancelclosetime()
    {
    	if(closetimer)
    	{
    		window.clearTimeout(closetimer);
    		closetimer = null;
    	}
    }
    
    // close layer when click-out
    document.onclick = mclose;

  • #4
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Bare with me was eating mcdonalds ill have a play now for you
    You can not say you know how to do something, until you can teach it to someone else.

  • #5
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Ok I had a look and play with your code and got stressed with it. The porblem was this
    Code:
    #tabsJ ul li ul
    {
    	position: absolute;
    The problem with that is that is using absolute positioning. Because absolute positioned elements get there initial position from there first block level parent not inline elements. And since your <li> are inline and have to be inline to go horizontal then the absolute positioned elements inside wont start at the li but instead at the next block parent which in this case was the parent div. So what i did is redesign your code pretty much from scratch using a vertical menu i know works then hacked the style to look something like the menu you posted. Hope you don't mind well here is the code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html id="html" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Vertical Drop Down List Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript">
    
    function list_hover(ul)
    {
        ulElement = document.getElementById(ul);
        if (ulElement)
        {
                if (ulElement.className == 'closed')
                {
                        ulElement.className = "open";
                }
                else
                {
                        ulElement.className = "closed";       
                }
        }    
        dlElement = document.getElementById("dl_" + ul);
        if (dlElement)
        {
                if (dlElement.className == 'dl_closed')
                {
                        dlElement.className = "dl_open";
                }
                else
                {
                        dlElement.className = "dl_closed";       
                }
        }    
    
    }
    
    </script>
    
    
    <style type="text/css"> 
    /*top menu bar css*/
    
    dl, dt, dd
    {
    margin: 0;
    padding: 0;
    }
    
    
    .dl_closed
    {
    
    color:#24618E;
    }
    
    .dl_open
    {
    background-color:white;
    color:#0066cc;
    }
    
    .closed
    {
        display:none;  
    }
    
    .open
    {
        display:block;
    }
    
    #positioner
    {
        position:absolute;
        top:0;
        padding:0;
        z-index:10;
        margin-left:4px;
    }
    
    #header_top_bar
    {
        height:16px;
        font: bold 10px/1.5em Verdana;
        color:#24618E;
        padding-top:3px; 
        margin-top:10px;
        padding-bottom:3px;
        border-bottom:1px solid #24618E;
    }
    
    #header_top_bar dl
    {
       float:left; 
     margin-right:30px;
       cursor:default;
    }
    
    #header_top_bar dl a,#header_top_bar dl a:visited
    {
    	text-decoration:none;
    	color:#24618E;
    }
    
    #header_top_bar dl dd
    {   
        
    }
    
    #header_top_bar dl ul
    {
        list-style:none;
        padding:0;
        padding-bottom:8px;
        padding-top:1px;
        border:solid 1px #0066cc;
        border-top:solid 1px white;
        margin-bottom:0;    
        margin-left:0px;
        margin-top:-1.5em;
        background: #EAEBD8; 
        width:200px; 
        border: 1px solid #3c3c3c;
        position:absolute;
        
    }
    
    #header_top_bar dl ul li
    {
        width:200px;
        height:16px;
        display:block;
    }
    
    
    #header_top_bar dl ul a, #header_top_bar dl ul a:visited
    {
        color: #3c3c3c;
        font: bold 11px Arial;
        text-decoration:none;
        padding-left:5px;
        padding-right:5px;
        cursor:pointer;
        display:block;
    }
    
    #header_top_bar dl ul a:hover
    {
        color:#7f1113;
        background: #999999; color: #FFF;
        /*color:#ffee00;*/
        text-decoration:none;
         display:block;
    }
    
    </style>
    </head>
    <body>
    <div id="header_top_bar" align="left">
    <dl>
    	<dt><a href="">Link 1</a></dt>
    </dl>
    <dl id="dl_list1" class="dl_closed" onmouseover="return list_hover('list1');" onmouseout="return list_hover('list1');">
    	<dt>Link 2</dt>
    	<dd>
    	<ul id="list1" class="closed">
    		<li><a href="">Link</a></li>
    		<li><a href="">Link</a></li>
    		<li><a href="">Link</a></li>
    		<li><a href="">Link</a></li>
    		<li><a href="">Link</a></li>
    	</ul>
    	</dd>
    </dl>
    <dl>
    	<dt><a href="">Link 3</a></dt>
    </dl>
    <dl>
    	<dt><a href="">Longer Link Text</a></dt>
    </dl>
    <dl>
    	<dt><a href="">Link 5</a></dt>
    </dl>
    <dl id="dl_list2" class="dl_closed" onmouseover="return list_hover('list2');" onmouseout="return list_hover('list2');">
    	<dt>Link 6</dt>
    	<dd>
    	<ul id="list2" class="closed">
    		<li><a href="">Link</a></li>
    		<li><a href="">Link</a></li>
    		<li><a href="">Link</a></li>
    	</ul>
    	</dd>
    </dl>
    <dl>
    	<dt><a href="">Link 7</a></dt>
    </dl>
    </div>
    </body>
    </html>
    Thats pretty much the same. But will need a bit of hacking on your part to get it exact. Thats all I can be bothered to do at this time. I tested this on FF and IE8. Hope it works for other browsers too?

    PS the most important thing you need to learn is about docutype declarations and how to validate your code at http://validator.w3.org
    Last edited by timgolding; 05-10-2009 at 12:01 AM.
    You can not say you know how to do something, until you can teach it to someone else.

  • Users who have thanked timgolding for this post:

    macleodjb (05-10-2009)

  • #6
    Regular Coder
    Join Date
    Apr 2007
    Posts
    317
    Thanks
    24
    Thanked 3 Times in 3 Posts
    Thanks for taking the time out of your day to help a stranger. Works good. I just had to adjust the margin to get the drop down under the menu but all else was good.

    Thanks alot.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •