How to change look of 'active' menu item

**jodidesign2** · Aug 5, 2011 05:53

Hello,

I am trying to change the look of the 'active' submenu item... Meaning, when you're on a certain page - the corresponding submenu item will look different (i.e. bold, different color, etc.)...

URL is --> IDC's Fundamentals for Newer Directors

JS code I'm using -->

$("*").find("a[href='"+window.location.href+"']").each(function(){
$(this).addClass("submenuactive")
})

Any help/advice would be appreciated! Thank you!

Jodi

**ralph.m** · Aug 5, 2011 06:52

Hi Jodi. Welcome to SitePoint.

You can do that with CSS alone if you want. For example, each page relating to a sidebar link can have a special class on the <body> element, such as

Code:

<body class="oversight">

Then in your CSS, you have

Code:

.oversight .dropTarget4 a {}

and have the special color for that link inside the brackets above. So, when you are on a page with that body class, it will target that link and color it.

**jodidesign2** · Aug 5, 2011 06:55

Unfortunately, the menu is part of a grid within Vignette so it would take me forever to add special code to each and every page... Right now, files are pulled from several places to build the page so I'd like to get something that I can just add once and be done... Know what I mean?

**ralph.m** · Aug 5, 2011 07:08

Often, a CMS will let you insert a special class to a link based on the page you are on. for example, in the CMS I use, I have a rule that if the URL includes, say, "oversight", then that particular link gets a class of "current". Don't know if you can do thes with Vignette, though, as I'm not familiar with it.

Using JavaScript for this is not ideal, but if that's your only option, someone else will have to reply, as it's not my area, I'm afraid.

**jodidesign2** · Aug 5, 2011 07:11

I'm not that familiar with Vignette either and we use it for several sites, so I'm hesitant about changing the 'active' class... There's gotta be something...

**ralph.m** · Aug 5, 2011 07:36

One thing I notice:

The URLs in your links look like this:

Code:

href="/oversight/oversight_portfolio"

but

Code:

href='"+window.location.href+"'

is probably looking for the full URL, with the http:// bit etc. Can you turn the URLs into absolute ones in Vignette?

**jodidesign2** · Aug 5, 2011 07:39

Meaning I should add "http://fundamentals.idc.org/" to each link and that might work?

**ralph.m** · Aug 5, 2011 07:43

Originally Posted by jodidesign2

Meaning I should add "http://fundamentals.idc.org/" to each link and that might work?

It's worth a try, but I can't promise it will work. That's my best guess as to why the jQuery isn't working, though.

**jodidesign2** · Aug 5, 2011 07:50

It was worth a shot, but that did not fix the problem... I appreciate your help regardless!

**ralph.m** · Aug 5, 2011 08:02

Actually, now that I think of it, that jQuery code can't work as is, because the jQuery loads before the page, so at the time it loads, there is no <a> element yet. So you could either wrap that jQuery code in the $(document).ready() code, or place your jQuery links as they are but at the bottom of the page, just before the closing </body> tag.

**jodidesign2** · Aug 5, 2011 08:10

i've added to the $document).ready() and it's still not working... am i missing some other code?

**ralph.m** · Aug 5, 2011 08:17

Looks like it's not quite in the right place. Try changing

Code:

});
$("*").find("a[href='"+window.location.href+"']").each(function(){
$(this).addClass("submenuactive")
//add your own logic here if needed
})

to

Code:

$("*").find("a[href='"+window.location.href+"']").each(function(){
$(this).addClass("submenuactive")
//add your own logic here if needed
});
})

I'm experimenting around a bit, but at the moment, you've moved the code into a new file, but it doesn't look like it's inside the document ready code, but outside it.

EDIT: Actually, you maybe just left out the final

});

in your code, so rather than move anything, just add and extra

Code:

$("*").find("a[href='"+window.location.href+"']").each(function(){
$(this).addClass("submenuactive")
//add your own logic here if needed
});
})

and don't actually move anything. (As I say, this isn't my area.)

**jodidesign2** · Aug 5, 2011 08:21

that's not right either and it's messed up the menu so now everything is showing...

**ralph.m** · Aug 5, 2011 08:31

Ah, OK, so that was wrong. Perhaps try my first suggestion then. Try inserting the code here:

Code:

$(function(){
       	$("a[id^='dropATarget']").click(function(){
			$('a').not($(this)).next().slideUp();
       		$(this).next().slideToggle("normal");
       	});

$("*").find("a[href='"+window.location.href+"']").each(function(){
$(this).addClass("submenuactive")
//add your own logic here if needed
});

       });

**jodidesign2** · Aug 5, 2011 08:34

OMG! You did it! I love you!

THANK YOU SOOOOOO MUCH for saving my ass...

Jodi

**ralph.m** · Aug 5, 2011 08:37

Well I'll be darned! Just goes to show that sometimes, the blind can lead the blind somewhere useful.

Glad we got there in the end.

**jodidesign2** · Aug 5, 2011 08:38

Yes, indeed... That's why I like being a designer and not a programmer (no offense)... This stuff scares me...

Have an awesome weekend!

User Tag List

Thread: How to change look of 'active' menu item

Thread Tools

Display

How to change look of 'active' menu item

Bookmarks

Bookmarks

Posting Permissions