Responsive layout---Menus

A simple responsive menu, implemented using only @media query.

The role of the general menu is to narrow the browser screen to a certain width, or on the mobile device to display the effect. Now step into the implementation of:

The first step: to build a common menu, the specific display:

The structure is as follows:

<navclass= "NAV">    <ul>        <Liclass= "Current"><ahref="#">Portfolio</a></Li>        <Li><ahref="#">Illustration</a></Li>        <Li><ahref="#">Web Design</a></Li>        <Li><ahref="#">Print Media</a></Li>        <Li><ahref="#">Graphic Design</a></Li>    </ul></nav>

/*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;}

The second step: Implement the response style.

The following example shows that when the screen is 600px or less than 600px, the menu is displayed as the result to the right of the first image, and the CSS code is as follows:

@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*/}. Nav a{Display:Block;padding:5px 5px 5px 32px;text-align: Left; }. Nav. Current a{background:None;Color:#666; }/*On nav Hover*/. Nav ul:hover{Background-image:None; }. Nav ul:hover Li{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; }    }

Try narrowing your browser to 600px or less than 600px, which is the style of your menu when 600px is applied.

Step Three: Compatibility

<nav> and media query are HTML5 content, IE8 and below are not supported. You need to add JS to be compatible.

<!--[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]-->

Summarize:

This is a simple, responsive example where you can apply a different media query based on your page layout to implement a responsive layout for your page.

Responsive layout---Menus