首页 > 代码库 > 一款基于jquery的侧边栏导航
一款基于jquery的侧边栏导航
之前为大家介绍了好多导航菜单，今天给大家分享一款基于jquery的侧边栏导航。这款导航侧边滑出，适合放在手机网页或webapp。一看下实现的效果图：
在线预览 源码下载
实现的代码。
html代码：
<div style="position: relative; overflow: hidden;"> <div class="top"> <img src="menu.png" height="35" class="menu_btn" align="left" /> <font style="padding-left: 10px;">Material design animation</font> </div> <div id="grey_back"> </div> <div id="menu_smartphone" class="menu_mobile_app" align="left"> <ul style="overflow-y: auto;"> <div class="background_profil"> </div> <div class="pics_profil"> </div> <div class="name_profil"> www.wifeo.com<font style="font-weight: 300; color: #999999;">/code</font></div> <li><a href="#">MENU 1</a></li> <li><a href="#">MENU 2</a></li> <li><a href="#">MENU 3</a></li> <li><a href="#">MENU 4</a></li> </ul> </div> <div class="card"> </div> <div class="card"> </div> </div>
css代码：
#menu_smartphone { height: 100%; position: absolute; background: #ffffff; top: 0; bottom: 0; left: -570px; width: 570px; } #menu_smartphone ul { padding: 0; margin: 0; list-style: none; color: #999999; } #menu_smartphone ul li { height: 70px; padding-left: 10px; line-height: 70px; } #menu_smartphone ul li:hover { background: #f7f7f7; } #menu_smartphone ul li a { color: #999999; text-decoration: none; font-family: ‘Roboto‘; font-weight: 400; font-size: 25px; } .background_profil { background-image: url(fond.png); height: 240px; } .pics_profil { width: 130px; height: 130px; border-radius: 50%; background-size: cover; background-image: url(welcome.png); margin-top: -65px; } .name_profil { font-size: 37px; font-family: ‘Roboto‘; font-weight: 400; color: #666666; margin-top: -50px; margin-left: 140px; margin-bottom: 40px; } .top { background-color: #e51c23; height: 70px; position: absolute; top: 0px; width: 100%; line-height: 70px; color: #ffffff; font-size: 20px; font-weight: 400; font-family: ‘Roboto‘; padding-left: 10px; text-align: left; } #grey_back { display: none; background-color: #000000; opacity: 0.7; width: 100%; height: 100%; position: absolute; top: 0; } .card { width: 90%; height: 300px; background-color: #ffffff; margin: 10px; padding: 20px; color: #666666; font-weight: 300; font-size: 36px; text-align: center; font-family: ‘Roboto‘; box-shadow: 0 0 2px #999999; } .menu_btn { cursor: pointer; left: 0px; margin-top: 16px; }
js代码：
$(document).ready(function () { var isMenuOpen = false; $(‘.menu_btn‘).click(function () { if (isMenuOpen == false) { $("#menu_smartphone").clearQueue().animate({ left: ‘0px‘ }) $("#grey_back").fadeIn(‘fast‘); $(this).fadeOut(200); $(".close").fadeIn(300); isMenuOpen = true; } }); $(‘#grey_back‘).click(function () { if (isMenuOpen == true) { $("#menu_smartphone").clearQueue().animate({ left: ‘-570px‘ }) $("#page").clearQueue().animate({ "margin-left": ‘0px‘ }) $("#grey_back").fadeOut(‘fast‘); $(this).fadeOut(200); $(".menu_btn").fadeIn(300); isMenuOpen = false; } }); });
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/9180
一款基于jquery的侧边栏导航
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。