jQuery响应式垂直导航菜单_炫酷响应式菜单例子
2014-12-01 13:02:08  By: shinyuu

• shinyuu
• JQuery教程
• 2
• 8937
• 6

今天在研究响应式的时候、发现了国外的这么一个例子、实现了响应式的导航、个人觉得非常不错、现在分享给大家、希望对大家有帮助、话不多说、先一起来看看整个Demo运行的效果吧、然后哥们你再决定要不要下载这个Demo

上面的效果、电脑端主要是通过CSS实现的、所以不会存在JS没有加载完、菜单打不开的现象、那么手机端的菜单是通过JS来的、主要运用了google-maps.js这个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实现响应式布局

<script>
$(document).ready(function(){
$(".vertical-nav")
	.verticalnav({speed: 400,align: "left"});
});
</script>

其实响应式布局设计也就是通过识别屏幕的宽度来实现的、最后给大家贴上源代码下载地址

下载链接: http://dwtedx.com/download.html?bdkey=s/1sj8Z9ql 密码: misw

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛