CODEWITHSUNDEEP
cssnavigation
Nathan
Nathan

Reputation: 2513

2 tiered horizontal navigation bar

Wondered if anyone had any links to a tutorial for a navigation bar in css (not javascript). I'm after a 2 tier horizontal bar. the bottom tier being also horizontal.

Just like the following image

enter image description here

any pointers would be a great help!

Upvotes: 2

Views: 7572

Answers (4)

justisb
justisb

Reputation: 7280

I think you just mean two tiers, and they are both visible all the time, not that the second tier is visible on hover, correct?

If so, here's a basic fiddle example: http://jsfiddle.net/jblasco/XAE9c/

Anyway, the idea is to use two ul lists, and place the li elements of your nav in them accordingly. You can then style the list items however you want from there, as well as add links to their content, etc.

If you have a dynamic page, you would do a simple server-side check for if ($PageURL == "blah.php") { and spit out class="active" on the current tab, and style that however you like.

I'd suggest using inspect element on some nav bars you like, and going from there.

Upvotes: 1

afaf12
afaf12

Reputation: 5436

cssplay.co.uk has plenty of dropline menus. Just look under "Multi-Level - Dropline". Pay attention to copyright though.

Upvotes: 1

Damen TheSifter
Damen TheSifter

Reputation: 911

The solution without Javascript for IE hover hack http://webstuffshare.com/demo/New-CSSTabMenu but it may not behave in the way you want, are you after reveal on hover? http://www.webstuffshare.com/2010/01/updated-pure-css-tab-menu/

Upvotes: 0

Evan Davis
Evan Davis

Reputation: 36592

THE guide: Suckerfish Dropdowns.

http://www.alistapart.com/articles/dropdowns

You'd just modify the styles to be fully horizontal.

Upvotes: -1

Related Questions