SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Driven Menu System

    I have seen loads of these that are on the net and available to use but I would like to be able to create my own and understand why they work or fail as time goes by.

    Does anyone know of a step by step tutorial that teaches you how to create css driven menus???

    Ideally from a mark up like this

    Code:
    <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3
    <ul>
    <li>List 3 Sub List 1</li>
    <li> List 3 Sub List 2</li>
    </ul>
    </li>
    <li>List 4</li>
    </ul>
    Thank You

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wrote one that creates a tab menu based on an unordered list which you might find useful

    CSS tabs menu

  3. #3
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Dave I will have a look through that.

    Do you know how to do a flyout one??? So the sub menu appears to the left of the first menu??

    Cheers

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean like this one...

    http://www.dave-woods.co.uk/?p=104

    Or possibly like this one...

    http://www.sitepoint.com/forums/showthread.php?t=514516

    If you've got an example that you can show us then I'm sure someone will be able to explain how it works.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Most of the flyout menus are based on the suckerfish menu.

  6. #6
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh Yes that looks excellent thanks again Dave.

  7. #7
    SitePoint Zealot
    Join Date
    Apr 2004
    Location
    arizona
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks fantastic Dave. I was looking for something exactly with that look and feel.

    Is there anyway to use this without javascript? Im just worried users will have javascript turned off on their browser. Should I even be worried about it???

    Thanks, Norris

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works fine without JavaScript in IE7, Firefox, Opera and Safari (and presumably any other modern browser).

    The only reason for the JavaScript is so that IE6 (and below) play nicely so over the next few years as IE6 slowly gets fades out, the JavaScript will become redundant.

    For now though, to ensure that IE6 users without JavaScript can use the menu, I'd always try and ensure that the top level menu item physically goes somewhere so that all the links aren't hidden away in the submenu's.

    Then on the resulting page you could replicate the submenu in some kind of static side bar.

    Maybe this is a bit overkill but as IE6 still tends to hold around 30-40&#37; of the market on most sites it's something that we still need to think about at the moment unfortunately.

    But the good news is that as the menu uses semantic HTML, search engine's will have no problem indexing the page as apposed to a complete JavaScript version.

    Hope that helps.

  9. #9
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why don't you head on over to:

    http://www.cssplay.co.uk/menus/

    He can do most things without javascript.

    I've used load of these type of css drop down menus before. With better support for CSS 2.1 we don't really need scripting as far as i can see.

    Def worth checking out CSS play and studying his menus.

    My advice would be to seriously study the rules regarding:

    a) inline and block elements

    b) relative vs absolute vs float positioning

    If you really look into these and study how they effect things then you will have way more appreciation of HOW to think up/create these menus yourself. But then again don't try and reinvent the wheel. These guys have done the hard work for you. Borrow one of their designs (with permission if required) and change it to fit what you need.

    Hope this helps?

    PS: seriously - look into the finer points of positioning and display CSS
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by get_dave
    He can do most things without javascript.
    While I applaud most of Stu's work I dislike his menus because they simply used nested anchors to achieve the effect and then simply hide the invalid bits from the validator. The code in reality is still invalid.

    It has always been known that you can make drop down menus using nested anchors but it is invalid to so so. Just hiding the closing anchor from the validator is a cheat in my mind whatever the outcome.

    It's not really that clever either because it adds masses of code and conditional comments that could be achieved neatly with a couple of lines of javascript.

    If you wanted to be clever you could simply nest the anchor using the object or del tag and then it would pass the validator with flying colors but would be semantically wrong and incorrect to do so.

    However as I said above the rest of Stu's Demos are fine (some are brilliant) but I think he let himself down with those menus.


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
  •