<!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>1</title>
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/jquery.mCustomScrollbar.min.css" />
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
<div class="page-wrapper">
<nav id="sidebar" class="sidebar-wrapper">
<div class="sidebar-content">
<a href="#" id="toggle-sidebar"><img src="assets/img/列表.png" width="20" class="fa fa-bars"></a>
<div class="sidebar-brand">
<a href="#">pro sidebar</a>
</div>
<div class="sidebar-header">
<div class="user-pic">
<img class="img-responsive img-rounded" src="assets/img/user.jpg" alt="">
</div>
<div class="user-info">
<span class="user-name">Jhon <strong>Smith</strong></span>
<span class="user-role">Administrator</span>
<div class="user-status">
<a href="#"><span class="label label-success">Online</span></a>
</div>
</div>
</div><!-- sidebar-header -->
<div class="sidebar-search">
<div>
<div class="input-group">
<input type="text" class="form-control search-menu" placeholder="Search for...">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
</div>
</div>
</div><!-- sidebar-search -->
<div class="sidebar-menu">
<ul>
<li class="header-menu"><span>Dropdown menu</span></li>
<li class="sidebar-dropdown">
<a href="#" ><i class="fa fa-tv"></i><span>Menu 1</span><span class="label label-danger">New</span></a>
<div class="sidebar-submenu">
<ul>
<li><a href="#">submenu 1 <span class="label label-success">10</span></a> </li>
<li><a href="#">submenu 2</a></li>
<li><a href="#">submenu 3</a></li>
<li><a href="#">submenu 4</a></li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#"><i class="fa fa-photo"></i><span>Menu 2</span><span class="badge">3</span></a>
<div class="sidebar-submenu">
<ul>
<li><a href="#">submenu 1 <span class="badge">2</span></a></li>
<li><a href="#">submenu 2</a></li>
<li><a href="#">submenu 3</a></li>
<li><a href="#">submenu 4</a></li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#"><i class="fa fa-bar-chart-o"></i><span>Menu 3</span></a>
<div class="sidebar-submenu">
<ul>
<li><a href="#">submenu 1</a></li>
<li><a href="#">submenu 2</a></li>
<li><a href="#">submenu 3</a></li>
<li><a href="#">submenu 4</a></li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#"><i class="fa fa-diamond"></i><span>Menu 4</span></a>
<div class="sidebar-submenu">
<ul>
<li><a href="#">submenu 1</a></li>
<li><a href="#">submenu 2</a></li>
<li><a href="#">submenu 3</a></li>
<li><a href="#">submenu 4</a></li>
</ul>
</div>
</li>
<li class="header-menu"><span>Simple menu</span></li>
<li><a href="#"><i class="fa fa-tv"></i><span>Menu 1</span></a></li>
<li><a href="#"><i class="fa fa-photo"></i><span>Menu 2</span></a></li>
<li><a href="#"><i class="fa fa-bar-chart-o"></i><span>Menu 3</span></a></li>
<li><a href="#"><i class="fa fa-diamond"></i><span>Menu 4</span></a></li>
</ul>
</div><!-- sidebar-menu -->
</div><!-- sidebar-content -->
<div class="sidebar-footer">
<a href="#"><i class="fa fa-bell"></i><span class="label label-warning notification">3</span></a>
<a href="#"><i class="fa fa-envelope"></i><span class="label label-success notification">7</span></a>
<a href="#"><i class="fa fa-gear"></i></a>
<a href="#"><i class="fa fa-power-off"></i></a>
</div>
</nav><!-- sidebar-wrapper -->
<main class="page-content">
<div class="container-fluid">
<header class="htmleaf-header">
</header>
<h1 style="text-align:center;">Pro sidebar template</h1>
<h3 style="text-align:center;">点击左上角的 <i class="fa fa-bars"></i> 按钮来查看侧边栏效果</h3>
</div>
</main><!-- page-content" -->
</div><!-- page-wrapper -->
<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="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="assets/js//jquery.mCustomScrollbar.concat.min.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
用JQuery实现web左侧菜单的实现
共16个文件
css:4个
js:3个
html:2个
需积分: 2 0 下载量 50 浏览量
2024-01-08
18:28:22
上传
评论
收藏 75KB ZIP 举报
温馨提示
用JQuery实现web左侧菜单的实现
资源推荐
资源详情
资源评论
收起资源包目录
左侧菜单栏.zip (16个子文件)
左侧菜单栏
jQuery之家.url 268B
assets
js
jquery.mCustomScrollbar.concat.min.js 44KB
custom.js 1KB
img
列表.png 3KB
user.jpg 23KB
css
custom.css 7KB
jquery.mCustomScrollbar.min.css 42KB
js
jquery-1.11.0.min.js 94KB
readme.html 865B
css
normalize.css 2KB
htmleaf-demo.css 6KB
index.html 7KB
fonts
icomoon.woff 1KB
icomoon.svg 2KB
icomoon.eot 2KB
icomoon.ttf 1KB
共 16 条
- 1
资源评论
山山4332
- 粉丝: 620
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功