Tab navigation like on guardian site

Discussion in 'Web Design' started by dsydius, Nov 22, 2010.

to remove all ads.
  1. dsydius

    dsydius New Member

    Messages:
    11
    Hello everyone.....

    I am trying to replicate the tab navigation like the one on the Guardian.co.uk site.

    I can't seem to figure out how the first link works on the second set of navigation tabs.

    Also, how do the arrows work for the second nav links?

    Hope someone can shed some light......give me a hint, please!
    I've attached the files i am working with.

    DsyD
     

    Attached Files:

  2. bcee

    bcee New Member

    Messages:
    367
    Open the source and inspect the div#zones-nav, then view the CSS. It really isn't complicated.
     
  3. dsydius

    dsydius New Member

    Messages:
    11
    Hi,

    Thanks for the response.

    I think I know how to fix this now.....but one question - why are there 4 different background images related to each crumb?

    DS
     
    Last edited: Nov 22, 2010
  4. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Off the top of my head, they are probably using image sprites. Sprites combine all images states into one image, then you simply show the part of the image you want and hide the remainder. Now your page loads/requests one image instead of four.
     
  5. LouTheDesigner

    LouTheDesigner New Member

    Messages:
    506
    Word. Every designer needs firebug to learn from other sites.

    -Lou
     
  6. dsydius

    dsydius New Member

    Messages:
    11
    I've created the images but they don't seem to be making any difference......ARHHHHHH!!! This is driving me nuts!
     
  7. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Post a link or example, and we can help you figure it out (before you go postal lol)
     
  8. bcee

    bcee New Member

    Messages:
    367
    We will need your HTML and CSS to sort this out...
     
  9. dsydius

    dsydius New Member

    Messages:
    11
    I have attached a zip with all the files.

    I hope it makes sense......

    Ta,
    DS
     

    Attached Files:

  10. smoovo

    smoovo New Member

    Messages:
    377
    Your solution is Javascript and CSS.

    Explanation:

    Default -> First two list items in the menu works with background color and image. The first has color red in its background as a default, and the second has background image with small red arrow head on his left as a default. This makes it look like the first list item sitting on an red arrow.

    When you mouse over the first item -> the first item gets black background color (CSS "hover" method), and the second item changes its image to small black arrow head (Javascript DOM method).

    When you mouse over the second item -> only the second item affected. Its background image changes to image with small red arrow head on his left with the right space red colored (CSS "hover" method).

    Images:
    [​IMG]

    Javascript:
    HTML:
    document.getElementById('first_item').style.backgroundImage="url(bgdesert.jpg)"
    This all is just a hint, so try to do it and let us know.

    - Enjoy. ;)
     
  11. dsydius

    dsydius New Member

    Messages:
    11

    Errmm.......I am trying to get to grips with CSS, hadn't started on javascript. Is this the only way?
     
  12. smoovo

    smoovo New Member

    Messages:
    377
    When you are doing any action on a web page you can control only the one you are mousing over or typing in. In this case you want the menu to act in a way of one controlling the other (only once though), so yes, you have to use Javascript, it will do the job.

    If you will prepare it all with HTML and CSS i can help you with the Javascript part at the end. ;)
     
  13. dsydius

    dsydius New Member

    Messages:
    11
    Ok....DEAL

    I will get cracking.

    DS
     
  14. smoovo

    smoovo New Member

    Messages:
    377
    PM me when you have it done. Good luck :)
     
  15. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    I'm not sure you even need javascript here, after looking at the guardian site, that whole menu could be done with css alone.
     
  16. dsydius

    dsydius New Member

    Messages:
    11
    I was hoping you'd say that :)

    I have attached my files.....could you tell me where I am going wrong?

    I am bit desperate!

    Hope you can help.

    DS
     

    Attached Files:

  17. smoovo

    smoovo New Member

    Messages:
    377
    Ye, i also hoped that. Can you please provide the code for that? :)
     
  18. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077

    For sure, I will build an example for you guys later today.
     
  19. dsydius

    dsydius New Member

    Messages:
    11
    Cheers PP......excited to learn something from the pros.
     
  20. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Anytime, I got swamped at the end of the day yesterday but i will put something together today
     

Share This Page