[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2011-10-13
19
Medium Priority
?
407 Views
Last Modified: 2012-05-12
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!
0
Comment
Question by:gwarcher
  • 9
  • 6
  • 3
  • +1
19 Comments
 
LVL 9

Expert Comment

by:pritamdutt
ID: 36966515
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
 

Author Comment

by:gwarcher
ID: 36966636
I added your script and css but I don't see a difference, please let me know if I did something incorrectly.

Thanks!
0
 
LVL 9

Expert Comment

by:pritamdutt
ID: 36966756
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
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.

 

Author Comment

by:gwarcher
ID: 36966779
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
 
LVL 9

Expert Comment

by:pritamdutt
ID: 36966794
yeah thats fine :)

also lets enable

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

this will give us messagebox window.

Regards,
0
 

Author Comment

by:gwarcher
ID: 36966811
I really appreciate all of the help.  Hover over is still not showing up when submenu links are clicked though.
0
 
LVL 9

Expert Comment

by:pritamdutt
ID: 36966845
Let me check!
0
 
LVL 9

Expert Comment

by:pritamdutt
ID: 36966908
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
 

Author Comment

by:gwarcher
ID: 36966958
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
 
LVL 9

Expert Comment

by:pritamdutt
ID: 36967023
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
 
LVL 9

Expert Comment

by:pritamdutt
ID: 36967043
Also the closing } is missing the j(document).ready(function(){ code, please add the same.

Thanks!
0
 
LVL 9

Accepted Solution

by:
pritamdutt earned 2000 total points
ID: 36967197
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
 
LVL 10

Expert Comment

by:jtwcs
ID: 36968578
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
 
LVL 10

Expert Comment

by:jtwcs
ID: 36968844
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
 
LVL 10

Expert Comment

by:jtwcs
ID: 36968870
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
 
LVL 16

Expert Comment

by:SSupreme
ID: 36969578
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
 

Author Comment

by:gwarcher
ID: 36969682
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
 

Author Closing Comment

by:gwarcher
ID: 36969685
worked perfectly, thank you for your patience.
0
 
LVL 9

Expert Comment

by:pritamdutt
ID: 36972172
Great!

Thanks!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses
Course of the Month18 days, 14 hours left to enroll

834 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