炫酷导航源码 研究响应式的时候、发现了国外的这么一个例子

2651881212

今天在研究响应式的时候，从国外找了一个这样的例子，实现了响应式导航。我个人认为非常好。现在我将与您分享。我希望它对每个人都有帮助。看看Demo运行的效果炫酷导航源码，然后哥们，你可以决定是否下载这个Demo 上面的效果，电脑端主要是通过CSS实现的，所以不会出现JS没加载，菜单打不开的现象。然后通过js获取手机端的菜单天外神坛源码网，主要使用js包-maps.js。 核心 CSS 代码（屏幕宽度小于 768px 时执行）

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

JS实现响应式布局

其实响应式布局设计就是通过识别屏幕宽度来实现的，最后贴上源码下载地址给大家 下载链接：密码​​：misw 如果资源对你有帮助炫酷导航源码，浏览后收获颇丰，不妨，你的鼓励是我继续写博客的最大动力