CSS自适应导航菜单的实例代码

前端  /  管理员 发布于 7年前   257

以下是一个简单实例，可以通过学习了解响应工菜单的制作。

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

页面小于600显示成一列

        @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;    }        }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。