div+css实现简洁自适应下拉响应式菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:div+css实现简洁自适应下拉响应式菜单效果代码,自适应设计,兼容移动端。
代码标签: div css 简洁 自适应 下拉 响应式 菜单
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta charset="utf-8"> <style> * { margin: 0; padding: 0 } html { background-color: #fff; height: 100% } body { color: #333; font: .75em/1.5em Arial,sans-serif } .container { margin-left: auto; margin-right: auto; margin-top: 30px; width: 96% } #nav span { display: none } #nav,#nav ul { list-style: none outside none; margin: 0; padding: 0 } #nav { background-color: #F5F5F5; border-bottom: 5px solid #333; float: left; margin-left: 1%; margin-right: 1%; position: relative; width: 98% } #nav ul.subs { background-color: #FFF; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); color: #333; display: none; left: 0; padding: 2%; position: absolute; top: 54px; width: 96% } #nav>li { border-bottom: 5px solid transparent; float: left; margin-bottom: -5px; text-align: left; -moz-transition: all 300ms ease-in-out 0s; -ms-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s; -webkit-transition: all 300ms ease-in-out 0s; transition: all 300ms ease-in-out 0s } #nav li a { display: block; text-decoration: none; -moz-transition: color 450ms ease-in-out 0s,background-color 450ms ease-in-out 0s; -ms-transition: color 450ms ease-in-out 0s,background-color 450ms ease-in-out 0s; -o-transition: color 450ms ease-in-out 0s,background-color 450ms ease-in-out 0s; -webkit-transition: color 450ms ease-in-out 0s,background-color 450ms ease-in-out 0s; transition: color 450ms ease-in-out 0s,background-color 450ms ease-in-out 0s; white-space: normal } #nav>li>a { color: #333; display: block; font-size: 1.3em; line-height: 49px; padding: 0 15px; text-transform: uppercase } #nav>li:hover>a,#nav>a:hover { background-color: #F55856; color: #FFF } #nav li.active>a { background-color: #333; color: #FFF } #nav li:hover ul.subs { display: block } #nav ul.subs>li { display: inline-block; float: none; padding: 10px 1%; vertical-align: top; width: 33% } #nav ul.subs>li a { color: #777; line-height: 20px } #nav ul li a:hover { color: #F55856 } #nav ul.subs>li>a { font-size: 1.3em; margin-bottom: 10px; text-transform: uppercase } #nav ul.subs>li li { float: none; padding-left: 8px; -moz-transition: padding 150ms ease-out 0s; -ms-transition: padding 150ms ease-out 0s; -o-transition: padding 150ms ease-out 0s; -webkit-transition: padding 150ms ease-out 0s; transition: padding 150ms ease-out 0s } #nav ul.subs>li li:hover { padding-left: 15px } @media all and (max-width : 980px) { #nav>li { float:none; border-bottom: 0; margin-bottom: 0 } #nav ul.subs { position: relative; top: 0 } #nav .........完整代码请登录后点击上方下载按钮下载查看
网友评论0