html5+CSS3 值得收藏的导航效果

lihongzhen
lihongzhen 发布于 6 天前 浏览:240 类型:原创 - 教程 分类:HTML/CSS - html5+css3 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>标题</title>
    <meta name="keywords" content="关键词">
    <meta name="description" content="内容描述">
    <style>
 body{background-color: #b4b4b4;}
.header {
    z-index: 9997;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 48px;
    background: #fff;
    border-bottom: 1px solid #e1e1e1;
}
.clearfix:after, .clearfix:before {
    display: table;
    line-height: 0;
    content: "";
}
.container{
    position: relative;
}
.header .nav {
    text-align: right;
    font-size: 0;
}
.header nav {
    width: 92%;
    float: right;
}

.header .nav>li {
    position: relative;
    display: inline-block;
    margin-left: 4.6%;
    text-align: center;
    white-space: nowrap;
    background: #fff;
    min-width: 55px;
    padding: 7px 0;
    vertical-align: top;
}
.header .nav>li:hover {
    box-shadow: 0 0 18px rgba(0,0,0,.2);
}
.header .nav li a.active {
    color: rgba(0,0,0,.4);
}
.header .nav>li>a {
    padding: 8px 15px;
    line-height: 22px;
}

.header .nav>li a {
    display: block;
    font-size: 14px;
    color: #333;
    text-decoration: none;
}
.header .nav a:link, .header .nav a:visited {
    color: #333;
}
.header .nav>li .wrapper {
    position: absolute;
    top: 52px;
    left: 0;
    width: 100%;
    background: #fff;
    overflow: hidden;
    border-top: 1px solid #e1e1e1;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    display: block;
}
.header .nav>li:hover .wrapper {
    box-shadow: 0 5px 18px rgba(0,0,0,.2);
}
.header li:hover .wrapper {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    display: block\9;
}
.header li .wrapper ul {
    padding: 8px 0;
    opacity: 0;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
}
.header li:hover .wrapper ul {
    opacity: 1;
}
.header li .wrapper ul li {
    opacity: 0;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-transition: all .3s ease .3s;
    transition: all .3s ease .3s;
}
.header li:hover .wrapper ul li {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.header li ul a {
    height: 32px;
    line-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
    -webkit-transition: background .3s ease-out;
    transition: background .3s ease-out;
    background-image: -webkit-radial-gradient(#f0f0f0 0,#f0f0f0 50%,#fff 50%,#fff 100%);
    background-image: radial-gradient(#f0f0f0 0,#f0f0f0 50%,#fff 50%,#fff 100%);
    background-size: 0 0;
    background-position: center center;
    background-repeat: no-repeat;
}
.header li ul a:hover {
    background-size: 180px 180px;
    background: #f0f0f0\9;
    </style>
</head>
<body>
<header class="header">
	<div class="container clearfix">
     <nav>
         <ul class="nav">
             <li><a href="###" class="active">首页</a></li>
             <li><a href="###">页面</a>
                 <div class="wrapper">
                    <ul>
                        <li><a href="###">页面1</a></li>
                        <li><a href="###">页面2</a></li>
                    </ul>
                </div>
             </li>
             <li><a href="###">页面</a>
                 <div class="wrapper">
                    <ul>
                        <li><a href="###">页面1</a></li>
                        <li><a href="###">页面2</a></li>
                    </ul>
                </div>
            </li>
             <li><a href="###">页面</a></li>
             <li><a href="###">页面</a></li>
             <li><a href="###">页面</a></li>
             <li><a href="###">页面</a></li>
             <li><a href="###">页面</a></li>
         </ul>
     </nav>   
    </div>
</header>
</body>
</html>
标签:
z
给个赞 1 人点赞
收藏 3 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
lihongzhen lihongzhen 作者

你以为你以为的就是你以为的吗...

作者最新