Tab navigation like on guardian site

PixelPusher

Super Moderator
Staff member
Ok here ya go. Take a look at that and let me know if you have any questions.
 

Attachments

  • Intermediate_menu.zip
    5.5 KB · Views: 6

dsydius

New Member
PP,

That's awesome! I didn't expect it to be as simple as you have made it look.

Can't thank you enough......I have learned so much in just that one task than I have in the last few months.

Thanks again PP.....you are a star.

DS
 

PixelPusher

Super Moderator
Staff member
Just wanted to make one comment on the css info I gave you.
There is a class named :
Code:
ul.menu li:last-child a

This class uses a css psuedo class. Psuedo classes are very helpful. They allow the developer to target certain elements on the page markup without actually having to create a specific class name.

Problem is...and there is always one right :p

IE doesn't understand many psuedo classes. (IE must have been ditching class when all other browsers where being good students, haha....ok dumb joke)


Whats the solution?

Just make a specific class (e.g. last-item) and add the class name to the last list item in the menu. So it would look like this:
Code:
ul.menu li.last-item a, ul.menu li.top-category a, ul.menu li.sub-category a {
	border:none;
}
HTML:
<ul class="menu">
	<li class="top-category"><a href="intermediate_menu_pg1.html">news</a></li>
    <li class="first-item"><a href="intermediate_menu_pg2.html">UK</a></li>
    <li><a href="#">world</a></li>
    <li><a href="#">development</a></li>
    ...
    <li class="last-item"><a href="#">law</a></li>
</ul>
 
Last edited:
Top