Here is a simple example that can be learned to understand the production of the responder menu.
Html
<navclass="nav"> <ul> <liclass=" 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>
As1
. Nav {position:relative; margin:20px0; }. Nav ul {margin:0; padding:0; }. Nav ul li {margin:05px 10px0; padding:0; List-Style:none; float: Left; }. Nav a {padding:3px 12px; Text-Decoration:none; Color: #999; Line-height: -%; }. Nav a:hover {color: # the; }. Nav. Current a {background: #999; Color: #fff; Border-radius:5px; } /*Right nav*/. nav.right ul {text-Align:right; } /*Center Nav*/. Nav.center ul {text-Align:center; }
Page less than 600 is displayed as a column
@media (max-width:600px) {. nav {position:relative; Min-height:30px; }. Nav ul {width:180px; padding:5px0; 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:01px 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 05px; }. 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: -%; Margin-left:-90px; } }
CSS Adaptive navigation menu