CSS Implementation Adaptive navigation menu

This time to bring you the CSS implementation of the Adaptive navigation menu, CSS implementation of the self-adaptive navigation menu considerations are what, the following is the actual case, take a look.

Here is a simple example that can be learned to understand the production of the responder menu.

Html

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

Css

 nav {position:relative;        margin:20px 0;                }. Nav ul {margin:0;            padding:0;                    }. Nav ul li {margin:0 5px 10px 0;                    padding:0;                    List-style:none;                Float:left;                }. 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;            }/* Right Nav */. nav.right ul {text-align:right;            }/* Center Nav */. nav.center ul {text-align:center; }

        @media (max-width:600px) {. nav {position:relative;            min-height:30px;                    }. 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; }        }

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Using CSS3 to realize the effect of projectile screen

You don't know the upset CSS properties

How to omit CSS custom text