CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
Ash Thomas
Ash Thomas

Reputation: 53

How to prevent button from appearing hovered

(Please see this link to jsfiddle - http://jsfiddle.net/AshThomas/742tvhqy/1/)

Hi there,

If this code runs on a computer... when the menu button is clicked, the button still appears 'hovered' until the cursor is moved (i.e. if you click the button and don't move the cursor, the button still appears 'hovered')

Also, if this code is run on the Samsung Galaxy S3 Mini's standard internet browser (this could be the same for other android phones), the menu opens and then closes instantly, even though the menu button is only pressed once.

I believe these two occurrences are linked but I cannot seem to find a solution.

Basically, I am looking to stop the menu button from appearing 'hovered' once the button is clicked (and without having to move the cursor) and I would like the menu to stay open when the menu button is pressed on the phone mentioned above... hopefully these two problems are related!

<body>
  <div id="menu" class="panel" role="navigation" style="overflow-y: scroll; position: fixed; 
top: 0px; bottom: 0px; width: 15.625em; height: 100%; -webkit-transition: right 300ms ease; 
transition: right 300ms ease; right: -15.625em;  -webkit-overflow-scrolling: touch;">
    <div id="menuWrapper">
      <ul>
        <li class="boldMenu"><a href="#">Home</a>
        </li>
        <li class="boldMenu"><a href="#">About</a>
        </li>
        <li class="boldMenu"><a href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>



  <div class="wrap push" style="right: 0px; -webkit-transition: right 300ms ease; transition: right 300ms ease;">

    <a href="#menu" class="menu-link">☰</a>
  </div>

Upvotes: 3

Views: 80

Answers (2)

Lukas Liesis
Lukas Liesis

Reputation: 26413

I've fixed your issue. I guess it's a bug of browser, because it's not re-rendering DOM elements after animation.

http://jsfiddle.net/742tvhqy/4/

Check out line #104

menuLink.on('click.bigSlide', function(e) {
  e.preventDefault();
  if (menu._state === 'closed') {
    menu.open();
  } else {
    menu.close();
  }
   menuLink.fadeOut(5).fadeIn(10);
});

You see that last line with fadeOut/fadeIn? That's the fix. I've tried with hide().show(); but it's not working, even if i use fadeOut(1) it's not working :) But common, 5ms is same as 1ms. I can't think any better solution right now. It works.

BTW. In your place I would just do all this stuff with few lines of jQuery code instead of all that fancy css animation stuff..

Upvotes: 1

Xandrios93
Xandrios93

Reputation: 2295

maybe do this... add another class to the button and give the class the hovered properties in css...

menu-link-class:hover {...}

then do this in your js

$('.menu-link').click(function() {
    var me = $(this);
    me.removeClass('menu-link-class');
    setTimeout(function() {
        me.addClass('menu-link-class');
    },1);
});

UPDATE: Special thanks to @Lukas Liesis

you have 2 choises :)

menuLink.on('click.bigSlide', function(e) {
    e.preventDefault();
    if (menu._state === 'closed') {
        menu.open();
    } else {
        menu.close();
    }
    menuLink.fadeOut(5).fadeIn(10);
});

or 

menuLink.on('click.bigSlide', function(e) {
    e.preventDefault();
    if (menu._state === 'closed') {
        menu.open();
    } else {
        menu.close();
    }
    menuLink.removeClass('menu-link-class');
    setTimeout(function() {
        menuLink.addClass('menu-link-class');
    },1);
});

Upvotes: 0

Related Questions