CSS: Have hover over color remain when submenu is clicked on

I am doing a page for a friend and I have a question.

I am customizing a Wordpress template and there is a hover over color on the navigation menu.  I am trying to make it so that the hover over remains on a menu item when the end user is on the selected page.  I was able to get it working when one of the main items is selected but I have not been able to get it working to where the hover over remains on the main item when one of the sub items is selected.  


The site is here:  http://www.sendright.com/draft/dial

This is what I have:

#nav li a:hover,
#nav li.current-menu-item>a {
      background: #819AA9;      
       color: #FFFFFF;
}

Thanks for the help!
gwarcherAsked:
Who is Participating?
 
pritamduttCommented:
Well, I managed to kinda replicate your path structure with a saved copy of your page on my local web server and now everything is working fine.

Attached is working function code. Add this code to the end of the file.
<script type="text/javascript">
 /*<![CDATA[ */

var $j = jQuery.noConflict();


$j(document).ready(function(){

    changeTabs();

    function changeTabs()
    {
      var currentURL;  //The current site URL
      currentURL = location.href;       
      
      currentArray = currentURL.split('/'); //http://sendright.com/draft/dial/about/
        if(currentArray.length > 5)
        {
            currentURL = currentArray[5]; // 5th item in the array would be about
        } else
        {
            return;
        }
        
        alert(currentURL.toLowerCase());
        switch(currentURL.toLowerCase())
        {
			//About Page
			case "about":
			   $j("ul").find("li#menu-item-53").addClass("activeTab");
			  break;
			case "issues":
			   $j("ul").find("li#menu-item-56").addClass("activeTab");
			  break;
			case "contribute":
			   $j("ul").find("li#menu-item-56").addClass("activeTab");
			  break;
		}
	}
});
</script>

Open in new window


Once tested you can disable popup boxes by commenting out alert command.

Sorry for the inconveniences.

Regards,

0
 
pritamduttCommented:
The right way to do this would be to use a JavaScript JQuery.

Following steps would be required.

1. Use the unique Ids assigned to the Menu Items such as menu-item-53 in following piece of code from your website to build the constant hover.

<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-53"><a href="http://sendright.com/draft/dial/about/">About</a>

Open in new window


2. Add a little bit of JS in a file and include same in all pages:
    function changeTabs()
    {
      var currentURL;  //The current site URL
      currentURL = location.href;       
      
      currentArray = currentURL.split('/'); //http://sendright.com/draft/dial/about/
        if(currentArray.length > 5)
        {
            currentURL = currentArray[5]; // 5th item in the array would be about
        } else
        {
            return;
        }
        
        //alert(currentURL.toLowerCase());
        switch(currentURL.toLowerCase())
        {
			//About Page
			case "about":
			   $j("ul").find("li#menu-item-56").addClass("activeTab");
			  break;
		}
	}

Open in new window


Where you ActiveTab CSS class could have following definition

li.activeTab
{
      background: #819AA9;      
       color: #FFFFFF;
}

Open in new window


This should address your need.

Regards,
0
 
gwarcherAuthor Commented:
I added your script and css but I don't see a difference, please let me know if I did something incorrectly.

Thanks!
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
pritamduttCommented:
Oops missed out on some part

change above code to  include these lines on top

var $j = jQuery.noConflict();


$j(document).ready(function(){

    changeTabs();

// Insert the above given function here

}
0
 
gwarcherAuthor Commented:
I don't work with jQuery that much so if you don't mind checking the syntax:

<script type="text/javascript">
 /*<![CDATA[ */

var $j = jQuery.noConflict();


$j(document).ready(function(){

    changeTabs();

    function changeTabs()
    {
      var currentURL;  //The current site URL
      currentURL = location.href;      
     
      currentArray = currentURL.split('/'); //http://sendright.com/draft/dial/about/
        if(currentArray.length > 5)
        {
            currentURL = currentArray[5]; // 5th item in the array would be about
        } else
        {
            return;
        }
       
        //alert(currentURL.toLowerCase());
        switch(currentURL.toLowerCase())
        {
                  //About Page
                  case "about":
                     $j("ul").find("li#menu-item-56").addClass("activeTab");
                    break;
            }
      }
</script>

Thanks!
0
 
pritamduttCommented:
yeah thats fine :)

also lets enable

alert(currentURL.toLowerCase()); by removing //

this will give us messagebox window.

Regards,
0
 
gwarcherAuthor Commented:
I really appreciate all of the help.  Hover over is still not showing up when submenu links are clicked though.
0
 
pritamduttCommented:
Let me check!
0
 
pritamduttCommented:
Hi,

I have checked your page and apparently some dependent javascripts were missing.

Please include the following tags before the function.

    <script src="/Scripts/jqueryui182custommin.js" type="text/javascript"></script>
    <script src="/Scripts/jqueryeasing13.js" type="text/javascript"></script>
    <script src="/Scripts/jquerygalleryview11.js" type="text/javascript"></script>
    <script src="/Scripts/jquerytimers112.js" type="text/javascript"></script>
    <script src="/Scripts/jqueryhoverIntentminified.js" type="text/javascript"></script>

I have attached all the required scripts here. jqueryscripts.zip

Let me know once you are done.

Regards,
0
 
gwarcherAuthor Commented:
it took a second for me to add that since I am using the genesis framework in Wordpress, but I think I have it added correctly.  Let me know if I did not add it correctly as it is still not working :(

thanks for sticking with me here.  It's fairly late where I am so I will be checking this in the morning.

Thanks!
0
 
pritamduttCommented:
The scripts have been added at the end after the declaration of the above given function.

Probably you should move the above function to a new file and include it after the other javascript files...
0
 
pritamduttCommented:
Also the closing } is missing the j(document).ready(function(){ code, please add the same.

Thanks!
0
 
jtwcsCommented:
You can do this very easily by updating your css.

Change the following:

#nav li a:hover {
      //background: url(images/navhov.png) top right;
      background: #819AA9;
      color: #FFFFFF;
}

to

#nav li:hover, li a:hover {
      //background: url(images/navhov.png) top right;
      background: #819AA9;
      color: #FFFFFF;
}
0
 
jtwcsCommented:
After reading your question again, I'm not sure my answer was what you are looking for.  My answer was for how you can keep the hover active on the main nav when hovering the sub nav.

Are you looking to highlight the current page item in the menu?  For example, if you are on the Family page, did you want the Family link in the menu to be highlighted?  Or, are you looking to highlight Issues when on the Family page?

Try the following declarations.  The first declaration will keep the main nav item highlighted, Issues,  when you are on a sub page.  The second will keep the current page item, Family,  highlighted when on that page.

#nav ul li.current_page_parent>a {
    background: #819AA9;
}
#nav ul li.current_page_item a {
    background: #B4C9D5;
}
0
 
jtwcsCommented:
Here is a screenshot with all of the above css added, including my first answer, to show you what it would look like.  I am currently on the Family page and am hovering over Education.

 preview
0
 
SSupremeCommented:
I already answered this question, but because author ignored my solution he asks it again.
See here: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27393686.html
0
 
gwarcherAuthor Commented:
Thank you all very much for your help.  pritamdutt's solution worked perfectly.  SSupreme, I apologize once again for breaking protocol, The question I posted here was slightly different, however.  I needed the hover over to remain when a sub-menu link was chosen and it wasn't working with the solution from that question (although the main nav hover over did work perfectly).  Again, I apologize.
0
 
gwarcherAuthor Commented:
worked perfectly, thank you for your patience.
0
 
pritamduttCommented:
Great!

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.