炫酷导航源码 研究响应式的时候、发现了国外的这么一个例子
今天在研究响应式的时候，从国外找了一个这样的例子，实现了响应式导航。我个人认为非常好。现在我将与您分享。我希望它对每个人都有帮助。看看Demo运行的效果炫酷导航源码，然后哥们，你可以决定是否下载这个Demo上面的效果，电脑端主要是通过CSS实现的，所以不会出现JS没加载，菜单打不开的现象。然后通过js获取手机端的菜单天外神坛源码网，主要使用js包-maps.js。
核心 CSS 代码（屏幕宽度小于 768px 时执行）
<p><pre class="prettyprint lang-js"> @media (max-width: 768px) {
.vertical-nav, .vertical-nav li {
width: 100%;
}
.vertical-nav > li > a {
padding-top:15px;
padding-bottom:15px;
padding-left: 25px;
}
.vertical-nav a {
width: 100%;
}
.vertical-nav ul, .vertical-nav ul li ul {
width: 100%;
left: 0;
border-left: none;
position: static;
}
.vertical-nav ul li {
background: #e9e9e9;
}
.vertical-nav.dark ul li {
background: #333;
}
.vertical-nav ul li a {
padding-top:10px;
padding-bottom:10px;
}
.vertical-nav > li i {
margin: -16px 14px 0 -25px;
}
.vertical-nav > li > ul > li > a {
padding-left: 40px !important;
}
.vertical-nav > li > ul > li > ul > li > a {
padding-left: 60px !important;
}
.vertical-nav > li > ul > li > ul > li > ul > li > a {
padding-left: 80px !important;
}
.vertical-nav .submenu-icon {
margin-right: 5px;
}
.vertical-nav ul .submenu-icon {
display: none;
}
}</pre></p>
JS实现响应式布局
<p><pre class="prettyprint lang-js"> <script>
$(document).ready(function(){
$(".vertical-nav")
.verticalnav({speed: 400,align: "left"});
});
</script></pre></p>
其实响应式布局设计就是通过识别屏幕宽度来实现的，最后贴上源码下载地址给大家
下载链接：密码：misw
如果资源对你有帮助炫酷导航源码，浏览后收获颇丰，不妨，你的鼓励是我继续写博客的最大动力
页:
[1]