SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Which CSS Nav method is this?

    Greetings all,

    I'm kind of new to CSS, been designing for years but never got my hands dirty with coding as much as I would like. I finally went and bought two of Sitepoint's books, but they really go over what I am looking for. I'm trying to implement a horizontal tab navigation using image/image rollovers for each link rather than a text based navigation.

    I did some snooping around here and found this thread:
    http://www.sitepoint.com/forums/showthread.php?t=405659

    and gave this result which is very close to what I would like to achieve:
    http://comicoza.theseducersdiary.com...avigation.html

    But I noticed near the bottom it uses some code that may be calling JS functions(?)

    Can anybody direct me to a tutorial for this method?

    I'm open to alternative methods as well, as long as they work well for both IE and FF browsers.

    Thanks!

    Adrian

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    The example you showed above doesn't need any javascript as the images is preloaded in one go and just its background position changed on hover.

    Here's one of the original articles.

    http://wellstyled.com/css-nopreload-rollovers.html

  4. #4
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote Originally Posted by Paul O'B View Post
    Hi,

    The example you showed above doesn't need any javascript as the images is preloaded in one go and just its background position changed on hover.

    Here's one of the original articles.

    http://wellstyled.com/css-nopreload-rollovers.html
    Oops, shows how much I know

    Thank you both kindly, hopefully it'll go smoothly, but I may have a few questions as I go along.

    Cheers!

  5. #5
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    I'm looking at the link you provided and the example that I supplied and there is one small difference which I don't understand the function of:

    Code:
     #nav li a:hover {
     	background-position: 50% -28px;
     	}
     	#nav li a.currentSection,
     	#nav li a.currentSection:hover {
     	background-position: 50% -56px;
     	}
    I'm guesstimating that it has something to do with when the link is clicked and you want to indicate the current section the user is in by giving it a current section state? Thats where I got the impression that this method needed JS because of the a.currentSection, I haven't seen that before.

    Does this mean the image used should include that third state, that being off, hover, and on (current section)?

    Thanks

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

    That section is simply to display a third image which will indicate the current page. In each page you will have one link that has the currentSection class identifying it. The class will be moved to another position on different pages as required

    There is no javascript used as this is not done dynamically. You have to add the class to each page in the correct place manually.

    The advantage of using one image with multiple parts is that you can have more than just one rollover image but you could also include an active image as well for a:active (e.g. when the button is depressed).


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
  •