SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 dropdown nav bar problem - javascript?

    Hi

    I was wondering if anyone could help me out with a problem I have regarding a drop-down navigation menu. It works fine in firefox and ie6 but not ie7. Mousing over the items in the list should cause the sub-menu of links to display. I've been working on this for ages and I'm completely stuck. Is there a known issue with ie7 regarding this sort of javascript behaviour? Or is it a problem with my css or the way I've structured the list?

    Here's the code for the menu:

    Code:
    <div id="navigation">
    	
    <ul class="topLvl">
    	<li class="topLvl"><a href="#" title="" tabindex="1" class="topLvl" onMouseover="toggle('subNav1')" onKeyPress="toggle('subNav1')">Recruitment</a></li>
    	<ul id="subNav1" class="hidden" onmouseout="hideAllStuff();">
    		<li onmouseover="dontHide();"><a href="page1.html" tabindex="24" class="subLvl" >Employment Agency</a></li>
    		<li onmouseover="dontHide();"><a href="page2.html" tabindex="25" class="subLvl">Vacancy Management</a></li>
    		<li onmouseover="dontHide();"><a href="page3.html" tabindex="26" class="subLvl">Assesment Centres</a></li>
    	</ul>
    	
    	
    	<li class="topLvl"><a href="#" title="" tabindex="2" class="topLvl" onMouseover="toggle('subNav2')" onKeyPress="toggle('subNav2')">Human Resources</a></li>
    	<ul id="subNav2" class="hidden" onmouseout="hideAllStuff();">
    		<li onmouseover="dontHide();"><a href="page4.html" tabindex="27" class="subLvl">Psychometrics</a></li>
    		<li onmouseover="dontHide();"><a href="page5.html" tabindex="28" class="subLvl">Policies &amp; Procedures</a></li>
    		<li onmouseover="dontHide();"><a href="page6.html" tabindex="29" class="subLvl">Organisational Development</a></li>
    	</ul>	
    	
    	<li class="topLvl"><a href="#" title="" tabindex="3" class="topLvl" onMouseover="toggle('subNav3')" onKeyPress="toggle('subNav3')">Enterprise Support</a></li>
    	<ul id="subNav3" class="hidden" onmouseout="hideAllStuff();">
    		<li onmouseover="dontHide();"><a href="page7.html" tabindex="30" class="subLvl">Business Planning</a></li>
    		<li onmouseover="dontHide();"><a href="page8.html" tabindex="31" class="subLvl">Customer Management</a></li>
    		<li onmouseover="dontHide();"><a href="page9.html" tabindex="32" class="subLvl">Finance and Accounts</a></li>
    		<li onmouseover="dontHide();"><a href="page10.html" tabindex="33" class="subLvl">Business Systems &amp; Procedures</a></li>
    		<li onmouseover="dontHide();"><a href="page11.html" tabindex="34" class="subLvl">Social Auditing</a></li>
    		<li onmouseover="dontHide();"><a href="page12.html" tabindex="35" class="subLvl">Workshops</a></li>
    	</ul>
    	<li class="topLvl" onmouseover="hideAllStuffNow();"><a href="page13.html" class="topLvl" tabindex="4">Employment Training</a></li>
    </ul>
    </div>

    And the relevant css:

    Code:
    #navigation
    	{
    	font-size:0.92em;
    	}
    #navigation a:visited, #navigation a:hover,  #navigation a:active
    	{
    	color:white;
    	}
    .topLvl
    	{
    	display:inline;
    	white-space:nowrap;
    	}
    ul.topLvl
    	{
    	position:absolute;
    	left:0px;
    	top:80px;
    	z-index:12;
    	}
    li.topLvl
    	{
    	width:10em;
    	}
    a.topLvl
    	{
    	color:white;
    	background-color:#384473;
    	float:left;
    	padding:6px 3px 6px 2px;
    	text-decoration:none;
    	width:10em;
    	border-right:1px solid white;
    	text-align:center;
    	}
    html* a.topLvl
    	{
    	padding:6px 2px 6px 2px;
    	}
    a.topLvl:hover
    	{
    	background-color:#9e4b8e;
    	}
    #subNav1, #subNav2, #subNav3
    	{
    	position:absolute;
    	top:2.25em;
    	left:0;
    	z-index:99;
    	}
    html*#subNav1, #subNav2, #subNav3
    	{
    	top:2.4em;
    	}
    #subNav2
    	{
    	left:9.9em;
    	}
    html*#subNav2
    	{
    	left:10.3em;
    	}
    #subNav3
    	{
    	left:20em;
    	}
    html*#subNav3
    	{
    	left:20.6em;
    	left:20.9em; /*  IE 7 */
    	}
    a.subLvl
    	{
    	background-color:#384473;
    	width:15.5em;
    	display:block;
    	color:white;
    	text-decoration:none;
    	padding:4px;
    	border-bottom:1px solid white;
    	}
    a.subLvl:hover
    	{
    	background-color:#9e4b8e;
    	}

    And the javascript:


    Code:
    var iamvisible = '';
    var timer1 = null;
    
    function toggle(x)
    {  
    	var uls = document.getElementById(x);
    	if(uls)
    	{
    		if(iamvisible != '')
    		{
    			var alreadyVisible = document.getElementById(iamvisible);
    			if(alreadyVisible)
    			{
    			  alreadyVisible.className = 'hidden';
    			}
    		}
    		var classnameNow = uls.className;
    		if(classnameNow == 'hidden')
    		{
    		  uls.className = 'show';
    			iamvisible = x;
    		}
    		else
    		{
    			 uls.className = 'hidden';
           iamvisible = '';
        }
    	}
    }
    
    function hideAllStuff()
    {
    	timer1 = window.setTimeout('hideAllStuffNow()', 200);
    }
    
    function hideAllStuffNow()
    {
    			var alreadyVisible = document.getElementById(iamvisible);
    			if(alreadyVisible)
    			{
    			  alreadyVisible.className = 'hidden';
    			}	
    }
    
    function dontHide()
    {
    			window.clearTimeout(timer1);
    }
    Many thanks in advance.

  2. #2
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ignore this, I've sorted it. It was a problem with the doctype. I love it when it's something simple.


Bookmarks

Posting Permissions

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