Re-adding last class on mouse out

I have a small issue i am trying to work out.
On my navigation menu when I hover over a menu item I have a border slide up from the bottom which works great. The currently selected page has the border already underneath the menu item.

When I hover over a menu item I want the border under the current item to disappear.
I am able to achieve this which you can see here: www.skurat.com

I achieved this by removing the current class when I hover over any of the other menu items:
$('.main-navigation li').mouseover(function(){
		$('.current').removeClass('current');
	});
/*Trying to figure out how to re-add the class to the current id */
	$('.main-navigation li').mouseout(function(){
		$(this).attr('id').addClass('current');
	})

Open in new window

But when I move out of the navigation menu I want the border to reappear under the current page/menu item.

For example, when you go to the home page the border will be under the Home button. When I hover over the Portfolio button the home border will dissappear and when I move out of Portfolio, out of the navigation menu, the border will reappear under the Home button.

A Little help would be great.

Thanks,
Tony
LVL 8
askurat1Asked:
Who is Participating?
 
askurat1Author Commented:
You got me in the right direction but this is what ultimately worked with a minor issue:
$('.main-navigation li a').mouseover(function(){
		$('.current').removeClass('current');
	});
	$('.main-navigation li a').mouseout(function(){
		$('.mySelector').addClass('current');
	});
	$('.main-navigation li a').click(function(){
		$('.mySelector').removeClass('mySelector');
	});

Open in new window


You can go to my page and check it out.

The minor issue is when I click a menu item that is already selected the border goes away.

For example when  you go to the page and click the Home button and move away the border will disappear.

I'm pretty sure an if/else statement would work but just not sure how to write it.
Here is the logic:
 $('.main-navigation li a').click(function(){
		
		if (" .main-navigation li a" does not have a class of "mySelector") {
		remove "mySelector" class
		} 
	});

Any thoughts?

Open in new window

0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
just use Jquery toogleClass()

<script>
    $("p").click(function () {
      $(this).toggleClass("highlight");
    });
</script>

http://api.jquery.com/toggleClass/
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
According to your code ;

you can better use this. for both removing and adding.
or you can add another dummy classname for using as a refference (if .current is not a class for .main-navigation li )

$('.main-navigation li').mouseover(function(){
		 $(this).toggleClass("highlight");
	});

Open in new window

0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
askurat1Author Commented:
I'm not sure exactly how this works. A little more help would be nice.
0
 
askurat1Author Commented:
This gets me part of the way there:
$('.main-navigation li').hover(function(){
		$('.main-navigation li').toggleClass('current');
	});

Open in new window

The probably is it toggles the hover of all the menu items instead of the one you actually hove over.
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
try first

$('.main-navigation li.current').mouseover(function(){
		 $(this).toggleClass("current");
	});

Open in new window


 buiild your html like

<ul class="main-navigation">
<li>Homepage</li>
<li class="current myselector">Menuitem</li>
.
.
.
</ul>

Open in new window


and use
$('.main-navigation li.myselector').mouseover(function(){
		 $(this).toggleClass("current");
	});

Open in new window

0
 
askurat1Author Commented:
Never mind, I was able to work it out.

Thanks for the help.
0
 
askurat1Author Commented:
You got me in the right direction. Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.