CSS: Collapsed menu under response (striped)

Original: css:responsive Navigation Menu

CSS: Responsive navigation Menu

Translator: Dwqs

Before writing, about how to make a responsive drop-down menu: The drop-down menu under response

Before, I wrote a tutorial on how to make a responsive mobile navigation. Now, I've found a new technique to implement a responsive menu without using JavaScript, but instead use HTML 5 clear semantic markup.

This menu can be left, centered, and right-aligned, unlike the menu mentioned earlier in the article that needs to be clicked to toggle between display and hide. It also has a tag that shows the active/current menu item, and it can work on all mobile platforms and all desktop browsers including IE.

First, look at the demo's Effect: Demo

First, the purpose

The purpose of this tutorial is to show how to turn the regular list menu into a smaller display drop-down menu.

This technique is useful in navigating through a number of links, such as the following, which compresses all the buttons into an elegant drop-down.

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

Third, 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;}. NavApadding:3px 12px;    text-decoration:none;    Color:#999;    Line-height:100%;}. Nava:hover {Color:#000;}. Nav . currentAbackground:#999;    Color:#fff;    Border-radius:5px;}

Four, center and right alignment

As mentioned earlier, you can change the alignment with the Text-align property.

/* Right nav */ .nav  .right  Span style= "COLOR: #0000ff" >ul  {text-align :  right; } /* Center nav */ .nav  .center  ul  {text-align : center; }  

Five, IE's support

In IE 8 and earlier versions, NAV labels and media queries that do not support HTML5 are not supported. Introduce css3-mediaqueries.js (or respond.js) and html5shim.js to provide backup-compatible processing. If you don't want to use html5shim.js, you can use DIV instead of NAV.

<!--[if lt IE 9]>    <script src="http://css3-mediaqueries-js.googlecode.com/files/ Css3-mediaqueries.js "></script>    <script src=" Http://html5shim.googlecode.com/svn/trunk /html5.js "></script><! [endif]->

Vi. response Type

Now here's the interesting part-the responsiveness of the Media query menu. If you're not familiar with responsive design, you can read the article I wrote about Andmedia query responsive design (subsequent translations).

At the PX breakpoint, I set the nav element to relative positioning so that I can definitely position the UL element. With Display:none, I hide all the LI elements, but keep the current Li elements displayed as block elements. Then, when the mouse hovers over the nav element, all Li is added Display:block. To mark the current Li element, I'll add an icon. For the center and Right alignment, use the left and left properties for the positioned UL element. Look at the final demo effect:

@media Screen and (Max-width: 600px) {. Nav{position:relative;        Min-height:40px;}. Nav ul{width:180px;        padding:5px 0;        position:Absolute;        Top: 0; Left: 0;Border:solid 1px #aaa;        background: #fff URL (images/icon-Menu. PNG) No-repeat 10px 11px;        Border-radius:5px;box-shadow:0 1px 2px Rgba (0,0,0,.3); }. Nav Li{Display:none; / * Hide all <li> items * /        margin: 0; }. Nav . current{Display:Block; / * Show Only Current <li> item * /}. NavADisplay:Block;        padding:5px 5px 5px 32px;        text-align:Left ;}. Nav . currentAbackground:none;        Color:#666;}/ * on nav hover * /    . Nav ul: hover {Background-image:none;}. Nav ul: hoverLi{Display:Block;        margin:0 0 5px;}. Nav ul: hover. current{background: URL (images/icon-check. PNG) No-repeat 10px 7px;}/ * Right Nav * /    . Nav. Right ul{ Left:Auto;         Right: 0; }/ * Center Nav * /    . Nav. Center ul{ Left:50%;        margin- Left:-90px;}    }

Related Posts recommended:

10-Responsive design navigation menu Source: http://www.shejidaren.com/10-responsive-navigation-tutorials.htmlCreating a CSS3 responsive menu:http://www.onextrapixel.com/2012/08/27/creating-a-css3-responsive-menu/Animenu-Responsive Navigation design tutorial: http://red-team-design.com/animenu-a-responsive-dropdown-navigation-made-with-sass/

Demo:http://red-team-design.com/wp-content/uploads/2013/02/animenu-demo.html

Original starting: http://www.ido321.com/1386.html

CSS: Collapsed menu under response (striped)