Page 1 of 4 123 ... Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    301
    Rep Power
    16

    Changing a Vertial menu to horizontal menu


    Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css.

    Here they are below.

    drop_down.js:
    Code:
    // JavaScript Document
    
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace(" over", "");
       }
       }
      }
     }
    }
    window.onload=startList;
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Horizontal Drop Down Menus</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="drop_down.js"></script>
    <style type="text/css">
    @import "style2.css";
    </style>
    </head>
    <body> 
    <ul id="nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a> 
        <ul> 
          <li><a href="#">History</a></li> 
          <li><a href="#">Team</a></li> 
          <li><a href="#">Offices</a></li> 
        </ul> 
      </li> 
      <li><a href="#">Services</a> 
        <ul> 
          <li><a href="#">Web Design</a></li> 
          <li><a href="#">Internet Marketing</a></li> 
          <li><a href="#">Hosting</a></li> 
          <li><a href="#">Domain Names</a></li> 
          <li><a href="#">Broadband</a></li> 
        </ul> 
      </li> 
      <li><a href="#">Contact Us</a> 
        <ul> 
          <li><a href="#">United Kingdom</a></li> 
          <li><a href="#">France</a></li> 
          <li><a href="#">USA</a></li> 
          <li><a href="#">Australia</a></li> 
        </ul> 
      </li> 
    </ul> 
    </body>
    </html>
    Style2.CSS:
    Code:
    body {
    	font: normal 11px verdana;
    	}
    
    ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	width: 150px; /* Width of Menu Items */
    	border-bottom: 1px solid #ccc;
    	}
    
    ul li {
    	position: relative;
    	}
    	
    li ul {
    	position: absolute;
    	left: 149px; /* Set 1px less than menu width */
    	top: 0;
    	display: none;
    	}
    
    /* Styles for Menu Items */
    ul li a {
    	display: block;
    	text-decoration: none;
    	color: #777;
    	background: #fff; /* IE6 Bug */
    	padding: 5px;
    	border: 1px solid #ccc;
    	border-bottom: 0;
    	}
    
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */
    
    ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
    		
    li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
    		
    li:hover ul, li.over ul { display: block; } /* The magic */
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    301
    Rep Power
    16
    Managed to get the main menus in line with this but have lost my sub menus. Changes in red, moved bottom border, change display: block; to float: left; in two places, removed li section.
    Code:
    body {
    	font: normal 11px verdana;
    	}
    
    ul li {
    	position: relative;
    	}
    	
    li ul {
    	position: absolute;
    	left: 149px; /* Set 1px less than menu width */
    	top: 0;
    	display: none;
    	
    	}
    
    /* Styles for Menu Items */
    ul li a {
    	float: left;
    	text-decoration: none;
    	color: #777;
    	background: #fff; /* IE6 Bug */
    	padding: 5px;
    	border: 1px solid #ccc;
    	border-bottom: 0;
    	border-bottom: 1px solid #ccc;
    	}
    
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */
    
    ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
    		
    li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
    		
    li:hover ul, li.over ul { float: left;  } /* The magic */
  4. #3
  5. Winemaster
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,355
    Rep Power
    168
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    301
    Rep Power
    16
    I expect that maybe the li section handles the submenus???
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    301
    Rep Power
    16
    We must have posted at the same time, yep that's what I'm looking for.

    Thank you
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    301
    Rep Power
    16
    Oh where would I change whether I want to justify it to the left or right?
  12. #7
  13. Winemaster
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,355
    Rep Power
    168
    Well, this is what it is right now :
    Code:
    ul {
      	margin: auto;
      	padding: 0;
      	list-style: none;
      	width: 405px;
      	}
    When you have an element with a width set and margin:auto, it usually centres.
    To put it on the left, you could either set the margin to 0 or use 'float:left'. To go right, use 'float:right'.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    301
    Rep Power
    16
    Thanks,
    Now I noticed a problem when I put this on the site, it affects every list, no matter where it's at. How could I limit this to only the menu list. (vertical menu)
    Last edited by Ronack; April 1st, 2005 at 11:47 AM.
  16. #9
  17. Winemaster
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,355
    Rep Power
    168
    Refer to the list by name (id). Look again at the css on my page - I've updated it to use the id.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    301
    Rep Power
    16
    I just tried it (the vertical one) and it didn't work. I might add here that I have style1.css in an external file. I have style1.css in one external for vertical menu and style2.css as another external file for horizontal menu. Do I need to do something else when it's in an extrenal file?
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    301
    Rep Power
    16
    I might not have this right because it's trying to work.
    Code:
     body {
    	font: normal 11px verdana;
    	}
    
    #nav, #nav ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	width: 150px; /* Width of Menu Items */
    	border-bottom: 1px solid #ccc;
    	}
    
    #nav ul li {
    	position: relative;
    	}
    	
    #nav li ul {
    	position: absolute;
    	left: 149px; /* Set 1px less than menu width */
    	top: 0;
    	display: none;
    	}
    
    /* Styles for Menu Items */
    #nav, #nav ul li a {
    	display: block;
    	text-decoration: none;
    	color: #777;
    	background: #fff; /* IE6 Bug */
    	padding: 5px;
    	border: 1px solid #ccc;
    	border-bottom: 0;
    	}
    
    /* Fix IE. Hide from IE Mac \*/
    * html #nav ul li { float: left; height: 1%; }
    * html #nav ul li a { height: 1%; }
    /* End */
    
    #nav ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
    		
    #nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
    		
    #nav li:hover ul, li.over ul { display: block; } /* The magic */
  22. #12
  23. Winemaster
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,355
    Rep Power
    168
    Can you give me a link to your page so that I can see the problem?
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    301
    Rep Power
    16
    Keep in mind this is a testing site and there is a bunch of stuff going on there. test site
    It might be better if I move some other pages over so you can see them. The site is a Geeklog site and has it's own css.
    So what I want to do is anywhere I have a menu whether it's on top or side I want it to work. The side menus will probably change a lot and there could be several. The top menu can have several as well depending. In geeklog we keep the css in an external file. I would rather just place extra css coding in the one css file I already use, alternatly I don't mind having a second or even a third css for the menu functions.
  26. #14
  27. Winemaster
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,355
    Rep Power
    168
    You don't have the javascript or the nav css attached to the page...
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    301
    Rep Power
    16
    Oh sorry, I'm testing on a different theme, try it now.
Page 1 of 4 123 ... Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo