CODEWITHSUNDEEP
javascriptcss
Doahh
Doahh

Reputation: 590

CSS: menu open on hover and close on click

I have a <li> that when hovered open a <ul>.

I would like to be able to also click the <li> and have the <ul> open and close but still keep the hover functionality. At the moment once the click occurs I lose the :hover.

JSFiddle

CSS

ul#popup-menu {
    display: inline-block;
    margin: 0;
    cursor: pointer;
}
ul#popup-menu ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
}
ul#popup-menu li {
    list-style-type: none;
    position: relative;
}
ul#popup-menu li:hover > * {
    display: block;
}

HTML

<ul id="popup-menu">
    <li>
        Click to open
        <ul>
            <li>
                Item 1
            </li>
            <li>
                Item 2
            </li>
            <li>
                Item 2
            </li>
        </ul>
    </li>
</ul>

JavaScript

$(document).ready(function() {
    $('#popup-menu').click(function() {
        var element = $('ul#popup-menu ul')
        if (element.css('display') === 'block') {
            $('ul#popup-menu ul').css('display', 'none');
        } else {
            $('ul#popup-menu ul').css('display', 'block');
        }
    });
});

Upvotes: 0

Views: 4199

Answers (4)

frnt
frnt

Reputation: 8795

Try this, this keep your hover effect even after click. This even works if you remove :hover from your CSS.

$(document).ready(function() {
  $('#popup-menu').click(function(){
  $("ul li > ul").show();
  $(this).mouseout(function(){
  $("ul li > ul").hide();
  });
   });
});

Upvotes: 0

Pushpendra
Pushpendra

Reputation: 1712

$(document).ready(function() {
 $('#popup-menu').click(function() {
if ($('ul#popup-menu li ul').css('display') === 'block') {
  $('ul#popup-menu li ul').css('display', 'none');
} else {
  $('ul#popup-menu li ul').css('display', 'block');
}
 });

 $("ul#popup-menu li").bind
 ({
  mouseover:
     function ()
     {
     $('ul#popup-menu li ul').css('display', 'block');
    },
  mouseout:
    function ()
    {
     $('ul#popup-menu li ul').css('display', 'none');
    }
  });

  });

Pen

Upvotes: 1

Max
Max

Reputation: 1844

Add code that resets style attribute, because inline-style has higher priority that ul#popup-menu li:hover > * css selector. So when style is set display-block is always none;

Try this:

$(document).ready(function() {
  $('#popup-menu').click(function() {
    if ($('ul#popup-menu ul').css('display') === 'block') {
      $('ul#popup-menu ul').css('display', 'none');
    } else {
      $('ul#popup-menu ul').css('display', 'block');
    }
  });

  $('#popup-menu > li').mouseleave(function() {
    $('ul', this).removeAttr('style');
  })
});

Fiddle

So when you mouseleave the menu header it goest to nested UL and remove style attribute, so hover works again

Upvotes: 2

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10207

Just play little with classes and do it with JS

$(document).ready(function() {
  $('#popup-menu').hover(
    function() {
      $('ul#popup-menu ul.hover').css('display', 'block');
    },
    function() {
      $('ul#popup-menu ul.hover').css('display', 'none');
    }
  );
  $('#popup-menu').click(function() {
    if ($('ul#popup-menu ul').hasClass('active')) {
      $('ul#popup-menu ul').removeClass('active');
      $('ul#popup-menu ul').addClass('hover');
    } else {
      $('ul#popup-menu ul').removeClass('hover');
      $('ul#popup-menu ul').addClass('active');
    }
  });
});
ul#popup-menu {
  display: inline-block;
  margin: 0;
  cursor: pointer;
}

ul#popup-menu ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin: 0;
}
ul#popup-menu ul.active {
  display:block;
}
ul#popup-menu li {
  list-style-type: none;
  position: relative;
}

/* ul#popup-menu li:hover > * {
  display: block;
} */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <ul id="popup-menu">
    <li>
      Open menu
      <ul class="hover">
        <li>
          Item
        </li>
        <li>
          Item
        </li>
        <li>
          Item
        </li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 0

Related Questions