Responsive layout --- menu, response layout ---

Responsive layout --- menu, response layout ---

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

The function is to narrow down the screen of the browser to a certain width or display the normal menu on a mobile device. It is implemented step by step:

Step 1: first build a common menu, which is displayed as follows:

The structure is as follows:

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

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

Step 2: implement the response.

The following example shows the result displayed on the right of the first graph when the screen is 600px or less than 600px. 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 to narrow down your browser to 600px or less than 600px, which is the style when your menu applies 600px.

Step 3: Compatibility

<Nav> media query and media query are HTML5 content, which is not supported by IE8 or below. You need to add JavaScript For compatibility.

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

Summary:

This is just a simple response example. You can apply different media queries based on your own page layout to implement responsive page layout.