尝试仅使用 CSS 制作移动导航菜单答案

【问题标题】：Trying to make mobile Nav Menu with only CSS尝试仅使用 CSS 制作移动导航菜单
【发布时间】：2015-03-30 23:03:30
【问题描述】：

我一直在这个网站上工作，并且正在使用媒体查询来根据屏幕大小调整视图的布局。对于手机尺寸，我想隐藏已经存在的导航，只显示一个简单的“菜单”链接，单击该链接会显示导航菜单。我一直在做研究，但是我正在寻找使用我拥有的代码的最简单的方法。任何想法将不胜感激。如果可能的话，我想远离 JavaScript。

<nav>
        <ul>
          <li><a href="meetPractioner.html">Meet The Practioner</a></li>
          <li><a href="servicesRates.html">Services &#38; Rates</a></li>
          <li><a href="bookAppointment.html">Book Appointment</a></li>
          <li><a href="locationHours.html">Location &#38; Hours</a></li>
          <li><a href="testimonials.html">Testimonials</a></li>
          <li><a href="questions.html">Questions &#38; Answers</a></li>
          <li><a href="benefits.html">Benefits of Massage</a></li>
          <li><a href="bodySense.html">Body Sense Magazine</a></li>


        </ul>
          <a href="#" id="pull">Menu</a> 
     </nav>

这是我的 jsFiddle，它显示了 CSS 和其余代码。 http://jsfiddle.net/Floyd/v723oqfc/

【问题讨论】：

点击会涉及到javascript。有“黑客”...尝试搜索“复选框黑客”，但 JS 会更简单...尤其是使用您当前的 HTML 结构。

标签： css mobile navigation media-queries

【解决方案1】：

所以你可以做的是：

使用 css 创建一个名为 menu-bttn 的按钮：

a.menu-bttn {
    display: none;
    //Other properties
}

//You should really use javascript or jquery for button click rather than CSS
a.menu-bttn:focus > nav ul li a {
    display: block;
}

...

@media only screen and (max-width:WIDTH) {
    a.menu-bttn {
        display: inline-block;
    }

    nav ul li a {
        display: none;
        width: 100%;
        //positioning
    }
 }

JQuery 点击方式：

    <script>
    function toggleMenu() {
        $('nav ul li a').slideToggle("fast");
    }
    </script>

    <a onclick="toggleMenu()" class="menu-bttn">Menu</a>

或

<script>
$(document).ready(function() {
    $('.menu-bttn').click(function() {
        $('nav ul li a').slideToggle("fast");
    });
});
</script>

<a class="menu-bttn">Menu</a>

SlideToggle 上的文档：http://api.jquery.com/slidetoggle/

您不必使用 SlideToggle，还有其他选项：切换文档：http://api.jquery.com/toggle/

纯 Javascript 方法：

<script>
var bttn = document.getElementsByClassName('menu-bttn');
var bttn = bttn[0];

function toggleMenu() {
    var menu = document.getElementsById(//Id Of nav ul li a elements);
    if (menu.style.display === 'none')
        menu.style.display = 'block';
    else
        menu.style.display = 'none';
}
</script>

<html>
...
<a onclick="toggleMenu()" class="menu-bttn">Menu</a>
...
</html>

【讨论】：

我喜欢这种方法，但是在使用按钮时我没有显示导航菜单
好的，所以 CSS 中的按钮点击有点棘手，'>' 意味着 nav ul li a 必须是 menu-bttn 的直接后代，因为情况并非如此。您最好的选择是使用 javascript 或 jquery 来显示/隐藏。
感谢您的帮助，我是 jquery 的新手，有没有可以轻松使用我的代码的？
是的，我在上面添加了一个示例
太好了，我会试试这些，看看能不能让它们为我工作。