简洁时尚的jQuery和CSS3侧边栏菜单插件，先来看看效果：
部分核心的代码如下：
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简洁时尚的jQuery和CSS3侧边栏菜单插件-php中文网</title><link rel="stylesheet" type="text/css" href="css/normalize.css" /><link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><link rel='stylesheet' href='http://fonts.googleapis.com/icon?family=Material+Icons' type='text/css'><link rel="stylesheet" href="dist/sidenav.min.css" type="text/css"><style type="text/css">.toggle {display: block;height: 72px;line-height: 72px;text-align: center;width: 72px;}</style>
</head>
<body><div class="htmleaf-container"><header class="htmleaf-header"><h1>简洁时尚的jQuery和CSS3侧边栏菜单插件 <span>Modern Off-canvas Accordion Navigation With jQuery</span></h1><div class="htmleaf-links"><a class="htmleaf-icon icon-htmleaf-home-outline" href="http://php.cn" title="php中文网" target="_blank"><span> php中文网</span></a><a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://php.cnjQuery" title="返回下载页" target="_blank"><span> 返回下载页</span></a></div></header><h3 style="text-align: center;">点击左侧的汉堡包按钮打开侧边栏菜单。</h3></div><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><a href="javascript:;" class="toggle" id="sidenav-toggle"><i class="material-icons">menu</i></a><script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script><script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script><script src="dist/sidenav.min.js"></script><script>$('[data-sidenav]').sidenav();</script>
</body>
</html>全部代码：简洁时尚的jQuery和CSS3侧边栏菜单插件
