The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CSS Navigation bar help requested, trying to have menu buttons change for active page
rosskennedy
post Aug 12 2012, 08:32 PM
Post #1





Group: Members
Posts: 7
Joined: 5-March 12
Member No.: 16,640



Hi, I am trying to have my menu change based on whether a page is active, visited or hover. My problem is that the active and visited coding does not seem to work for me: As I am a noob at this any help would be appreciated. Note: I do plan on placing all the css in it's own file and linking to it in the html when everything is working correctly

Here is my website
www.stewiackeholytrinitychurch.ca

Here is the code I am using:
CODE

#nav-menu
{
float:left;
width:100%;
overflow:hidden;
position:relative;
}  

#nav-menu ul
{  
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
}

#nav-menu ul li
{
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}

#nav-menu li a
{
background: url(images/menubackground.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;  
margin-left: auto;  
margin-right: auto;  
width: 9em;  
display: block;  
border: 0.1em solid #dcdce9;  
color: #0d2474;  
text-decoration: none;  
text-align: center;
}

#nav-menu li a:active
{
background: url(images/menubackgroundactive.gif) bottom left repeat-x;
height: 2em;  
line-height: 2em;  
margin-left: auto;  
margin-right: auto;  
width: 9em;  
display: block;  
border: 0.1em solid #dcdce9;  
color: #FF0000;  
text-decoration: none;  
text-transform:uppercase;  
text-align: center;  
}

#nav-menu li a:visited
{
background: url(images/menubackgroundvisited.gif) bottom left repeat-x;
height: 2em;  
line-height: 2em;
margin-left: auto;
margin-right: auto;  
width: 9em;  
display: block;  
border: 0.1em solid #dcdce9;  
color: #708090;  
text-decoration: none;  
text-transform:uppercase;  
text-align: center;  
}

#nav-menu li a:hover
{
background: url(images/menubackgroundhover.gif) bottom left repeat-x;
height: 2em;
line-height: 2em;
margin-left: auto;  
margin-right: auto;  
width: 9em;
display: block;  
border: 0.1em solid #dcdce9;  
color: #008000;  
text-decoration: none;  
text-transform:uppercase;  
text-align: center;
}
  /* Hide from IE5-Mac \*/
#nav-menu li a
{  
float: none
}
/* End hide */



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 12 2012, 08:41 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,424
Joined: 9-August 06
Member No.: 6



Visited seems to work, but active doesn't. That's because the order the rules come in is important. See towards to bottom of this chapter.
http://www.w3.org/TR/CSS2/selector.html#dy...-pseudo-classes .
More in depth here: http://meyerweb.com/eric/css/link-specificity.html .

Something to remember the usual order by is LVHA (LoVe HaTe). Link, Visited, Hover, Active.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rosskennedy
post Aug 12 2012, 10:43 PM
Post #3





Group: Members
Posts: 7
Joined: 5-March 12
Member No.: 16,640



QUOTE(pandy @ Aug 12 2012, 08:41 PM) *
Visited seems to work, but active doesn't. That's because the order the rules come in is important. See towards to bottom of this chapter.
http://www.w3.org/TR/CSS2/selector.html#dy...-pseudo-classes .
More in depth here: http://meyerweb.com/eric/css/link-specificity.html .

Something to remember the usual order by is LVHA (LoVe HaTe). Link, Visited, Hover, Active.


Thanks for that info Pandy, I was not aware of this. After making the changes though, I still find that the Visited and the Active don't seem to work. the Active will only momentarliy flash red (when you click on it) I want it to stay red when until you leave that page, then have the Visited take over (where it will turn slate grey with all uppercase letters)

What else am I missing?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 13 2012, 12:36 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,424
Joined: 9-August 06
Member No.: 6



You misunderstand what :active means. It doesn't mean the link to the current page. It's the state just when the link is clicked, that is a very brief moment. If you want to style the link to the current page differently you have to use other means.

I think :visited works. I've tried with several browsers. All buttons have a dark gray border now.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rosskennedy
post Aug 14 2012, 03:38 PM
Post #5





Group: Members
Posts: 7
Joined: 5-March 12
Member No.: 16,640



QUOTE(pandy @ Aug 13 2012, 12:36 AM) *
You misunderstand what :active means. It doesn't mean the link to the current page. It's the state just when the link is clicked, that is a very brief moment. If you want to style the link to the current page differently you have to use other means..


You're right Pandy, I did misunderstand what "active" meant. What I want is to have the button change to red to indicate the current page the user is viewing and when user clicks on another page, then the button for that page will become red and the previous button will then go to the "visited" state.

thanks
Ross Kennedy
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 14 2012, 04:46 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,424
Joined: 9-August 06
Member No.: 6



An easy way to do that is to give each link their own id. Then you give BODY of each page an id. Let's say you call the body IDs services, events and so on and the links services_link, events_link and so on. Then you can make up selectors that only match the services link if it is in the services page and the same for all the others. Then group them all together in one rule.

CODE
#services #services_link, #events #events_link    { /* styling for link to current page */ }


I'm a little old fashioned, so I think the link to the current page actually shouldn't be a clickable link at all, but not many care about that nowadays, so go ahead and do it with CSS.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rosskennedy
post Aug 15 2012, 07:44 PM
Post #7





Group: Members
Posts: 7
Joined: 5-March 12
Member No.: 16,640



QUOTE(pandy @ Aug 14 2012, 04:46 PM) *
An easy way to do that is to give each link their own id. Then you give BODY of each page an id. Let's say you call the body IDs services, events and so on and the links services_link, events_link and so on. Then you can make up selectors that only match the services link if it is in the services page and the same for all the others. Then group them all together in one rule.

CODE
#services #services_link, #events #events_link    { /* styling for link to current page */ }


I'm a little old fashioned, so I think the link to the current page actually shouldn't be a clickable link at all, but not many care about that nowadays, so go ahead and do it with CSS.


Ok, let me see if I understand this correctly Pandy. Each page will have its own unique ID, and then each page will have one unique id for the link (so that I can style the active link and it will only apply when they are on this page) but all other links will remain the same for the menu.

css styling
CODE

#services
{...} /* styling for current page */
#services_link
{
color: red
text-transform: upppercase
}


in html page
CODE

Body id=services
.  /* rest of html*/
.
menubuttonactive.services_link  /* Here I am creating a selector and using the services_link ID,*/
                                              /* which if I understand this correctly will now turn the text red and */
                                             /* make it uppercase for as long as the user is on this page */


If this is right then I would do this for all the other menu buttons each in their own page
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 15 2012, 08:12 PM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,424
Joined: 9-August 06
Member No.: 6



Nuh. Maybe you aren't familiar with contextual selectors? You must have it like this.

CODE
#services #services_link    { /* */ }


The selector means any element with the id 'services_link' that's contained in any other element with the id 'services'. A bit down the page here (Contextual Selectors) http://htmlhelp.com/reference/css/structure.html or here http://www.w3.org/TR/CSS2/selector.html#descendant-selectors (descendant and contextual selectors are two names for the same thing)

Then you create similar selectors for all the other links and pages. But you don't need to write out separate rules as you can group all the selectors together so one rule is all you need.


CODE

page1 link1, page2 link2, page3 link3, page4 link4
{ /* */ }


The above does the same job as if you had written separate rules for each of the selectors, as in the example below, only much shorter and easier to maintain.

CODE
page1 link1    { /* */ }
page2 link2    { /* */ }
page3 link3    { /* */ }
page4 link4    { /* */ }


QUOTE

CODE

Body id=services
.  /* rest of html*/
.
menubuttonactive.services_link  /* Here I am creating a selector and using the services_link ID,*/
                                              /* which if I understand this correctly will now turn the text red and */
                                             /* make it uppercase for as long as the user is on this page */




Not sure I follow. The links will all have their IDs on all the pages (that's part of the beauty of it, you don't have to keep track, you just give the links IDs once and for all and then repeat the same markup on every page). The only thing that must differ between the pages is the id of BODY.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jaycbrf4
post Aug 17 2012, 12:55 PM
Post #9


Member
***

Group: Members
Posts: 33
Joined: 9-August 12
Member No.: 17,587





You need to assign the class of "current" to the nav item for that page. and remove the <a>tag from that item.

Define "current" as the state you want the active link to look like:

<ul>
<li class="current">Home</li>
<li><a href="services.html">Services</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="history.html">History</a></li>
</ul>

This post has been edited by Christian J: Aug 17 2012, 01:58 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Aug 18 2012, 02:04 AM
Post #10


WDG Member
********

Group: Root Admin
Posts: 8,011
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE
Define "current" as the state you want the active link to look like:
That's one way to do it. The way that pandy was suggesting wouldn't be that different, for example:
CODE
<body id="pagehome">
<!-- ... -->
<ul>
<li id="linkhome">Home</li>
<li id="linkservices"><a href="services.html">Services</a></li>
<li id="linkevents"><a href="events.html">Events</a></li>
<li id="linkphotos"><a href="photos.html">Photos</a></li>
<li id="linkhistory"><a href="history.html">History</a></li>
</ul>
<!-- ... -->
</body>
Then, instead of having your CSS select the "current" class, it selects the "linkhome" id inside the "pagehome" id, the "linkservices" id inside the "pageservices" id, etc.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 17th September 2014 - 10:37 PM