Bullet List Accordian Menu-Active State

[MayDay]

1) Script Title: Bullet List Accordian Menu

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...enu-bullet.htm

3) Describe problem: How can I get the link in the <li> to be a different color when that page is loaded or current?

I have added to the css file:
.arrowlistmenu ul li a:active{
color:#ffffff;
}
This does not work in FF or IE7.

[rangana]

The current display is already set in the CSS of Accordion:

.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

If you want to set a different color, then change the highlighted.

Hope that makes sense.

[MayDay]

Thank you for your reply. I see how to style the <li> so let me explain further.
I have code like this:
<div class="arrowlistmenu">
<h3 class="menuheader expandable">Heading</h3>
<ul class="categoryitems">
<li><a href="link1">Link 1</a></li>
<li><a href="link2">Link 2</a></li>
<li><a href="link3">Link 3</a></li>
</ul></div>

When I click and go to Link 1, I want Link 1 to have a different color than the other links, reflecting which page you are on.

I have added to the css file:
.arrowlistmenu .categoryitems ul li a:active{
color:#ffffff;
}
This does not work in FF or IE7.

How can I highlight the link that reflects the page I have clicked to?

[boogyman]

the pseudo selector [icode]:active[/code] does not mean the current page, it means the time during which this link is in an enabled or active state... so when you hold down a left click on a link and it changes color from "blue" to "red" well that "red" is the active state of the selector.

in order to change an element to what I believe you are trying to do meaning this is the current script/page I am visiting, you would need to apply a new class to that link and style it accordingly.

<div class="arrowlistmenu">
     <p class="categoryitems">
          <ul>
               <li><a href="">LINK</a></li>
               <li><a href="">LINK</a></li>
               <li><a href="">LINK</a></li>
               <li><a href="">LINK</a></li>
               <li><a href="">LINK</a></li>
          </ul>
     </p>
</div>

then for the active "current" state

<div class="arrowlistmenu">
     <p class="categoryitems">
          <ul>
               <li class="current"><a href="">LINK</a></li>
               <li><a href="">LINK</a></li>
               <li><a href="">LINK</a></li>
               <li><a href="">LINK</a></li>
               <li><a href="">LINK</a></li>
          </ul>
     </p>
</div>

[MayDay]

This will not work because the menu is an include file. Is there not another way? I have seen this on other scripts.

Cheers to your help!

[ddadmin]

This really is an issue on its own, rather than related to a particular script actually. How to match up the current page's URL with the corresponding link inside the menu really depends on how your site is created and what's at your disposal for doing so. For example, if your site is dynamically generated, you'd use some server side coding to do the match up and add class="current" to the LI in question. There isn't a quick/ reliable way to do the match up using JavaScript, if that's what you're asking.

[Nile]

Adding on to ddadmins post. If you'd like to take from another file, php could do it. But it wouldn't be that easy. There's a function in PHP called file_get_contents. What'd you have to do is make a function in php, that will get a line from another file, find a matching word, so that you could put something after, and in this case you would want it to find: <li on the line that you've specified. With that you'd have to insert right after that class="current".
I could do this for you. But if your up for the challenge(or not), just tell me.

[MayDay]

Thanks for your expertise! As a note of interest, I have on other sites used the Slash Dot Menu: http://dynamicdrive.com/dynamicindex1/slashdot.htm and this has built into the optional methods to mark the current link. Works great.

This seems like a basic requirement for these types of scripts. I may have to switch my current site to the SD menu. I am sorry to do this as I have several other uses for the great jquery library and I liked the additional features of the accordion menu.

Cheers to you all.

[Nile]

Can't you just use the same strategy that you did on the SD for the accordion menu?

[MayDay]

The menu is an include file in a dynamic site. The SD Menu has the option built into the methods to highlight the current page. The accordion menu seems powerful but nobody has the answer. Here is the test page: http://lloydpans.com/Cookware.aspx?C...ndard_Cookware
When you click on a link on the left nav, I want it to change to white when you go to that page.