PDA

View Full Version : Bullet List Accordian Menu-Active State



MayDay
07-09-2008, 11:06 PM
1) Script Title: Bullet List Accordian Menu

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex17/ddaccordionmenu-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
07-10-2008, 12:05 AM
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
07-11-2008, 06:56 PM
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
07-11-2008, 07:04 PM
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
07-11-2008, 07:08 PM
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
07-11-2008, 09:38 PM
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
07-11-2008, 09:48 PM
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 (http://us.php.net/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
07-11-2008, 10:33 PM
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
07-11-2008, 11:15 PM
Can't you just use the same strategy that you did on the SD for the accordion menu?

MayDay
07-11-2008, 11:22 PM
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?CategoryCode=Standard_Cookware
When you click on a link on the left nav, I want it to change to white when you go to that page.

MayDay
07-11-2008, 11:40 PM
What about using Project Seven's uberlink.js in combination?
http://www.projectseven.com/tutorials/css/uberlinks/index.htm