?
Solved

Re-adding last class on mouse out

Posted on 2012-08-16
8
Medium Priority
?
608 Views
Last Modified: 2012-08-22
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
0
Comment
Question by:askurat1
  • 5
  • 3
8 Comments
 
LVL 9

Expert Comment

by:Erdinç Güngör Çorbacı
ID: 38302961
just use Jquery toogleClass()

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

http://api.jquery.com/toggleClass/
0
 
LVL 9

Expert Comment

by:Erdinç Güngör Çorbacı
ID: 38302979
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
 
LVL 8

Author Comment

by:askurat1
ID: 38303211
I'm not sure exactly how this works. A little more help would be nice.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 8

Author Comment

by:askurat1
ID: 38303232
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
 
LVL 9

Assisted Solution

by:Erdinç Güngör Çorbacı
Erdinç Güngör Çorbacı earned 2000 total points
ID: 38304247
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
 
LVL 8

Accepted Solution

by:
askurat1 earned 0 total points
ID: 38305937
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
 
LVL 8

Author Comment

by:askurat1
ID: 38306109
Never mind, I was able to work it out.

Thanks for the help.
0
 
LVL 8

Author Closing Comment

by:askurat1
ID: 38319683
You got me in the right direction. Thanks.
0

Featured Post

Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
The viewer will learn how to dynamically set the form action using jQuery.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month16 days, 18 hours left to enroll

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question