CSS: Collapse menu under responsive style (striped style)_html/css_WEB-ITnose

Original text: CSS: Responsive Navigation Menu

Translation: CSS: Responsive Navigation Menu

Translator: dwqs

Written before, about how to make a responsive drop-down menu: Responsive drop-down menu

Previously, I wrote a tutorial on how to make responsive mobile navigation. Now, I've discovered a new trick to implement responsive menus without using JavaScript, but using HTML 5's clear semantic markup.

This menu can be aligned left, center and right, unlike the menu mentioned in the previous article that requires clicking to switch between showing and hiding. It also has a marker showing the active/current menu item, and it works on all mobile platforms and all desktop browsers including IE.

First, take a look at the effect of the Demo: Demo

1. Purpose

The purpose of this tutorial is to show how to turn a regular list menu into A smaller display dropdown menu.

This trick is very useful on navigations composed of many links, such as the screenshot below, to condense all the buttons into an elegant drop-down.

2. Nav HTML tags

<nav class="nav">    <ul>        <li class="current"><a href="#">Portfolio</a></li>        <li><a href="#">Illustration</a></li>        <li><a href="#">Web Design</a></li>        <li><a href="#">Print Media</a></li>        <li><a href="#">Graphic Design</a></li>    </ul></nav>

3. CSS

/* nav */.nav {    position: relative;    margin: 20px 0;}.nav ul {    margin: 0;    padding: 0;}.nav li {    margin: 0 5px 10px 0;    padding: 0;    list-style: none;    display: inline-block;}.nav a {    padding: 3px 12px;    text-decoration: none;    color: #999;    line-height: 100%;}.nav a:hover {    color: #000;}.nav .current a {    background: #999;    color: #fff;    border-radius: 5px;}

4. Center and right alignment

As mentioned earlier, it can be changed through the text-align attribute Alignment.

/* right nav */.nav.right ul {    text-align: right;}/* center nav */.nav.center ul {    text-align: center;}

5. IE support

In IE 8 and earlier versions, HTML5 nav tags and media are not supported. Query. Introduce css3-mediaqueries.js (or respond.js) and html5shim.js to provide fallback compatibility processing. If you don’t want to use html5shim.js, you can use div instead of nav