Trying to make mobile Nav Menu with only CSS

问题

I have been working on this website and am using media queries to adjust the layout of the view according to the screen size. For the mobile phone size I want to hide the navigation that is already in place and just show a simple "Menu" link that when clicked, displays the Nav Menu. I having been doing research, however I am looking for the simplest way possible with the code that I have. Any ideas would be greatly appreciated. I would like to stay away from javaScript if possible.

<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>

This is my jsFiddle that shows the CSS and the rest of the code. http://jsfiddle.net/Floyd/v723oqfc/

回答1:

So what you could do is:

Create a button called menu-bttn with the css:

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 Click Approach:

    <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>

Documentation On SlideToggle: http://api.jquery.com/slidetoggle/

You dont HAVE to use SlideToggle, there are other options: Documentation On Toggle: http://api.jquery.com/toggle/

Pure Javascript Approach:

<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>

来源：https://stackoverflow.com/questions/28253373/trying-to-make-mobile-nav-menu-with-only-css

标签

css

mobile

navigation

media-queries