SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: Css Menu

  1. #1
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css Menu

    Hey i found a sweet menu in css http://www.alistapart.com/d/horizdro...orizontal2.htm

    But i would like the initial hober overs from left to right not up and down.

    Could someone help, Thanks.

  2. #2
    SitePoint Addict loadx's Avatar
    Join Date
    Jul 2004
    Location
    Melbourne, VIC, Australia
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have no idea what you are trying to say.

    Is your objective to have a horizontal drop down menu ?

  3. #3
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by loadx
    i have no idea what you are trying to say.

    Is your objective to have a horizontal drop down menu ?
    Yea I think you got it.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You should find some horizontal examples here:

    http://www.htmldog.com/articles/suckerfish/dropdowns/

    Paul

  5. #5
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    You should find some horizontal examples here:

    http://www.htmldog.com/articles/suckerfish/dropdowns/

    Paul
    Thats what i want but it to look like the one in my first post

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thats what i want but it to look like the one in my first post
    Sorry, but I didn't have time to style it for you. It should just be a simple matter of applying the presentational styles from the other layout without changing the structure of the new one.

    If you are desparate and can't do it yourslef then post again and I'll try and find time tomorrow

    Paul

  7. #7
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know its simple but my real problem is when i add a width to ul they stack up

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Well post what you've got so far and I'll take a look in the morning as I've finished for the day now

  9. #9
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got pissed off and deleted it I can wait if you still wanna do it for me tommorow morning

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

    Here you are (but needs testing).
    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">
    // 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;
    </script>
    <style type="text/css">
    body {
     font: normal 11px verdana;
     }
    ul {
     margin: 0;
     padding: 0;
     list-style: none;
     }
    ul li {
     position: relative;
     float: left;
     width:149px;
    }
     
    li ul {
     position: absolute;
     left: 0; /* Set 1px less than menu width */
     top: auto;
     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;
     }
    /* commented backslash mac hiding hack \*/ 
    * html ul li a {height:1%}
    /* end hack */ 
    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 */
    </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>
    Paul

  11. #11
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a zillion man


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
  •