layui实现兼容手机端和pc端的自适应导航菜单效果代码
代码语言:html
所属分类:响应式
代码描述:layui实现兼容手机端和pc端的自适应导航菜单效果代码
代码标签: 手机 端 和 pc 端 的 自 适应 导航 菜单 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css"> <style type="text/css"> .nav { width: 100%; height: 80px; box-shadow: 0 3px 3px 0 #CCC; background: #FFF; position: fixed; left: 0; top: 0; z-index: 999; overflow: hidden; transition: 0.3s } .nav.index { background: rgba(255, 255, 255 ,0.8); box-shadow: 0 0 0 0 rgba(0,0,0,0.05); } .nav.scroll { background: #FFF; box-shadow: 0 3px 3px 0 rgba(0,0,0,0.05); transition: 0.3s } .nav .layui-container { position: relative; transition: all 400ms ease-out; } .nav .nav-logo { height: 100%; position: absolute; top: 0; left: 15px; line-height: 80px; } .nav .nav-list { display: inline-block; height: 80px; } .nav .nav-list button { width: 25px; height: 30px; position: absolute; top: 30px; right: 15px; background-color: transparent; border: none; outline: none; cursor: pointer; } .nav .nav-list button span { display: block; width: 25px; height: 2px; background: #2db5a3; margin-bottom: 6px; transition: 0.5s; } .nav .nav-list button span.spa1 { transform: rotate(45deg); } .nav .nav-list button span.spa3 { transform: rotate(-45deg) translate(5px, -5px); } .nav .layui-nav { width: 100%; position: absolute; top: 80px; right: 0; color: #000; background: transparent; } .nav .layui-nav .layui-nav-item { display: block; line-height: 60px; } .nav .layui-nav * { font-size: 18px; } .nav .layui-nav .layui-nav-item a { padding: 0 0; color: #000; } .nav .layui-nav-bar, .nav .layui-nav .layui-this:after { height: 2px; background-color: #2db5a3; } .nav .layui-nav .layui-this a, .nav .layui-nav .layui-nav-item a:hover { color: #2db5a3; } @media screen and (min-width: 768px) { .nav { max-height: 80px; } .nav.index { background: rgba(255, 255, 255 ,0.3); } .nav .nav-list button { display: none; } .nav .layui-nav { width: auto; position: absolute; top: 0; padding: 0 5px; border-radius: 0; margin: 0; } .nav .layui-nav .layui-nav-item { display: inline-block; margin: 0 53px; line-height: 80px; } } </style> </head><body> <div class="nav index" style="height: 80px;"> <div class="layui-container"> <!-- 公司logo --> <div class="nav-logo"> <a href="index.html"> <img style="width:100px;" src="//rep.........完整代码请登录后点击上方下载按钮下载查看
网友评论0