SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Albany, N.Y.
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    nested horizontal css navigation

    I am trying to create a nested horizontal css navigation.


    xhtml code for the navigation

    <ul>
    <li><a href="#">Home</a></li>
    <li id="active" ><a href="#">Services</a>
    <ul id="subnavlist">
    <li><a href="#">Sub link 1</a></li>
    <li><a href="#">Sub Link 2</a></li>
    <li><a href="#">Sub Link 3</a></li>
    </ul>
    </li>
    <li><a href="about_us.html">About Us</a></li>
    </ul>


    This is basically an unorder list with a nested unorder list

    the CSS file that I have so far

    ul {
    list-style:none;
    margin: 0;
    padding: 0 0 0 5px;
    }


    li {
    display: inline;
    padding: 3px 15px 3px 0;
    line-height: 25px;
    }

    #nav {

    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size: 12px;
    background-color: #81add2;


    }

    a { text-decoration: none; color: #FFFFFF;}
    a:visited { color:#000000; }
    a:hover {border-bottom: 3px solid #bbb;}

    #subnavlist {display: none;}

    I set the ID subnavlist to display none thus hide the submenu

    But how do I show the Submenu under services link when someone hovers
    over the services link and keep it visible to allow them to select one of the submenu links but disappear if they move off the services or submen links??

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cedtech23 View Post
    how do I show the Submenu under services link when someone hovers over the services link and keep it visible to allow them to select one of the submenu links but disappear if they move off the services or submen links??
    JavaScript

    In my experience, while you can create CSS-only drops that look good, it always involves a bunch of nested tags, copious amounts of style information, and at the end of the day can't touch the user experience that JavaScript is capable of.

    Sometimes perfection means sacrifice. Don't lose sight of user-friendliness in the pursuit of syntax


    Andy
    From the English nation to a US location.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Have a look at the suckerfish menus that use a lightweight script for ie6 because ie6 doesn't understand hover on elements other than anchors and needs some help.

    Here is my take on the suckerfish menu.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center nav. buttons

    Paul on your take of Suckerfish Nav. buttons how do I center the button in the page

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

    You can centre the nav in the same way you would centre any other element by giving the parent a width and using margin:auto (ignoring ie.+ of course which would need text-align:center on a parent of the ul itself instead);


    e.g.
    Code:
    ul {
        margin: 0 auto;
        padding: 0;
        list-style: none;
        width:596px;
    }
    Hope that was what you meant

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    nested horizontal css nav.

    That work fine Pual it center my button but effected the drop downs in stead of dorping down vertical they go horizontal.

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

    Yes the code I gave you above was just a generic example. You should apply the id to the style so that it only affects the first level.

    e.g.

    Code:
    ul#nav {
        margin: 0 auto;
        padding: 0;
        list-style: none;
        width:596px;
    }
    Assuming that your list is also called #nav

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    nested horizontal css nav.

    Thanks Paul that work fine. Can I ask you one more question how do I put a image button on the the buttons. Like these two images.
    upnavx.gif

    upnav.gif

  9. #9
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Keep in mind that using Javascript to control behavior of essential elements can pose significant usability/accessibility issues. In your case, navigation.

    Obviously, I am unfamiliar with your site or requirements and in your specific case, you may not require that particular navigation to be available to all users. On the other hand, if this navigation bar provides the sole method for navigating your site and the user has Javascript turned off, unavailable, or disabled for any reason, they will not be able to use your site.

    As I said, this may not be an issue in your specific case but in general you should always weigh the benefits of scripted behavior against any accessibility drawbacks and either ensure an alternative means or rethink the implementation.

    Good luck,
    -Rod

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

    Yes you can use graphical buttons if you just set the dimensions properly. However it will slow the menu down a bit and then there is also the issue of text-resizing.

    You could do it something like this:

    http://www.pmob.co.uk/temp/drop-down-multi2.htm

    As Rod said you should never rely on javascript navigation alone so always make sure that visitors can navigate your site by other means.

    The suckerfish menus are however better than most because they work in in mozilla,firefox and opera and ie7 without needing javascript at all. Its only ie6 and under that need the js routine anyway.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    nested horizontal css nav.

    Looking great Paul. But one thing has me confused is where you have background URl(images/egrave.jpg) where do I put my too gif file at.
    Thanks Paul for all the help you have giving me it been a big help to me
    Ed.
    Last edited by egrave; Jan 20, 2007 at 14:29.

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

    Sorry for the late reply but I got no notice of this message.

    I'm not quite sure what you are asking but I think you mean this:

    Both images are combined into ine image and then jsut the background position is changed on hover to show the different image. This makes for preloaded image swaps.


    here is the single image I used.

    http://www.pmob.co.uk/temp/images/egrave.jpg

    On hover the image position is moved so that the over state is shown.

    Code:
    background-position:0 -30px
    The image is actually 60px high but we only show 30px of it at any one time. This makes the image swap instant and easy to manage.

    Hope that was what you were asking.

  13. #13
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    nested horizontal css nav.

    Thanks Paul for all your help it works just fine. Thanks again


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
  •