CSS question for NAV_LIST and listActive class - how to ?

lburgess17 · Post by **lburgess17** » Fri 24. Feb 2006, 13:33

I am using NAV_LIST rt and trying to style the active state of my menu, with no success. I've tried adding a class called .listActive but this does not seem to make any difference. In my template, I used: <div id="navcontainer">{NAV_LIST:4}</div>

The output looks like this:
<div id="left"><div id="navcontainer">
<ul>
<li class="listActive"><a href="index.php?swdev">Software Application Development</a></li>
<li><a href="index.php?webdev">Web Design & Development</a></li>
<li><a href="index.php?whosting">Managed Web Hosting</a></li>
<li><a href="index.php?itservices">IT Consulting Services</a></li>
<li><a href="index.php?quote">Request a Quote</a></li>
</ul></div>

how to I get this to look highlighted? Basically, I want the active state to look exactly like the menu looks when it is being hovered over. See the URL: http://64.128.94.82/wcms/index.php?services

any help woudl be greatly appreciated. I have been pouring through examples in the forum for 2 days now with no real success. Thanks.
-lburgess17[/url]

DeXXus · Post by **DeXXus** » Fri 24. Feb 2006, 15:25

Are you sure you have the correct StartID there?

0 = top level (Home)

{NAV_LIST} - starting at level 0, no class Name, active <li class="listActive">
{NAV_LIST:StartID} - starting at level StartID, active <li class="listActive">
{NAV_LIST:StartID:ClassName} -> <ul class="ClassNameLevelID">, active <li class="ClassNameLevelIDActive">

http://www.phpwcms.de/forum/viewtopic.php?p=33500#33500

lburgess17 · Post by **lburgess17** » Fri 24. Feb 2006, 16:43

ok. I don't think I'm using the right level. My site structure is as follows:

Home (Level0)

- Services
----- Programming(Service Sub-Item 1)
----- Web Design (Service Sub-Item 2)
----- Web Hosting (Service Sub-Item 3)
------------ Linux Plan (sub-sub-level of Item 3)
------------ Windows Plan (sub-sub-level of Item 3)
----- IT Consulting(Service item 4)
- About Company
- Contact

Basically, I am trying to get a CSS list based menu on the left side of my template for the Services sub-items only. When someone clicks on my top navigation link that says "services" they will be brought to the services page which will have a left menu with the services offerings which in this case would be Programming, Web Design, HOsting, Consulting. Then, if there are sub-sublevels off of these they would only be displayed once you've clicked on the level above it... as in the case of Web Hosting. Once clicked, the menu would "open up" to show the 2 offerings under web hosting.

I've tried various RT's and NAVLIST seems to be the answer, but I cannot seem to figure out how to set the style for the ACTIVE LINK. I want the active link to look like it is selected which in my case, would be the same style as when a user hovers over the item.

Maybe there is an easier? way to accomplish this. I've tried NAV_ANY_LEVEL to show only my services menu, but when you click on a sub-item, it is not displayed in the menu. Any help would be greatly appreciated. If someone knows of a different RT to use which woudl accomplish this, I woudl be most appreciative.

-lburgess17

pieterbeulens · Post by **pieterbeulens** » Fri 24. Feb 2006, 17:20

I don't know it this is all that you need, but with the code in this forum thread, you can separate the first level of navigation from the second and put that second level somewhere else on your page. I used it on http://www.menssana.nu for the submenus that appear on the left hand side. Hope it helps.

pieterbeulens · Post by **pieterbeulens** » Fri 24. Feb 2006, 17:20

I don't know it this is all that you need, but with the code in this forum thread, you can separate the first level of navigation from the second and put that second level somewhere else on your page. I used it on http://www.menssana.nu for the submenus that appear on the left hand side. Hope it helps.
http://www.phpwcms.de/forum/viewtopic.php?t=6558 is the topic.

lburgess17 · Post by **lburgess17** » Fri 24. Feb 2006, 17:58

I tried that code supplied by pico:
[PHP]
$id = $GLOBALS['content']['cat_id'];
$parent_id=$GLOBALS['content']['struct'][$id]['acat_struct'];
While ($parent_id<>0){
$id=$parent_id;
$parent_id=$GLOBALS['content']['struct'][$id]['acat_struct'];
}

if ($id > 0) {
echo '{NAV_TABLE_COLUMN:'.$id.'}';
}
[/PHP]

but I changed it from NAV_TABLE_COLUMN to NAV_LIST (so I can have a list-based result styled with my CSS) and I do get the desired level of menu but the only thing that I cannot seem to style is the ACTIVE state. The result when I view source shows:
<div id="navcontainer"><ul>
<li class="listActive"><a href="index.php?swdev">Software Application Development</a></li><li><a href="index.php?webdev">Web Design & Development</a></li>
<li><a href="index.php?whosting">Managed Web Hosting</a></li>
<li><a href="index.php?itservices">IT Consulting Services</a></li>
<li><a href="index.php?quote">Request a Quote</a></li>
</ul></div>

But, I can't seem to apply the style correctly in my CSS to this active state. Does anyone know what I'm doing wrong?

url: http://64.128.94.82/wcms/index.php?webdev

The left nav which uses pico's PHP example is the second menu in the left column.
THANKS to everyone who can help me on this!

pieterbeulens · Post by **pieterbeulens** » Fri 24. Feb 2006, 18:09

Have you tried using

#navcontainer li.listActive {
SOME STYLE HERE
}

Or how have you been trying to style your active links?

lburgess17 · Post by **lburgess17** » Fri 24. Feb 2006, 20:55

this is the css styling for my menu: (it is based on examples from the listamatic examples from http://css.maxdesign.com.au/listamatic/. I tried adding the .listActive as you said, but it doesn't seem to be making any difference. If anyone can help me with this code, I would greatly appreciate it. i just can't see what's wrong. I think i've been looking at it too long.

#navcontainer{
font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
background-color: ;
}

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li { margin: 0; border-bottom: 1px solid #e3e4c0; }

#navcontainer a
{
display: block;
padding: 5px 5px;
width: 145px;
color: #68692d;
background-color: #d1d296;
border-left: 5px solid #a6a848;
border-right: 5px solid #c8c981;
text-decoration: none;
}
#navcontainer a:hover, #navcontainer ul ul a:hover
{
color: #333;
background-color: #b6b858;
border-right: 5px solid #a6a848;
border-left: 5px solid #c8c981;
text-decoration: none;
}
#navcontainer li li {margin: 0; border-top: 1px solid #e3e4c0; border-bottom: 0;}
#navcontainer ul ul li { }

#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 20px;
width: 130px;
color: #68692d;
background-color: #dadbab;
border-left: 5px solid #a6a848;
border-right: 5px solid #c8c981;
text-decoration: none;
}
#navcontainer li.listActive, #navcontainer li a.listActive, #navcontainer li a:active.listActive {
background-color: yellow;
}

thank you.

pieterbeulens · Post by **pieterbeulens** » Fri 24. Feb 2006, 21:21

Use this code, it works when I put it in your existing CSS:

#navcontainer .listActive a {
background-color: yellow;
}

And of course for the pseudo elements you use

#navcontainer .listActive a:active {
SOME STYLE HERE
}

etcetera.

Good luck.

lburgess17 · Post by **lburgess17** » Fri 24. Feb 2006, 21:35

a million thanks, pieterbeulens for the help with this css.

here's a question, though. is there a way to change the listActive to be on the <a> tag rather than the <li>?

Because when there is a sub-level (nested list) beneath the active li they will inherit the "active" state as well. (see here: http://64.128.94.82/wcms/index.php?webdev)

OR, maybe there is a better way to approach this. Ultimately, I'm trying to keep my css as neat and minimal as possible.

-lburgess17

pieterbeulens · Post by **pieterbeulens** » Fri 24. Feb 2006, 21:44

You can use this:

#navcontainer .listActive ul li a {
background-color: #FFFFFF;
}

to restyle the submenu underneath your current level. I just used white to test it, but change it to anything you want.

lburgess17 · Post by **lburgess17** » Fri 24. Feb 2006, 22:02

thank you so much! I appreciate everyone's help on this. it looks great now and functions perfectly.

pieterbeulens · Post by **pieterbeulens** » Fri 24. Feb 2006, 22:06

No prob. Like your design by the way, very not CMS like. Hooray for CSS.