SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Navigation

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2002
    Location
    ../home/
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigation

    Hello.

    I really liked the fast rollovers technique I discovered here ->
    http://wellstyled.com/files/css-nopr.../example2.html

    Now I'd like to make a navigation kida like this - >http://wellstyled.com/files/css-nopr.../example2.html , which is no problem, but I want my menu to display the 'current' page as well - when you're on, for instance, the first page (like in the example), I'd like the background to be darker blue (rollover state).... So, no rollover for that perticular menu item.

    Can this be done with CSS or do I need a bit of PHP as well? Any exaples would be welcome.
    Thanx!

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

    Well without scripting you can set the active state of the menu by either adding an active class to the current menu referring to the current page. This means you need to have the active class different on each page that the menu refers to.

    Or a more sophisticated method is to use the body id to identify the page which activates only the class that is relevant to the current page.

    This is a much neater solution because the only html that changes on any page is when you simply add the appropriate id to the body tag.

    Heres an example.Add this css to your existing code.
    css:
    Code:
     
    body#first a.first {background-image: none;}
    body#second a.second {background-image: none;}
    body#third a.third {background-image: none;}
    Then add this body id and classes to the anchors.
    html:
    Code:
    <body id="first">
    <!-- change the id on each page to either first, second or third -->
    <div id="menu">
    <div class="outer"><a class="first" href="#"><span>First</span></a></div>
    <div class="outer"><a class="second" href="#"><span>Second</span></a></div>
    <div class="outer"><a class="third" href="#"><span>Third</span></a></div>
    </div>
    Run the code and then just the id in the body to be either first, second or third to see the relavent tab menu item light up.

    If you want really fast rollovers without the hourglass flicker that you get on your example then this method that I did last year is the fastest.

    http://www.pmob.co.uk/temp/cssrollover4.htm

    However the drawback is that an image needs to be in the html to avoid the ie hourglass which will always flicker on any manipulation of a background image. It doesn't happen on foreground images though.

    The method you used has the hourglass flicker (but sometimes you can't even see it) so its the second best method for flicker but probably the best method for cleaner code.

    Also in your code above the span is superfluous and is not required (unless you had other plans for it.) You could simply remove the span and put the styles that were applied to the span into the anchor styles instead.

    Paul
    Last edited by Paul O'B; Sep 25, 2004 at 08:15.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2002
    Location
    ../home/
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks!


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
  •