响应菜单显示和隐藏点击 [英] Responsive menu show and hide on click

问题描述

我试图写一个响应菜单。它实际上是工作，但我不能得到clik效果在CSS。对于这一刻，我正在使用悬停。如何使屏幕宽度低于750px时，我必须点击菜单从图片。数字2（ul）从pic显示菜单。数字3（li）？这是一个单页网站，所以当我clik从下拉菜单中的一些元素它应该隐藏菜单agin（li）。

I trying to write a responsive menu. It's actually works but I can't get the on clik effect in CSS. For this moment I'm using a hover. How to make that when the screen width is lower than 750px I have to click on menu from pic. number 2 (ul) to show menu from pic. number 3 (li) ? This is a one page site so when I clik on some element from drop down menu it's should hide menu agin (li).

HTML：

<header>
    <nav id="menu">
        <ul>
            <li class="li"><a href="#">WITAJ</a></li>
            <li class="li"><a href="#">O MNIE</a></li>
            <li class="li"><a href="#">DOŚWIADCZENIE</a></li>
            <li class="li"><a href="#">CO ROBIĘ?</a></li>
            <li class="li"><a href="#">KONTAKT</a></li>
            <li><a href="#">MOJE PRACE</a></li
        ></ul>
    </nav>
</header>

CSS：

@media screen and (max-width: 750px) {      
    header nav#menu ul:hover > li{
        display:block !important;
    }

    header nav#menu ul li{
        display:none !important;
    }
}

推荐答案

在CSS。通常使用JavaScript。
这是一个简单的jQuery解决方案：

You cannot achieve a click effect in CSS. It is common to use JavaScript for that. This is an easy jQuery solution:

$(function() {
  var menuVisible = false;
  $('#menuBtn').click(function() {
    if (menuVisible) {
      $('#myMenu').css({'display':'none'});
      menuVisible = false;
      return;
    }
    $('#myMenu').css({'display':'block'});
    menuVisible = true;
  });
  $('#myMenu').click(function() {
    $(this).css({'display':'none'});
    menuVisible = false;
  });
});

在用户单击某个条目后，它还会隐藏菜单。

It also hides the menu, after the user clicked on an entry.

在CSS中，您必须通过使用媒体查询强制菜单可见或不可见。这里有个例子： sfplex

In CSS, you have to force the menu to be visible or not by using media queries. Here an example: sfplex

这是此示例的HTML结构：

This is the HTML structure of this example:

<div id="menuBtn">click me</div>
<nav id="myMenu">
  <ul>
    <li>entry 1</li>
    <li>entry 2</li>
    <li>entry 3</li>
    <li>entry 4</li>
  </ul>
</nav>

请参阅 jsFiddle 。

这篇关于响应菜单显示和隐藏点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！