Coby1987

:hover в мобильных версиях

Recommended Posts

Доброго времени суток!

Сделал меню 2-х уровневое, подуровень через :hover у ul. На десктопе все ок, а вот на мобильной версии как реализовать чтобы подменю открывалось не через наведение а по клику? Так например в стандартном меню от bootstrap4 сделано. Подскажите?

Share this post


Link to post
Share on other sites

Нужно написать функцию на javascript + jQuery на событие клика.

Вот пример твоего меню:

<style>
.ul_menu ul li ul {
  display: none;
}
</style>

<div class="ul_menu">
  <ul>
    <li><span>пункт 1</span>
      <ul>
        <li>пункт 1.1</li>
        <li>пункт 1.2</li>
        <li>пункт 1.3</li>
      </ul>
    </li>
    <li><span>пункт 2</span>
      <ul>
        <li>пункт 2.1</li>
        <li>пункт 2.2</li>
        <li>пункт 2.3</li>
      </ul>
    </li>
  </ul>
</div>

<script type="text/javascript">
$(".ul_menu li").click(function(){
	$(this).find("ul").fadeToggle();
});
</script>

При клике на пункт меню будут открываться подпункты. При повторном клике подпункты будут закрываться.

Share this post


Link to post
Share on other sites
20.04.2019 в 02:06, Drevko сказал:

При клике на пункт меню будут открываться подпункты. При повторном клике подпункты будут закрываться.

Это всё отлично, если у родительского пункта нет ссылки.

Ну и статья любопытная https://blog.usejournal.com/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c

Share this post


Link to post
Share on other sites
10 часов назад, npofopr сказал:

Это всё отлично, если у родительского пункта нет ссылки.

Ну и статья любопытная https://blog.usejournal.com/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c

Это да, но как не крути, два взаимоисключающих события на одно действие не поставишь. Я использую в таком случае, например, кнопку справа от названия пункта со значком "+". 

Share this post


Link to post
Share on other sites

Я обычно делаю, что если обнаружено touch-устройство (например по наличию window.ontouchstart или по media-запросу pointer: coarse), то перехватываю клики по меню и делаю им preventDefault.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,331
    Total Members
    3,128
    Most Online
    god
    Newest Member
    god
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.