SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: CSS Menu

  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry CSS Menu

    Hi everyone ::

    Theres code here for a Horizontal menu -

    http://www.csscreator.com/menu/multimenu.php#

    Problem is, when you rollover the menu on the left to get the left dropdown
    (im using IE) the right bit moves?

    Is there any fix anyone knows about?

    ALso - How do you make the dropdown lists transparent or better still - 50% opacity white so that you can put this menu just above an image?

    Thanks!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Problem is, when you rollover the menu on the left to get the left dropdown
    (im using IE) the right bit moves?
    Well you probably should have contacted csscreator for the solution but here goes anyway (perhaps you should send them the solution)

    There is a logic error in the code as the list elements have a width and a border therefore the nested lists also have the same width and the same border. The inner element therefore pushes the parent element wide in order for it to fit inside. Other browsers ignore the overflow but Ie stretches the parent as it treats width as if it were min-width.

    The solution would be to set the nested list to be the right size to fit inside the parent or more easily apply a negative 1 pixel margin to lose the extra width as follows.

    Code:
    #nav ul li{ border-width:1px 1px 0 0;margin-right:-1px}
    For opacity you'd have to use proprietary ie filters or you could use the alpha image loaders and use transparent png's as in this example.

    http://www.pmob.co.uk/temp/transparent-test.htm

  3. #3
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry ??

    Thankyou..but it seems this code dont work anyways --
    When i rollover i get nothing - no dropdown

    Man its so hard to get a good example out there as a beginner!

    Is there anything im doing wrong in this code??


    Code:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css"> 
    #nav{list-style: none;} 
    #nav ul { 
    	 padding: 0;
    	 margin:0;
    	 list-style: none;
    	 width:12em;
    	 z-index:99;
    	 position:relative;
    	 overflow:visible; 
    } 
    #nav li { 
    	 margin:0; 
    	 position: relative; 
    	 float:left; 
    	 width: 12em;
    	 background-color:#CCC;
    	 border:solid 1px #666; 
    	 display:block;
    	 height:auto;
    } 
    #nav ul li{ border-width:1px 1px 0 0;margin-right:-1px} 
    #nav ul ul li{ border-width:1px 1px 0 1px;} 
    #nav ul ul li:last-child{border-bottom:1px solid #666;} 
    #nav a { 
    	 text-decoration:none; 
    	 display:block;
    	 padding: 0.1em; 
    	 margin:0.2em 0 0.2em 0.1em; 
    	 width:11.5em; 
    	 height:1em;
    } 
    #nav a:hover, #nav li:hover{ 
    	 background-color:#CCC; 
    } 
    #nav ul li:hover, #nav ul li a:hover{ 
    	 background-color:#CCC; 
    } 
    #nav ul{ 
    	 display:none; 
    } 
    /*all see this */
    #nav ul ul{ 
    	 display:none; 
    	 position:absolute; 
    	 margin-top:-1.8em; 
    	 margin-left:12em; 
    } 
    /* non-IE browsers see this */ 
    #nav ul li>ul, #nav ul ul li>ul{ 
    	 margin-top:-1.4em; 
    } 
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul{ 
    	 display:none; 
    } 
    #nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul, #nav ul ul ul ul li:hover ul{ 
    	 display:block; 
    } 
    li>ul { 
    	 top: auto; 
    	 left: auto; 
    } 
     
    </style>
    <script type="text/javascript" src="multimenu.js" ></script>
    </head>
    <body>
     <ul id="nav">
    		 <li> <a href="#" >first Level menu</a>
    			  <ul>
    				  <li><a href="#" >second Level menu</a></li>
    				  <li><a href="#" >second Level menu</a>
    					 <ul>
    						 <li><a href="#" >third Level menu</a></li>
    					 </ul>
    				  </li>
    			  </ul>
    		 </li>
    	 </ul>
    
    </body>
    </html>
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The drop down works fine when the js is attached correctly. Have you got the path to your js file correct?

    I just copied the js from the page you linked to and pasted it into the document and it worked first time. (The border of the very last list item is missing but thats because the border is set to 0 for some reason.)

  5. #5
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think so??

    Its in my code above as:

    </style>
    <script type="text/javascript" src="multimenu.js" ></script>
    </head>

    How should i do it??

    Many thanks!!!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    i think so??
    Put the js inside the page first and test if it works. If it does then you know you've just got the wrong path to the file.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script type="text/javascript">
    activateMenu = function(nav) {
    	/* currentStyle restricts the Javascript to IE only */
     if (document.all && document.getElementById(nav).currentStyle) {  
    		var navroot = document.getElementById(nav);
    		
    		/* Get all the list items within the menu */
    		var lis=navroot.getElementsByTagName("LI");  
    		for (i=0; i<lis.length; i++) {
    		
    		   /* If the LI has another menu level */
    			if(lis[i].lastChild.tagName=="UL"){
    			
    				/* assign the function to the LI */
    			  lis[i].onmouseover=function() { 
    				
    				   /* display the inner menu */
    				   this.lastChild.style.display="block";
    				}
    				lis[i].onmouseout=function() {					   
    				   this.lastChild.style.display="none";
    				}
    			}
    		}
    	}
    }
    window.onload= function(){
    	/* pass the function the id of the top level UL */
    	/* remove one, when only using one menu */
    	activateMenu('nav'); 
    	activateMenu('vertnav'); 
    }
    
    </script>
    <style type="text/css"> 
    #nav{list-style: none;} 
    #nav ul { 
      padding: 0;
      margin:0;
      list-style: none;
      width:12em;
      z-index:99;
      position:relative;
      overflow:visible; 
    } 
    #nav li { 
      margin:0; 
      position: relative; 
      float:left; 
      width: 12em;
      background-color:#CCC;
      border:solid 1px #666; 
      display:block;
      height:auto;
    } 
    #nav ul li{ border-width:1px 1px 0 0;margin-right:-1px} 
    #nav ul ul li{ border-width:1px 1px 1px 1px;} 
    #nav ul ul li:last-child{border-bottom:1px solid #666;} 
    #nav a { 
      text-decoration:none; 
      display:block;
      padding: 0.1em; 
      margin:0.2em 0 0.2em 0.1em; 
      width:11.5em; 
      height:1em;
    } 
    #nav a:hover, #nav li:hover{ 
      background-color:#CCC; 
    } 
    #nav ul li:hover, #nav ul li a:hover{ 
      background-color:#CCC; 
    } 
    #nav ul{ 
      display:none; 
    } 
    /*all see this */
    #nav ul ul{ 
      display:none; 
      position:absolute; 
      margin-top:-1.8em; 
      margin-left:12em; 
    } 
    /* non-IE browsers see this */ 
    #nav ul li>ul, #nav ul ul li>ul{ 
      margin-top:-1.4em; 
    } 
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul{ 
      display:none; 
    } 
    #nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul, #nav ul ul ul ul li:hover ul{ 
      display:block; 
    } 
    li>ul { 
      top: auto; 
      left: auto; 
    } 
     
    </style>
    </head>
    <body>
    <ul id="nav">
      <li> <a href="#" >first Level menu</a> 
    	<ul>
    	  <li><a href="#">second Level menu</a></li>
    	  <li><a href="#">second Level menu</a> 
    		<ul>
    		  <li><a href="#" >third Level menu</a></li>
    		</ul>
    	  </li>
    	</ul>
      </li>
      <li> <a href="#" >next Level menu</a> 
    	<ul>
    	  <li><a href="#">next second Level menu</a></li>
    	  <li><a href="#">next second Level menu</a> 
    		<ul>
    		  <li><a href="#">next third Level menu</a></li>
    		</ul>
    	  </li>
    	</ul>
      </li>
    </ul>
    </body>
    </html>


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
  •