Easy (likely) CSS Navigation Question
- Started
- Last post
- 16 Responses
- ChickenCrab
n00b-level question here.
I have three different list-based nav menus that I need to set variables for to show the current page for each. I've always used an id or class on the body tag to do this because I've never made a site with more than two separate menus. Once those two are used, what do I use for the third?
- version30
a different body class each time should allow you endless options
- ChickenCrab0
All three usually need to be showing at the same time, so the first two menus take up the id and class just about all the time.
- BattleAxe0
.class1{this and that; }
.class2{this and that; }
.class3{this and that; }
- version30
all available menus would be on each page, css will display or hide the menu based on the class it's contained with on the page
- ChickenCrab0
I'm sorry guys, but I don't understand what you're getting at here. Could you be more specific?
- grunttt0
v3 - chickencrab is my co-worker (a designer pushed into programming). I recommended he join qbn... not only 2 lower productivity in the office X2 but so he could get answers from you good folks that know what the hell your doing.
- So you did this to him on purpose? I you work with a chicken with crabs? seriously, wtf?TheBlueOne
- :DTheBlueOne
- BattleAxe0
if I understand your question, you are trying to find a way to save 3 different styles for a navigation menu , you want each available at the same time. is this correct?
if so lets say you want to show 3 navigation menus , but each look a bit different
for examples a top navigation, a left navigation and footer navigation , since they are in 3 different parts of the layout, I will use 3 identifiers to distinguish them from one another , so in my style sheet I have 3 IDs
#topNav {}
#leftNav {}
#footNav{}each looking all snazzy and stuff
then in my HTML
i have to refrence them with an ID attribute
so
<div id="topNav"></div>
<div id="leftNav"></div>
<div id="footNav"></div>
hope that helps
- ChickenCrab0
Ah, no. Not what I meant, sorry. I have three different menus like you described, but they're already designed and coded and on the site.
I just need to find a way to make all three able to display whichever current page they're on. So if I have a page that's in the Products section under the Teflon category on the Properties Of Teflon page, each of those will turn the text red and bold to show where the user is in the site. But we won't always need to show all three of those at the same time, so they need to all be controlled independently.
- something like this I would use php for conditionalsBattleAxe
- http://www.alistapar…BattleAxe
- version30
like this, real dirty, you do the work yourself...
you need:
body classes
.page one
.page two
.page three
etcmenu ids
#menuone
#menutwo
#menuthree
etcpage one css is
.pageone #menuone visible
.pageone #menutwo visible
.pageone #menuthree visiblepage two css is
.pagetwo #menuone hidden
.pagetwo #menutwo visible
.pagetwo #menuthree visiblepage three css is
.pagethree #menuone hidden
.pagethree #menutwo hidden
.pagethree #menuthree visiblegot it?
- ChickenCrab0
I'm apparently very lost with this. Much more so than I already thought. Thanks for trying to help. I think I do understand what you're saying here, but with the number of items I'm dealing with, it's a lot of work. I need to look it over some more.
- version30
ChickenCrab, (first off your name, you sound like a wimpy whiner ;) )
Anyway, what site are you dealing with? How many pages? How many menus? What is the structure?
- ETM0
But what are you not getting? Its actually pretty basic.
Can you post sample code and/or mockups?
- welded0
This could really become a headache to code and maintain by hand. If you are using a CMS or some other dynamic means to generate the menus then the best way would be to programatically add an 'active' class to each section's current list item.
<li><a link></li>
<li class="active"><a link></li>
etc...Haha, sorry, I'm probably just making things more confusing for you... ;)
- airey0
throw youself into some decent cross-sectional examples and see what you come up with:
- airey0
and:
http://www.web designer wall.com/tutorials/advanced-css...
- qbn wouldn't let me add the link?airey
- http://pxl2.in/version3