`

基于bootstrap的后台二级垂直菜单

阅读更多

最近在项目中使用到了一个垂直的二级菜单,该菜单基于bootstrap开发,主要用到了bootstrap和font-awesome字体图标;可直接应用于后台系统的菜单展示。

页面效果如图:



 菜单美观大方,非常适合做后台管理系统的菜单展示。

 部分代码

<div class="row-fluid">
		<div class="span12">
			<h1>基于bootstrap的二级垂直菜单</h1>
			<div class="row-fluid">
				<div class="offset1 span2">
					<!--Sidebar content-->
					<div class="sidebar-menu">
						<a href="#userMeun" class="nav-header menu-first collapsed" data-toggle="collapse"><i class="icon-user-md icon-large"></i> 用户管理</a>
						<ul id="userMeun" class="nav nav-list collapse menu-second">
							<li><a href="#"><i class="icon-user"></i> 增加用户</a></li>
							<li><a href="#"><i class="icon-edit"></i> 修改用户</a></li>
							<li><a href="#"><i class="icon-trash"></i> 删除用户</a></li>
							<li><a href="#"><i class="icon-list"></i> 用户列表</a></li>
							
						</ul>
						<a href="#articleMenu" class="nav-header menu-first collapsed" data-toggle="collapse"><i class="icon-book icon-large"></i> 文章管理</a>
						<ul id="articleMenu" class="nav nav-list collapse menu-second">
							<li><a href="#"><i class="icon-pencil"></i> 添加文章</a></li>
							<li><a href="#"><i class="icon-list-alt"></i> 文章列表</a></li>
						</ul>
					</div>

				</div>
			</div>
		</div>	
	</div>

 

想要完整的源码请访问:http://download.csdn.net/detail/wozywei/9401642 

 

  • 大小: 21.7 KB
0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics