highlighting current section in nav

[jrthor2]

I am trying to get the left nave "About Us" link to have a different background when you are in that section of the site. I can't seem to get the background to change though. Could someone help me?

http://74.220.207.192/~zluthorg/about_us/

Thanks!

[WebJoel]

I don't understand what you mean by "different background when you are in it", -it does exactly what the other links do. If you want it to do something different from what it does currently, you will need to add another 'class' specifically to it:

<div class="nav1">
<ul>
<li><a href="/" title="Home">Home</a></li>
<li><a href="/about_us/" class="special" title="About">About Us</a></li>
<li><a href="/contact_us/" title="Contact Us">Contact Us</a></li>
</ul>

</div>
CSS:a.special :hover {color:black; background:red url(pic.jpg) repeat}Something like this... (changes foreground ("text") color to BLACK, changes background-color to RED, uses image "pic.jpg" and "repeats" in both x,y axes, if the image is smaller than the actual anchor area such as a 10px X 10px seamlessly-tiling mini-image).

[jrthor2]

if you look at the code, the "About Us" has a class of sectionActive, but that is not getting applied. The background for that link should be gray, but it is blue.

[WebJoel]

if you look at the code, the "About Us" has a class of sectionActive, but that is not getting applied. The background for that link should be gray, but it is blue. Is this supposed to indicate the "current page'?
You'll have to post the relevant code from the css. I suspect that the rule for is not written correctly. :o

[jrthor2]

Yes, this is suppossed to indicate the "current page". Here my css for the menu

.main-navigation .suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 199px; /* Width of Menu Items */
border-bottom: 1px solid rgb(200,200,200);
}

.suckerdiv ul li{
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color:rgb(70,122,167);
font-weight:bold;
font-size:120%;
text-decoration: none;
background: #d3dde6;
padding: 1px 5px;
border: 1px solid rgb(200,200,200);
min-height:2.0em /*Non-IE6*/;
height:auto !important;
height:2.0em /*IE6*/;
line-height:2.0em;
padding:0px 10px 0px 20px;
}

.suckerdiv ul li a:visited{
color:rgb(70,122,167);
font-weight:bold;
font-size:120%;
min-height:2.0em /*Non-IE6*/;
height:auto !important;
height:2.0em /*IE6*/;
line-height:2.0em;
padding:0px 10px 0px 20px;
}

.suckerdiv ul li a:hover{
background-color: #e1e1e1;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }

.main-navigation .suckerdiv #leftnav ul li.sectionActive {
background-color: #e1e1e1;
}

Thanks

[Centauri]

The background needs to be applied to the <a>, not the <li>. Also, you are specifying a <ul> that is contaned within an element called "#leftnav"..suckerdiv ul li.sectionActive a {
background-color: #e1e1e1;
}

[jrthor2]

using your code above, that didn't work either. I changed my navigation code to put the class on tha <a> tag as well.

[jrthor2]

can anyone help me get this working?

Thanks.

[matt.ritter]

I might be missing something but it appears to me your javascript file leftnav.js is giving your <ul> objects a different class.

Your source code is

<ul id="leftnav">
<li><a href="#">New to Zion</a></li>
<li><a href="/~zluthorg/about_us/" title="About Us" class="sectionActive">About Us</a>
<ul>

<li><a href="/~zluthorg/about_us/staff.php">Staff</a></li>
<li><a href="/~zluthorg/images/pdf/Zion_Brochure.pdf" title="Zion's Brochure" rel="external">Zion's Brochure</a></li>
<li><a href="#">Driving Directions</a></li>
</ul>
</li>
<li><a href="#">Publications</a>
<ul>

<li><a href="#">Newsletter</a>
<ul>
<li><a href="#">December 2007</a></li>
<li><a href="#">November 2007</a></li>
<li><a href="#">October 2007</a></li>
</ul>
</li>

<li><a href="#">Council Minutes</a>
<ul>
<li><a href="#">December 2007</a></li>
<li><a href="#">November 2007</a></li>
<li><a href="#">October 2007</a></li>
</ul>
</li>

</ul>
</li>
<li><a href="#">Photo albums</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Ministries &amp; Programs</a>

<ul>
<li><a href="#">Education</a>
<ul>
<li><a href="#">Preschool</a></li>
</ul>
</li>
<li><a href="#">Sub Item 1.2</a></li>

</ul>
</li>
<li><a href="#">Zion Youth Group</a></li>
</ul>


your generated code (after leftnav.js runs) is


<ul id="leftnav">
<li><a href="#">New to Zion</a></li>
<li><a href="/%7Ezluthorg/about_us/" title="About Us" class="subfolderstyle">About Us</a>
<ul style="left: 199px; visibility: visible; display: none;">
<li><a href="/%7Ezluthorg/about_us/staff.php">Staff</a></li>
<li><a target="_blank" href="/%7Ezluthorg/images/pdf/Zion_Brochure.pdf" title="Zion's Brochure" rel="external">Zion's Brochure</a></li>

<li><a href="#">Driving Directions</a></li>
</ul>
</li>
<li><a class="subfolderstyle" href="#">Publications</a>
<ul style="left: 199px; visibility: visible; display: none;">
<li><a class="subfolderstyle" href="#">Newsletter</a>
<ul style="left: 199px; visibility: visible; display: none;">

<li><a href="#">December 2007</a></li>
<li><a href="#">November 2007</a></li>
<li><a href="#">October 2007</a></li>
</ul>
</li>
<li><a class="subfolderstyle" href="#">Council Minutes</a>
<ul style="left: 199px; visibility: visible; display: none;">

<li><a href="#">December 2007</a></li>
<li><a href="#">November 2007</a></li>
<li><a href="#">October 2007</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="#">Photo albums</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Calendar</a></li>
<li><a class="subfolderstyle" href="#">Ministries &amp; Programs</a>
<ul style="left: 199px; visibility: visible; display: none;">
<li><a class="subfolderstyle" href="#">Education</a>

<ul style="left: 199px; visibility: visible; display: none;">
<li><a href="#">Preschool</a></li>
</ul>
</li>
<li><a href="#">Sub Item 1.2</a></li>
</ul>
</li>
<li><a href="#">Zion Youth Group</a></li>

</ul>

[jrthor2]

I'm not worried about the <ul>'s inside the <li>'s, as you can only see them when you mouseover the parent <li>. Can I get just the parent <li> to have the gray background?

[matt.ritter]

the <li>'s are inside a <ul> Every list object in the <ul id="leftnav"> is being "reclassed" by your leftnav.js file.

the only possible thing I can think of is to try giving the highlighted <a> tag an id of "sectionActive"

so change:
<a href="/~zluthorg/about_us/" title="About Us" class="sectionActive">About Us</a>

to
<a href="/~zluthorg/about_us/" title="About Us" id="sectionActive">About Us</a>

Then in your style sheet change
.suckerdiv ul li.sectionActive a {
background-color: #e1e1e1;
}

to
#sectionActrive {
background-color:#e1e1e1;
}

although that might break your flyout nav.

[jrthor2]

Also, I can't use the same id for each link I want to highlight like this, as this will break the xhtml validation rule of having the same id's.

[Centauri]

I changed my navigation code to put the class on tha <a> tag as well.
Well doing that has changed the required css........
.suckerdiv ul li a.sectionActive {
background-color: #e1e1e1;
}

However, as Matt pointed out above, the javascript is over-writing the <a> class names, so that all the top level <a>s class names are changed to "subfolderstyle", overwriting the "sectionActive" class you are trying to put there. Recommendation is to get rid of the javascript and use the normal suckerfish method of li:hover to display the sub menus.

[Centauri]

Alternately, put the "sectionActive" class back on the <li> and use the code I gave in post #6

[jrthor2]

I changed my code to use the original suckerfish menus, but I am not getting any sub mens to pop up now, and the section highlighting still isn't working.

[Centauri]

First, the sectionActive code doesn't work as you are selecting a <ul> within an element with an id of #nav, wheras #nav is the id of the <ul> :#nav li a.sectionActive {
background-color: #e1e1e1;
}
The popouts don't work as you are mixing the hiding methods - first you set the visibility to hidden, but trying to display them with left position without unhiding them. If you decide on one method (here I will use the negative offset method), and list things in the correct order it will work :
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width: 199px;
border-bottom: 1px solid rgb(200,200,200);
}

#nav li { /* all list items */
position : relative;
}

#nav li ul { /* second-level lists */
position : absolute;
width: 170px; /*sub menu width*/
top: 0;
left: -999em;
}

#nav li a {
display: block;
overflow: auto; /*force hasLayout in IE7 */
color:rgb(70,122,167);
font-weight:bold;
font-size:120%;
text-decoration: none;
background: #d3dde6;
padding: 1px 5px;
border: 1px solid rgb(200,200,200);
min-height:2.0em /*Non-IE6*/;
height:auto !important;
height:2.0em /*IE6*/;
line-height:2.0em;
padding:0px 10px 0px 20px;
}

#nav li a:hover {
background-color: #e1e1e1;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav ul li:hover ul, #nav li.sfhover ul {
left: 170px;
background-color: #e1e1e1;
}

#nav li:hover ul, #nav li.sfhover ul {
left: 199px;
background-color: #e1e1e1;
}
Note that using left: auto on an absolutely positioned element is not very reliable.

[jrthor2]

Cool, thanks. Now, just 1 issue remaining. No matter what page I'm on, the "About Us" menu is gray, not just when I am on that page.

[jrthor2]

I got it working, was a php problem with the highlighting. Thanks for all your help!!!

[jrthor2]

there seems to be in issue in IE7. If you rollover the "Publications" menu, the popup comes up, then go to the "About Us" link right above it, and the publications menu does not go away, andyou don't see all the items in the about us popup. This happens if you rollover the "Ministries & Programs" link, and then go up to publications, the ministries & programs popup stays there.

[jrthor2]

also, in IE6, there seems to be a gap in between the menu items that have popup elements, and in the popup, each element has extra space inbetwen the links. Can someone help?

thanks

[jrthor2]

can anyone help me with my left nav?

Thanks!!

[jrthor2]

anyone, please? I can't seem to get this menu working right.

[Centauri]

Sorry for delay - been away. Trust you had a good Christmas.

There are a few problems here, and some are due to adverse effects of some hacks, and the addition of other fixes to counteract these. The easiest way to ensure "HasLayout" is to define a width or height. As some menu items span more than one line, setting a height is not going to be suitable, but controlling the width of the <a> links is. To make the multiple line items look better, setting a smaller line height and top and bottom padding works better. To avoid gaps between <li>s in IE, floating them works quite well, and setting them to be 100% width also ensures HasLayout. Another problem you mentioned can be solved by defining the upper level hover before the lower level hovers in the css.

Try this: /*CSS2 Menu*/
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width: 199px;
border-bottom: 1px solid rgb(200,200,200);
}

#nav li { /* all list items */
float: left;
width: 100%;
position: relative;
}

#nav li ul { /* second-level lists */
position : absolute;
width: 170px; /*sub menu width*/
top: 0;
left: -999em;
}

#nav li a {
display: block;
color:rgb(70,122,167);
font-weight:bold;
font-size:120%;
text-decoration: none;
background: #d3dde6;
padding: 5px 10px 5px 20px;
border: 1px solid rgb(200,200,200);
line-height:1.3em;
padding:5px 10px 5px 20px;
width: 167px;
}
#nav ul a {
width: 138px;
}


#nav li a:hover {
background-color: #e1e1e1;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: 199px;
background-color: #e1e1e1;
}
#nav ul li:hover ul, #nav ul li.sfhover ul {
left: 170px;
background-color: #e1e1e1;
}
#nav li a.sectionActive {
background-color: #e1e1e1;
}
/*End Menu*/

Note the changes and additions within the red highlighted areas, and the order of declarations in the green highlighted area.
Also note the addition of the ul in the second level hover css.

[jrthor2]

Ok, now on IE6, if you have a popup that pops up over a form select box, the form select box stays visible through the popup. You can see this if you go to my contact us page, and then rollover the Publications menu, then the newsletters menu.

Thanks again!!

[jrthor2]

Can anyone help with this last part of my menu issues (hopefully)?

Thanks

[Centauri]

This is a problem with IE6 and not easy to do much about.An article dealing with this can be seen here (http://www.codeproject.com/KB/HTML/dropdown_div.aspx).

The easiest may be to re-order the form so the select box is out of the way.