CSS Drop downs

socoolbrewster · December 18th, 2007, 10:13 AM

Hi,

I have designed a website that requires a dropdown menu similiar to John Lew www.johnlewis.com, but pure CSS based.

I know how to use the :hover and nested UL to create a dropdown, but I'm not sure how to do one where the navigation is in cols like John Lewis.

I was therefore wondering if anyone knew of an tutorials, or could recommend an approach to create column based dropdown menus in CSS?

Gaz

chroniclemaster1 · December 19th, 2007, 12:17 AM

All you need to do is position the nested ULs absolutely. Create each column as a separate UL inside the LI of the main menu UL. You could "try" floating them all left to stack like that, but good like. I would specify a fixed width column that is wide enough for your content in all circumstances. Position everything absolutely and with a top rule that's the same for all columns and pushes it down below the styling for the LI of the main menu UL. The trick is to make sure that you position each column in the correct relationship. Say...

li {
width:5em;
}

Then in your HTML apply a class="col1" to the first nested UL, class="col2" to the second, etc. and add this CSS

.col1 {
left:0;
}

.col2 {
left:5em;
}

.col3 {
left:10em;
}

etc.

This looks like about all the website is doing. If you want to put a border around the drop down, I would put a div around the nested ULs. e.g.

<li>
   <div>
    ...nested ULs...
   </div>
</li>

It looks like he's simply specifying identical height, width, and color attributes so that they look like they go together. Styling the div would let you do some even more sophistacated things like applying a background image to the entire menu. It provides the hook to treat the menu as one unit without resorting to manipulation of the LI. That keeps your work on the menu bar and the individual menus separate in the CSS.

-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.

socoolbrewster · December 19th, 2007, 10:31 AM

Thanks for the tip, I'll give it ago. On looking at the John Lewis site, I wasn't sure if JavaScript played a part in it, but it appears to be CSS based

Gaz

socoolbrewster · December 19th, 2007, 10:32 AM

My other query was to find a solution that aid good semantic code, and was the best way of doing it. Your solution makes sense. Thanks

Gaz

mat41 · December 19th, 2007, 06:24 PM

It will be good for your coding to:

a..identify how John does it
b..pull the code out of his source

Not only good for your coding but also give you a solution...

Wind is your friend
Matt

chroniclemaster1 · December 22nd, 2007, 05:32 AM

I think you're already using it. Typically for a menu system, the primary key for using good semantic code is to make sure that you're using a sequence of nested lists. Check, so I think you're doing a great job as far as what we've discussed goes. That and make sure that everything is separated out... XHTML in the .html file, CSS in the .css stylesheet, and any javascript done unobtrusively in your .js file.

Here's my check to see if you're writing good semantic code. Look at the code in notepad, ignore what it's going to look like on screen. And if the tags your using, and the classes and ids you're applying 1) all make sense AND 2) help you make sense of the document structure. Then you're writing good semantic code. Semantic code is the easiest thing in the world to write once you get used to it. It makes your code very simple and easy to understand. Mine usually look like this...

<!DOCTYPE ...>
<html ...>
   <head>
      header stuff...
   </head>
   <body>
      <div id="header">
         <h1>Main Title</h1>
         ...other top of page structure...
      </div>

      <div id="mainContent">
         <div id="Section1">
            <p>
               My first paragraph talking about point 1.
            </p>
            <p>
               My second paragraph talking about point 1.
            </p>

            <table id="tabularData">
               ...table structure...
            </table>

            <p>
               Closing commentary about point 1.
            </p>
         </div>

         ...other content...
      </div>

      <div id="footer">
      ...other footer structure...
      </div>

      <div id="navSection">
         <ul id="mainMenuBar">
            <li>
               Menu item 1
                  <ul id="mainNavPages">
                     <li>
                        Submenu item 1
                     </li>
                     <li>
                        Submenu item 2
                     </li>
                  </ul>
            </li>
            <li>
               Menu item 2
                  <ul id="userInteractionPages">
                     <li>
                        Submenu item 1
                     </li>
                     <li>
                        Submenu item 2
                     </li>
                     <li>
                        Submenu item 3
                     </li>
                  </ul>
            </li>
            <li>
               Menu item 3
                  <ul id="productPages">
                     <li>
                        Submenu item 1
                     </li>
                     <li>
                        Submenu item 2
                     </li>
                     <li>
                        Submenu item 3
                     </li>
                  </ul>
            </li>
         </ul>
      </div>
   </body>
</html>

If you can read your XHTML and it makes sense... you're writing good semantic code. And nothing that you write in should have anything to do with the appearance you want displayed. That should all be in the CSS. The only exception, should be if you need to add an id or a class for the CSS to grab onto. That's fine, as long as the id/class makes functional sense of the purpose of the tags.

-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.