Highlighting current page in the navigation, need help...
n6g9zty6 - May 9, 2008 - 22:12
Heya,
So I'm working on this site: http://www.spencerhill.us/arico-foods and although I know how to build a navigation that highlights the current page, I've never done it with Drupal... I was wondering if anyone has experience with this that could help me?
I'll just need the navigation to stay in it's hover state once selected I guess.
Do you already have...
...the navigation built? Are you just using the core navigation? Have you tried just writing the code into the css for the navigation selector?
Your speaking a little bit
Your speaking a little bit of Drupal jargon I'm not familiar with... :)
"Do you already have the navigation built?"
- I think the answer is yes. I inserted the Drupal PHP statement that calls the "Primary Navigation" and then I styled it with my external CSS. Then I went into Drupal and created the pages and associated them with new navigation links.
"Have you tried just writing the cod einto the CSS for the navigation selector?"
- What is the 'navigation selector'?
Thanks!
Spence
http://www.spencerhill.us
ignore this!
(my REAL post is farther down the page)
In an unordered list style
In an unordered list style menu, consider a variation of the following:
ul {list-style:none;display:inline;}
ul li {background:#000;color:#eee;padding:0;}
ul li a {display:block;padding:2px 5px;color:#fff;text-decoration:none;}
ul li a:hover {background:#888;text-decoration:none;}
ul li a:focus, ul li a.active {background:#000;color:#000;text-decoration:none;}
Once one ot the items has been clicked, the menu will stay shown with a
red background, with black text, against a black unordered list menu.
This, of course must be put into the CSS that comes with your theme. You
will also need to find the correct place, and adjust it to your needs.
--Charlie
I don't understand how that
I don't understand how that CSS would make a link stay in its hover state once selected...
Thanks!
Spence
http://www.spencerhill.us
That is because you don't
That is because you don't yet have a deep understanding of CSS. :)
The particular piece of CSS that makes that happen is:
ul li a:focus, ul li a.active {background:#000;color:#000;text-decoration:none;}
Take note of the :focus and .active pseudo classes. These reflect
the current state. Thus, it will show what is current/clicked.
Clearer now?
--Charlie
In theory it makes sense,
In theory it makes sense, but I've tried that in the past - and I tried it again after your first message copying your exact code and it still didn't work. Can you copy and paste some exact code so I can give it a shot?
It seems to me that this can't be accomplished by CSS alone, but require JS or PHP - being as CSS is style only - not function.
Thanks!
Spence
http://www.spencerhill.us
OK This is not quite as
OK This is not quite as simple as you'd like - sorry. :)
Here's the thing. The exact code depends upon which theme you have
chosen. I'm going to try and stay with you here. But I am also responding to a very complicated
issue (but much like yours) in another thread. So I have to balance all of this, and work too. I
hope you can understand. :)
That said, here's a working example from the Zen theme
NOTE this same principal will work in any theme. It always
requires CSS, and only CSS. :)
Here it is:
/*
* MENU STYLES
*/
div.menu
{
margin-top: 15px;
}
#primary
{
font-size: 85%;
line-height: normal;
padding: 0 0 1px 20px;
/* border-bottom: 4px solid #2763A5; */
}
#primary ul
{
padding: 0;
margin: 0;
list-style: none;
}
#primary ul.links li,
#secondary ul.links li
{
display: inline;
border-left: none;
margin: 0;
padding: 0;
}
#primary a:link,#primary a:visited
{
background: #6DA6E2 url(images/tabs.png) repeat-x;
color: #FFF;
font-weight: bold;
display: block;
float: left;
padding: 5px 14px 5px 14px;
margin: 0 1px 0 0;
border: solid #6191C5 1px;
border-width: 1px 1px 0 1px;
}
#primary a:link,#primary a:visited
{
background-position: 0% 0;
}
#primary a:hover
{
background-position: 0% -42px;
text-decoration: none;
}
#primary a.active
{
background-position: 0% -84px;
}
#secondary
{
padding-left: 20px;
/* background: #FFFAF0; */ /*#347FD2;*/
border-bottom: solid #aaa 4px;
}
#secondary ul
{
margin: 0;
padding: 0;
list-style: none;
}
#secondary li a:link,#secondary li a:visited
{
float: left;
display: block;
color: #287378;
font-size: 85%;
text-decoration: none;
padding: 0 5px 0 5px;
}
#secondary li a:hover
{
background:#287378;
color:#fff;
}
#secondary a.active
{
font-weight: bold;
}
/*
* LINK STYLES
*/
ul.links
{
text-align: left;
}
ul.links li
{
border-left: 1px solid #9cf;
}
Also note, the code above uses an image to indicate state - not color,
as in my original reply to you. It simply positions the image, thereby revealing
different areas of the image to show state - link, hover, active.
The part that interests you most is the active class ( ,active ). You can easily
modify this to use color rather that an image to reveal state.
Simply by removing the
background:url(...and replacing it with a colorvalue to suit your desired outcome.
I hope this helps.
--Charlie
try this in your home.css,
try this in your home.css, something like:
li.leaf .active
{background-color: #eee;
border-color: #ccc;
}
It's the active class within the leaf class, so you may need to specify that as shown above.
If you're using Firefox, get the "Web Developer" add on. It's amazing and can save you hours when trying to deal with all the different Drupal CSS files. Takes some getting used to, but is intuitively laid out and labelled. There's an "edit CSS" function that allows you to modify the CSS files onscreen and see the effect immediately. (You then have to go in to the real CSS file and make the change, but it makes figuring out WHAT needs to change so much easier) You can learn a whole lot about CSS by using the tool.