插件描述：sidenav是一款和绚丽的垂直菜单,样式简洁时尚的jQuery和CSS3侧边栏菜单插件。
直接部署即可，文件夹index.html直接打开可查看效果图，js和css文件都在对应文件夹中
sidenav
sidenav是一款简洁时尚的jQuery和CSS3侧边栏菜单插件。该侧边栏插件具有手风琴的多级菜单效果，使用简单，效果简洁大方。
使用方法
在页面中引入sidenav.min.css、jquery和sidenav.min.js文件。
1 2 3 | <link rel="stylesheet" href="dist/sidenav.min.css" type="text/css"><script src="jquery.min.js"></script><script src="dist/sidenav.min.js"></script> |
HTML结构
该侧边栏菜单的HTML结构如下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | <nav class="sidenav" data-sidenav data-sidenav-toggle="#sidenav-toggle"> <div class="sidenav-brand"> BRAND </div> <div class="sidenav-header"> Section Header <small>secondary text</small> </div> <ul class="sidenav-menu"> <li> <a href="javascript:;" data-sidenav-dropdown-toggle class="active"> <span class="sidenav-link-icon"> <i class="material-icons">store</i> </span> <span class="sidenav-link-title">Lorem ipsum</span> <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_down</i> </span> <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_up</i> </span> </a> <ul class="sidenav-dropdown" data-sidenav-dropdown> <li><a href="javascript:;">Dolor sit amet</a></li> <li><a href="javascript:;">Consectetur adipisicing</a></li> <li><a href="javascript:;">Elit</a></li> </ul> </li> <li> <a href="javascript:;" data-sidenav-dropdown-toggle> <span class="sidenav-link-icon"> <i class="material-icons">payment</i> </span> <span class="sidenav-link-title">Sed do eiusmod</span> <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_down</i> </span> <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_up</i> </span> </a> <ul class="sidenav-dropdown" data-sidenav-dropdown> <li><a href="javascript:;">Tempor incididunt</a></li> <li><a href="javascript:;">Labore</a></li> </ul> </li> <li> <a href="javascript:;" data-sidenav-dropdown-toggle> <span class="sidenav-link-icon"> <i class="material-icons">shopping_cart</i> </span> <span class="sidenav-link-title">Dolore magna</span> <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_down</i> </span> <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_up</i> </span> </a> <ul class="sidenav-dropdown" data-sidenav-dropdown> <li><a href="javascript:;">Aliqua</a></li> <li><a href="javascript:;">Exercitation</a></li> <li><a href="javascript:;">Minim veniam</a></li> </ul> </li> <li> <a href="javascript:;"> <span class="sidenav-link-icon"> <i class="material-icons">assignment_ind</i> </span> <span class="sidenav-link-title">Nostrud ullamco</span> </a> </li> <li> <a href="javascript:;"> <span class="sidenav-link-icon"> <i class="material-icons">alarm</i> </span> <span class="sidenav-link-title">Commodo</span> </a> </li> </ul> <div class="sidenav-header"> Another Section Header </div> <ul class="sidenav-menu"> <li> <a href="javascript:;" data-sidenav-dropdown-toggle> <span class="sidenav-link-icon"> <i class="material-icons">date_range</i> </span> <span class="sidenav-link-title">Reprehenderit</span> <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_down</i> </span> <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_up</i> </span> </a> <ul class="sidenav-dropdown" data-sidenav-dropdown> <li><a href="javascript:;">Voluptate</a></li> <li><a href="javascript:;">Excepteur</a></li> </ul> </li> <li> <a href="javascript:;"> <span class="sidenav-link-icon"> <i class="material-icons">backup</i> </span> <span class="sidenav-link-title">Occaecat</span> </a> </li> <li> <a href="javascript:;"> <span class="sidenav-link-icon"> <i class="material-icons">settings</i> </span> <span class="sidenav-link-title">Deserunt</span> </a> </li> </ul></nav> |
使用下面的代码来创建一个汉堡包按钮，用于打开侧边栏菜单。
1 2 3 | <a href="javascript:;" class="toggle" id="sidenav-toggle"> <i class="material-icons">menu</i></a> |
初始化插件
在页面DOM元素加载完毕之后，通过下面的方法来初始化该侧边栏菜单。
1 | $('[data-sidenav]').sidenav(); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jquery模糊搜索查询
- 下一个特效： js二维码生成插件qrious