How can this be done?
I know how to do the basic active state without dropdowns, but is there a way to do this with submenus? If so, how so? I followed the tutorial here , but it does not have sub-menu dropdowns.
Thanks!
Also here is the site I am trying to implement this on… (still under construction obviously)
Hi, it would be the same logic for hover
ul#nav li li a:active{}
Not quite sure if I’m missing smoething or you just didn’t think of doing this :). You already made the selector
Exactly as you have already done, but do not use the “active” pseudo class. 
The “active” state would be during the mouse down only. It is the body ID that applies the “active” rule when the current page is loaded.
(In addition; keeping the color and setting a default mouse cursor, maybe avoids that the user reloads the current page by mistake.)
#home #nav-home a,
#about #nav-about a,
#services #nav-services a,
#green #nav-green a,
#ftp #nav-ftp a,
#contact #nav-contact a{
background-color: #b61424;
color: #fff;
cursor: default;
}
Sorry maybe I am using the wrong terminology…
I want something similar to this website http://www.456bereastreet.com/lab/
How when you are on a certain page, the button for the page you are on is different.
I tried changing the code to what you suggested but its still not working?
Thanks!
I should also add, I also need functionality for a dropdown under the main menu items…
Same code just apply it the normal state of the anchor.
#home #nav-home a,
#about #nav-about a,
#services #nav-services a,
#green #nav-green a,
#ftp #nav-ftp a,
#contact #nav-contact a {
background-color: #b61424;
color: #fff;
cursor: default;
}
Make sure each body tag has the correct id (as shown above) in the relevant page (i.e. each page has a different id according to the currently selected menu item).
The link in your first post isn’t updated yet.
On that page, if I use FF WebDev to apply the code snippet to your css; this is the only change you need to do.
/* LISTS**************************************************************
*********************************************************************/
ul
{
list-style-image:url("/images/bullet.png");
list-style-type:square;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #333333;
margin-left:30px;
margin-right:20px;
margin-bottom:15px;
}
ul li{
margin-bottom:5px;
}
[COLOR="Red"]#home #nav-home a,
#about #nav-about a,
#services #nav-services a,
#green #nav-green a,
#ftp #nav-ftp a,
#contact #nav-contact a{
background-color: #b61424;
color: #fff;
cursor: default;
}[/COLOR]
/* STRUCTURE *********************************************************
*********************************************************************/
The index page ID you have set already:
<body id="home">
But I’m not sure what function you need for the dropdown? It seems to work.
perfect… thanks so much…
the functionality I am looking for is then someone clicks about > history, to have the “about” button to be in the active state. But I guess I am just make all my sub pages under about have <body id=“about”>
Like this?
I went back again with FF WebDevTool and tried this code to achive the current page to mark the sub-link too. I needed to change the css to use classes for the main-links and ids for the sub-links due to specificity. Also strengthened the general sub-link style. (Also only the actual main or sub -current page gets the default cursor on its link.)
/* NAVIGATION ********************************************************
*********************************************************************/
ul#nav {
z-index: 50;
margin: 0 0 15px 0;
padding: 0;
list-style: none;
position: relative;
width: 880px;
height: 39px;
line-height: 39px;
clear: both;
background: url(../images/menubar.png) no-repeat;
padding-left: 2px
}
ul#nav ul {
padding: 0;
margin: 0;
list-style: none;
background: #FFF;
line-height: 20px;
}
ul#nav li {
float: left;
display: block;
padding: 0;
}
ul#nav li a {
padding: 0 16px;
display: block;
font: bold 12px/39px Arial, Helvetica, sans-serif;
text-decoration: none;
color: #ffffff;
background: url(../images/menubar.png) no-repeat right;
}
ul#nav li a:hover {
color: #b61424;
}
ul#nav li ul {
position: absolute;
width: 185px;
left: -999em;
background-color: #000000
}
ul#nav li li {
margin: 0;
padding: 0;
float: left;
}
[COLOR="Red"].navcontainer [/COLOR]ul#nav li li a {
background: #000 none;
cursor: pointer;
padding: 6px;
border-bottom: 1px solid #d2d2d2;
width: 173px;
display: block;
font-weight: normal;
color: #ffffff;
font: normal 11px "Lucida Sans", Arial, Helvetica;
font: normal 11px "Lucida Sans", Arial, Helvetica;
text-decoration: none;
}
[COLOR="Red"].navcontainer [/COLOR]ul#nav li li a:hover {
color: #faeb00;
background-color: #262626;
}
ul#nav li:hover ul {
left: auto;
}
ul#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
[COLOR="Red"]
/* CURRENT PAGES */
.home ul li#nav-home a,
.about ul li#nav-about a,
.services ul li#nav-services a,
.green ul li#nav-green a,
.ftp ul li#nav-ftp a,
.contact ul li#nav-contact a{
background-color: #b61424;
color: #fff;
}
.home ul li#nav-home a,
.green ul li#nav-green a,
.ftp ul li#nav-ftp a,
.contact ul li#nav-contact a{
cursor: default;
}
#nav-about #nav-history a,
#nav-about #nav-awards a,
#nav-about #nav-testimonials a{
background-color: #333;
color: #fff;
cursor: default;
}[/COLOR]
/* IMAGES*************************************************************
*********************************************************************/
Change the different body names to class for targeting the main-links:
<body class="home">
<body class="about">
And add new IDs for the sub-links:
<li id="nav-about"><a id="about" href="introduction.htm"><span>About</span></a>
<ul>
<li id="nav-history"><a href="introduction.htm"><span>History</span></a></li>
<li id="nav-awards "><a href="introduction.htm"><span>Awards</span></a></li>
<li id="nav-testimonials "><a href="introduction.htm"><span>Testimonials</span></a></li>
</ul>
</li>
you sir have gone above and beyond
thank you SO much!!!
Erik J thanks again for your help.
Two little problems I am having.
For some reason “History” is grayed out in my menu regardless of what page I am on?
i tried doing the same structure for the dropdown after “services”, but the list is screwed up for some reason? Any idea why?
Also please note, Only actual html pages on the server right now are index.htm, about.htm, and awards.htm.
hmm ok figured out #2… still having problems with #1 though… not sure why part of the menu is grayed out and part is not
Hi, in your HTMl when you are defining classes the history one is the onlly one where you don’t have a space after,
aka class=“nav-history” is what you have for history
class="nav-awards " is what you have for the awards
Notice the space? Remoe it to grey it out.
Awesome thanks! Just curious why that would make a difference one way or another? (It worked by the way)
On a side note this is the best forum by far out of all the ones I post on… I always get quality answers.
[QUOTE=noslenwerd;]hmm ok figured out #2… still having problems with #1 though… not sure why part of the menu is grayed out and part is not[/QUOTE]As Ryan pointed out you had typos in the html.
I went through the code I posted and found I had erroneous selectors. I hadn’t thought it through the whole way and used the lis to target the links (the usual way in case the lis need style later).
To work around the specificity difficulties to handle inheriting here I suggest target the links directly. I moved the IDs from the LIs to the As and re-combinated the selectors for current page.
<div class="navcontainer">
<ul id="nav">
<li><a id="nav-home" href="/dev/pgc/index.htm"><span>Home</span></a></li>
<li><a id="nav-about" href="/dev/pgc/about.htm"><span>About</span></a>
<ul>
<li><a id="nav-history" href="/dev/pgc/history.htm"><span>History</span></a></li>
<li><a id="nav-awards" href="/dev/pgc/awards.htm"><span>Awards</span></a></li>
<li><a id="nav-testimonials" href="/dev/pgc/testimonials.htm"><span>Testimonials</span></a></li>
</ul>
</li>
<li><a id="nav-services" id="services" href="/dev/pgc/services.htm"><span>Services</span></a>
<ul>
<li><a id="nav-print" href="/dev/pgc/print.htm"><span>Print</span></a></li>
<li><a id="nav-design" href="/dev/pgc/design.htm"><span>Design</span></a></li>
<li><a id="nav-mail" href="/dev/pgc/mail.htm"><span>Direct Mail</span></a></li>
<li><a id="nav-fulfillment" href="/dev/pgc/fulfillment.htm"><span>Fulfillment</span></a></li>
<li><a id="nav-quote" href="/dev/pgc/quote.htm"><span>Request a Quote</span></a></li>
</ul>
</li>
<li><a id="nav-green" href="/dev/pgc/green.htm"><span>Green</span></a></li>
<li><a id="nav-ftp" href="/dev/pgc/ftp.htm"><span>FTP</span></a></li>
<li><a id="nav-contact" href="/dev/pgc/contact.htm"><span>Contact</span></a></li>
</ul>
</div>
Here is your navigation code. I cleaned the selectors to make specificity issues easier. Then rearranged the current selectors combinations to match the html, this time tested locally.
/* LISTS**************************************************************
*********************************************************************/
ul
{
list-style-image:url(http://www.vismarkgroup.com/dev/pgc/images/bullet.png);
list-style-type:square;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #333333;
margin-left:30px;
margin-right:20px;
margin-bottom:15px;
}
ul li{
margin-bottom:5px;
}
/* NAVIGATION ********************************************************
*********************************************************************/
.navcontainer {
background: url(../images/lcbg.jpg) no-repeat bottom left;
}
#nav {
z-index: 50;
margin: 0 0 15px 0;
padding: 0;
list-style: none;
position: relative;
width: 880px;
height: 53px;
line-height: 53px;
clear: both;
}
#nav ul {
padding: 0;
margin: 0;
list-style: none;
background: #FFF;
line-height: 20px;
}
#nav li ul {
position: absolute;
width: 185px;
top: 43px;
left: 0;
margin-left: -999em;
background-color: #000000
}
#nav li:hover ul,
#nav li.sfhover ul {
margin-left: 0;
}
#nav li {
position: relative;
float: left;
display: block;
padding: 0;
}
#nav li li {
margin: 0;
padding: 0;
float: left;
}
#nav a {
padding: 0 20px;
display: block;
font: bold 14px/43px lucida grande, Helvetica, sans-serif;
text-decoration: none;
color: #ffffff;
}
#nav a:hover {
color: #b61424;
background: url(../images/hoverbg.jpg) 0 0 repeat-x;
}
.navcontainer #nav li li a {
background: #000 none;
cursor: pointer;
padding: 6px;
border-bottom: 1px solid #d2d2d2;
width: 173px;
display: block;
font-weight: normal;
color: #ffffff;
font: normal 12px "Lucida Sans", Arial, Helvetica;
text-decoration: none;
}
#nav li li a:hover {
color: #faeb00;
background: #262626;
}
/* BODY-CLASS FOR MAIN-LINK WITH CURRENT SUB-LINK */
.about #nav-about,
.services #nav-services {
background: #b61424 url(../images/menubg.jpg) 0 0 repeat-x;
color: #fff;
}
.navcontainer #nav a:hover {
background: url(../images/hoverbg.jpg) 0 0 repeat-x; /* restore the hover bg */
}
.navcontainer #nav ul a:hover {
background-image: none; /* reset sublinks */
}
/* BODY-ID FOR CURRENT MAIN-LINK */
#home #nav-home,
#about #nav-about,
#services #nav-services,
#green #nav-green,
#ftp #nav-ftp,
#contact #nav-contact {
background: #b61424 url(../images/menubg.jpg) 0 0 repeat-x;
color: #fff;
cursor: default;
}
/* BODY-ID FOR CURRENT SUB-LINK */
#print #nav-print,
#design #nav-design,
#mail #nav-mail,
#fulfillment #nav-fulfillment,
#quote #nav-quote,
#history #nav-history,
#awards #nav-awards,
#testimomnials #nav-testimonials {
background-color: #333;
color: #fff;
cursor: default;
}
Now use ID-names on body for current main-link or sub-link. For current sub-links add class-name to mark what main-item has the current sub-link.
<body id="home">
<body id="about">
<body id="history" class="about">
<body id="awards" class="about">
<body id="testimonials" class="about">
Awesome… once again thank you guys so much…
I am learning a TON just by searching through both of your posts and lookin at some of your replies…
thank you thank you thank you