SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2011
    Location
    San Diego
    Posts
    111
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Sprite Drop Down menu bar

    Hi everyone.

    I'm currently working on redoing my horizontal navigation bar. I originally did it through DreamWeaver's Spry Horizontal Navigation, but I can't get it to look the way I want it, and it just doesn't seem right.

    So I'm starting over and mixing CSS and PhotoShop to create a Sprite Drop Down menu. My menu is successful easily without the drop down navigation, but once I do add it, then it gets very tricky. I have since been trying to copy my teachers navigation from scantron.com. His looks so perfect, but when I tried copying his code and configuring it for my menu bar, it just looks like crap.

    I will post a link later of what it currently looks like (I'm not at my computer now). Anyone know any sites, videos that can give me this? If it helps, I prefer to hand-code everything.

    Thanks.

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

    Quote Originally Posted by louie540 View Post
    I have since been trying to copy my teachers navigation from scantron.com.
    That's one of Stu Nichols menus and is quite complicated if you don't understand the concept. It works by using illegally nested anchors and tables and then hiding the invalid bits with conditional comments. It's not a method I like but is clever and will work in IE6 without javascript.

    I prefer the simpler and much cleaner approach using the suckerfish menu type of dropdown.

    Here is my version of the suckerfish which is better behaved than the suckerfish examples. The only complicated part is the repeated styles for the multi flyouts but they don't really need to be altered much to change the styling.

    There is nothing special abut styling dropdowns except to remember that when you say something like ul li {background:red} then you also by default will style all nested lists red so you have to then counteract that with a more specific style e.g. ul li li {background:green}.

    This applies to all the properties you use and all other elements such as anchors in the nested styles. Just keep track of what you are doing.
    e.g.
    Code:
    ul#nav li{/* first level */
    float:left;
    background:red;
    }
    
    ul#nav li li{/* second level */
    float:none;
    background:green
    }
    
    ul#nav li li li{/* third level */
    background:orange;
    }
    Avoid the child selector (>) if you want ie6 support as it doesn't understand it.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2011
    Location
    San Diego
    Posts
    111
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'll give it a shot.

    Thank you for your warm welcome and response

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2011
    Location
    San Diego
    Posts
    111
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I decided to try the one I was working with again, since I felt I was so close. I got it, but it's not rolling over properly. The buttons are suppose to turn a darker shade. You may notice that the drop down looks eerily similar to that of my teachers.

    http://louieswebsite.com/Tests/shutup.html

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2011
    Location
    San Diego
    Posts
    111
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok I don't mean to bump again, but I finally figured it out. I was missing where it said "Classes" in the HTML <li> tags. I was mainly looking at the style sheet.

    Oh jeez. Now just a few touch ups.

    *RESOLVED*

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Glad you got it sorted in the end. It's amazing what a bit of perseverance can do


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
  •