Tab navigation like on guardian site

dsydius

New Member
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
 

Attachments

  • guardian nav.zip
    3.7 KB · Views: 6

bcee

New Member
Open the source and inspect the div#zones-nav, then view the CSS. It really isn't complicated.
 

dsydius

New Member
Open the source and inspect the div#zones-nav, then view the CSS. It really isn't complicated.

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:

PixelPusher

Super Moderator
Staff member
Hi,

...why are there 4 different background images related to each crumb?

DS

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.
 

dsydius

New Member
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.

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

dsydius

New Member
I have attached a zip with all the files.

I hope it makes sense......

Ta,
DS
 

Attachments

  • guardian nav.zip
    60.6 KB · Views: 1

smoovo

New Member
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:
menu.png


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. ;)
 

dsydius

New Member
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:
menu.png


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. ;)


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

smoovo

New Member
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. ;)
 

dsydius

New Member
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. ;)

Ok....DEAL

I will get cracking.

DS
 

dsydius

New Member
I'm not sure you even need javascript here, after looking at the guardian site, that whole menu could be done with css alone.

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
 

Attachments

  • guardian nav.zip
    60.6 KB · Views: 1
Top