PDA

View Full Version : return menu item target URL in AnyLink CSS Menu v2.3



Carpintonto
04-11-2015, 08:06 PM
AnyLink CSS Menu v2.3
http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm

The script works great - I'd just like to get more out of it.

I have AnyLink CSS set up to navigate the page it is on (http://roselakeelkranch.net/distributors.html).

What I would like to do is apply style to the target of the menu item; so when I click on a menu item,
the target will stand out from the rest of the page.

The closest I've managed to get to even finding where I might be able to grab the target URL
is from a console.log(menu); instance below line #259 in anylinkcssmenu.js

// CLICK event for anchor, dropmenu

I then found it at six places in the console results
ownerDocument: documentURL: "http://rler.net/div-stributors.html#NE"
It's there, I just don't know how to get it

jscheuer1
04-12-2015, 12:49 AM
Add the highlighted code in the head of the page as shown:



<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrolly.min.js"></script>
<script src="js/jquery.scrollzer.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>

<script type="text/javascript">
$(document).click(function(){
$('.container').find('*').removeClass('navigated');
setTimeout(function(){
$(location.hash).addClass('navigated');
}, 250);
});
</script>

<link rel="stylesheet" type="text/css" href="css/anylinkcssmenu.css" />
<script type="text/javascript" src="js/anylinkcssmenu.js">

/***********************************************
* AnyLink CSS Menu script v2.0- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/

</script>

Now, each time you navigate via the anylink menu to any of the items on the page, they will have the class 'navigated'. Also, any previous item in the container div will have that class removed if it had it.

So all you need to do is add something like so to the stylesheet:


.navigated {
background-color: white;
}

Or whatever rule(s) you want in there for highlighting the .navigated class.

Carpintonto
04-12-2015, 01:19 AM
thank you John!

works like a charm :D