Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old December 18th, 2007, 10:13 AM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default CSS Drop downs - 2 col

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
__________________
Gaz
Reply With Quote
  #2 (permalink)  
Old December 19th, 2007, 12:17 AM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

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.
Reply With Quote
  #3 (permalink)  
Old December 19th, 2007, 10:31 AM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #4 (permalink)  
Old December 19th, 2007, 10:32 AM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #5 (permalink)  
Old December 19th, 2007, 06:24 PM
Friend of Wrox
Points: 6,664, Level: 34
Points: 6,664, Level: 34 Points: 6,664, Level: 34 Points: 6,664, Level: 34
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2004
Location: Sydney, NSW, Australia.
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
Send a message via AIM to mat41
Default

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
Reply With Quote
  #6 (permalink)  
Old December 22nd, 2007, 05:32 AM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

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.
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
dealing with drop downs lisabb ASP.NET 2.0 Basics 5 May 28th, 2007 12:29 AM
dependent drop downs p2pMember ASP.NET 1.0 and 1.1 Professional 0 July 19th, 2006 05:25 AM
Drop downs for choosing # of pages gilgalbiblewheel Classic ASP Databases 3 October 21st, 2004 03:12 PM
Day of week Drop Downs jeffbarclay Javascript How-To 5 November 17th, 2003 08:28 PM



All times are GMT -4. The time now is 12:30 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.