How do I create a jquery function that will override my css hover while javascript is enabled?

Question

I have built a drop down menu in pure css and it works perfectly. Right now it only works when hovered over. Hovering over #headerNav causes the menu to my .dropdownMenu to drop down and as soon as cursor is taken away from dropdownMenu or the #headerNav the menu disappears.

Because I want users with js enabled to have a better experience, I've decided to use some jquery to get the same effect as click here. Which basically keeps the drop down menu open after a click and click only not hovering.

By default I have set .dropdownMenu to "display: none" and then to show the drop down menu I have something like this:

#headerNav:hover .dropdownMenu {

        display:block;


        //more code


}

Here is my html:

<header>
  <div id='headerContent'>
    <div id='LogoHolder'>
    </div>
    <nav id='headerNav'>
      <ul>
        <li id='photoThumbnail'></li>
        <li id='currentUser'>
          <ul class="dropdownMenu">
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
            <li>link4</li>
            <li>link5</li>
            <li>link6</li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>

I've been experimenting for 2 days now and can't seem to come up with a way of doing this. I'd appreciate some help with clear examples. Thanks

Kind regards

Hope so this will help you, http://stackoverflow.com/questions/2754546/can-i-disable-a-css-hover-effect-via-javascript — Vikramsinh Shinde, Mar 26 '12 at 15:37

score 2 · Answer 1 · answered Mar 26 '12 at 15:40

2

Instead of targeting your nav by it's ID, add a class to it, say hover-nav and update your CSS accordingly:

.hover-nav:hover .dropdownMenu

Then in your javascript remove the css class from the ul

$(#headerNav').removeClass('hover-nav');

and use your click to show plugin as you normally would.

answered Mar 26 '12 at 15:40

Nathan Anderson

6,768
26
29

The first part worked for stopping the the dropdown showing on hover. Thanks – LondonGuy Mar 26 '12 at 15:57

Timothy Aaron · Answer 2 · 2012-03-26T16:18:46.617

1

Nathan hit it on the head. I'll go ahead and paste the code, since I was already nearly finished with it.

CSS

#headerNav .hideable{ display:none; }
#headerNav:hover .hideable{ display:block; }

HTML (just add hideable to your UL)

<ul class="dropDownMenu hideable">

jQuery

$('.hideable').hide().removeClass('hideable');

$('#headerNav').click( function(){
    $(this).find('.dropDownMenu').slideToggle();
});

Replace above with this jQuery to add the ability to close the menu if anywhere else is clicked.

$('.hideable').hide().removeClass('hideable');

$('#headerNav').click( function(e){
    $(this).find('.dropDownMenu').slideToggle();
    e.stopPropagation();
});

$('html').click( function(e){
    $('.dropDownMenu').slideUp();
});

edited Mar 26 '12 at 16:18

answered Mar 26 '12 at 15:46

Timothy Aaron

3,059
19
22

I cleaned up the fiddle a bit to add attach the actions to `currentUser` instead of `headerNav`. – Timothy Aaron Mar 26 '12 at 15:49
I'll give this a try and report back. I've looked at the jfiddle link and wondering if there is a way to make the menu also disappear if any where on the screen is clicked too and not just the actual button? – LondonGuy Mar 26 '12 at 16:01
I'll also need the actions on headerNav instead of current user because headerNav is like a wrapper for holding the current users username and a thumbnail photo of them. When it's scrolled over it lights up like a big button and the whole area is clickable rather than just the users username. – LondonGuy Mar 26 '12 at 16:07
Put `headerNav` back on jsfiddle, and added the code required to "close if anywhere else is clicked" to both jsfiddle and above answer. – Timothy Aaron Mar 26 '12 at 16:19

score 1 · Accepted Answer · answered Mar 26 '12 at 16:21

1

I think the most elegant way to deal with javascript enabled/disabled is to add :

<html class='no-js'>

then removing the class with Javascript.

So, in your case, you would use

.no-js #headerNav:hover .dropdownMenu {
        display:block;
}

to target only users with javascript disabled.

See : http://paulirish.com/2009/avoiding-the-fouc-v3/ for more details.

answered Mar 26 '12 at 16:21

mddw

5,570
1
30
32

Great solution seeing as I already use modernizr. Now I can take care of the js without worrying about the hover affect because it only kicks in if js is disabled. – LondonGuy Mar 26 '12 at 16:52

score 0 · Answer 4 · edited Mar 27 '12 at 10:40

0

Your CSS is .dropdownMenu Your Html is class="drop DownMenu"

CSS is case sensitive.

edited Mar 27 '12 at 10:40

Code Lღver

15,573
16
56
75

answered Mar 26 '12 at 15:45

Will Hancock

1,240
4
18
27

Hi corrected it, but this was an old copy and pasted version of the code I'm currently using with the correction. Thanks for the spot though. – LondonGuy Mar 26 '12 at 15:56

kubedan · Answer 5 · 2012-03-26T16:08:31.390

0

Try something like this:

$(document).ready(function(){
  $('#headerNav .dropDownMenu').hover(function() {
    $(this).show();
  });

  $('*:not(#headerNav .dropDownMenu)').click(function() {
    event.stopPropagation();
    $("#headerNav .dropDownMenu").hide();
  });
});

edited Mar 26 '12 at 16:08

answered Mar 26 '12 at 15:53

kubedan

616
2
7
26

How do I create a jquery function that will override my css hover while javascript is enabled?

5 Answers5