DDSmoothMenu: how to show SELECTED tab in different color

[wonfineday]

1) Script Title: Smooth Navigational Menu (v1.31)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem:
Is there a way to show the selected menu item in a different color once the user has landed on that page. I tried changing the code

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}

[ddadmin]

Styling a.selected won't work, since pertains to each menu header when the mouse is over it (or its sub menus). The question you're asking is really about how to determine which menu item matches up with the current page's URL, and output some CSS to style that menu item accordingly. It's certainly possible, though right now the script doesn't support any built in way to do this.

[wonfineday]

Thanks for clarifying that but is that not a major limitation... that's almost a pre-requisite for any menu system.

Do you recommend using a breadcrumb approach to getting around this? Is that how other folks getting around it?

Regards,

[ddadmin]

It's not really a limitation, since it simply leaves it up to you to implement the current tab based on the structure of your site and the URLs. This is how most JavaScript menus are actually.

As far as how to match up the current page's URL with the appropriate tab to select, it 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, then dynamically output the CSS that styles the corresponding menu item accordingly. Or you can try and use JavaScript to probe "location.pathname" and check it against the URLs of your main menu items. If there's a match, dynamically write ouput the CSS that styles the corresponding menu item using JavaScript.

[wonfineday]

umm.. can you post a code sample of how you would spit out CSS for the currently selected tab. (I am very comfortable with PHP, but not so much with CSS)

Thanks.
--

[wonfineday]

Anything??

[Johnathan]

You might want to change the actual HTML in your menu coding to add a "selected" class for each individual page. If you have only a few pages, this should be an easy workaround. Otherwise you might have to find a javascript that would detect the page and change / apply the class. I don't know where to find this type of script, but if you find one, please let me know too.....

[anderszvensson]

Hi,

I would also be interested in an example of how to get the current tab highlighted. The posts seem to suggest solutions, but for someone not too familiar with javascript it is certainly not clear how to go about doing this. Could someone please post a clear example of what you would need to do? I would be very grateful for this. Would the changes go in the ddsmoothmenu.css file? The ddsmoothmenu.js javascript file? Both? Or somewhere else (in the html e.g.)?

Regards,

Anders

[bjl]

sorry to bump an old thread, but i have been working on this for a while now, and just ran accross this thread in searching deeper for help.

I am trying to implement a way to highlight the current page in the top level of my menu. I am NOT worried about any submenu's, as my site is only about 4 pages, and all submenu's actually refer to tabs on one of the 4 pages. I tried to implement a custom fix, but I am not having any luck. Here is what I have so far, if anyone can point me in the direction or give me hints of what I might be missing with this.

here is what I have on my .html page
basically, I am just getting the name of the page (i.e. index.html) and checking to see if it matches the href attribute in my menu
If something is wrong here, please let me know..I pulled this from HERE

<script type="text/javascript">
		$(document).ready(function(){
			var path = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
			<!--path = path.lastIndexOf("/");-->
			if ( path )
				$('#smoothmenu1 a[href$="' + path + '"]').attr('ddsmoothmenu', 'current');
				<!--alert(path);-->
		 });

		</script>

I have tried every combination I could think of for the "current" in my ddsmoothmenu.css file, as you can see below. am i missing something here?

.ddsmoothmenu ul li.current{
	background-color: #fff;
	color: #000;
}
.ddsmoothmenu ul li a.current{
	background-color: #fff;
	color: #000;
}
.ddsmoothmenu .current{
	background-color: #fff;
	color: #000;
}
.current{
	background-color: #fff;
	color: #000;
}

the basic thing I am trying to do here, is if I am on that page, set that top level menu item's background color to white, and the text color to black, but leave all previous(inherited) information the same.


thoughts? am i going about this all wrong?

thank you