DOCTYPE html>
<html lang="en">
<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"/>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/beyond.css" />
<title>beyond网站模板练习title>
head>
<body>
<div class="page-sidebar">
<ul class="nav panel-group sidebar-menu" id="nav_parent">
<li class="panel">
<a href="#">
<i class="menu-icon glyphicon glyphicon-home">i>
<span class="menu-text"> Dashboard span>
a>
li>
<li class="panel">
<a class="panel-heading collapsed" href="#collapse1" data-toggle="collapse" data-parent="#nav_parent">
<i class="menu-icon glyphicon glyphicon-fire">i>
<span class="menu-text">Elementsspan>
<i class="glyphicon glyphicon-chevron-right menu-expand">i>
a>
<ul class="nav submenu collapse" id="collapse1">
<li>
<a href="#"><span class="menu-text">Basic Elementsspan>a>
li>
<li>
<a class="panel-heading collapsed" href="#collapse2" data-toggle="collapse">
<span class="menu-text">Iconsspan>
<i class="glyphicon glyphicon-chevron-right menu-expand">i>
a>
<ul class="nav submenu collapse" id="collapse2">
<li>
<a href="#">
<i class="menu-icon glyphicon glyphicon-stats">i>
<span class="menu-text">Font Awesomespan>
a>
li>
<li>
<a href="#">
<i class="menu-icon glyphicon glyphicon-stats">i>
<span class="menu-text">Glyph Iconsspan>
a>
li>
ul>
li>
<li>
<a href="#">
<span class="menu-text">Tabs & Accordionsspan>
a>
li>
<li>
<a href="#">
<span class="menu-text">Alerts & Tooltipsspan>
a>
li>
<li>
<a href="#">
<span class="menu-text">Modals & Wellsspan>
a>
li>
ul>
li>
<li class="panel">
<a class="panel-heading collapsed" href="#collapse5" data-toggle="collapse" data-parent="#nav_parent">
<i class="menu-icon glyphicon glyphicon-link">i>
<span class="menu-text">More Pagesspan>
<i class="glyphicon glyphicon-chevron-right menu-expand">i>
a>
<ul class="nav submenu collapse" id="collapse5">
<li>
<a href="#"><span class="menu-text">Error 404span>a>
li>
<li>
<a href="#"><span class="menu-text"> Gridspan>a>
li>
<li>
<a class="panel-heading collapsed" href="#collapse6" data-toggle="collapse">
<span class="menu-text">Multi Level Menuspan>
<i class="glyphicon glyphicon-chevron-right menu-expand">i>
a>
<ul class="nav submenu collapse" id="collapse6">
<li>
<a href="#">
<i class="menu-icon glyphicon glyphicon-stats">i>
<span class="menu-text">Level 3span>
a>
li>
<li>
<a class="panel-heading collapsed" href="#collapse7" data-toggle="collapse">
<i class="menu-icon glyphicon glyphicon-stats">i>
<span class="menu-text">Level 4span>
<i class="glyphicon glyphicon-chevron-right menu-expand">i>
a>
<ul class="nav submenu collapse" id="collapse7">
<li>
<a href="#">
<i class="menu-icon glyphicon glyphicon-stats">i>
<span class="menu-text">Some Itemspan>
a>
li>
<li>
<a href="#">
<i class="menu-icon glyphicon glyphicon-stats">i>
<span class="menu-text">Another Itemspan>
a>
li>
ul>
li>
ul>
li>
ul>
li>
ul>
div>
<script type="text/javascript" src="jquery/jquery.min.js">script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js">script>
<script type="text/javascript">
$(function(){
//点击菜单箭头变化
$(".page-sidebar .sidebar-menu a").each(function(){
$(this).click(function(){
var Oele = $(this).children('.menu-expand');
if($(Oele)){
if($(Oele).hasClass('glyphicon-chevron-right')){
$(Oele).removeClass('glyphicon-chevron-right').addClass('glyphicon-chevron-down');
}else{
$(Oele).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-right');
}
}
//选中增加active
if(! $(this).hasClass('panel-heading')){
$(".page-sidebar .sidebar-menu a").removeClass('active');
$(this).addClass('active');
}
});
});
})
script>
body>
html>
css代码:
.page-sidebar{ position: absolute; top: 0; bottom: 0; width: 224px; display: block; } .page-sidebar .sidebar-menu { margin: 0; padding: 0; margin-left: 5px; } .page-sidebar:before{ content: ""; position: fixed; display: block; width: 219px; bottom: 0; top: 0; left: 5px; background-color: #fff; -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.2); -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.2); box-shadow: 0 0 10px 0 rgba(0,0,0,.2); z-index: 1; } .page-sidebar .sidebar-menu a{ color: #737373; z-index: 123; padding: 0 16px 0 7px; margin: 0; height: 38px; line-height: 36px; -webkit-text-shadow: none!important; text-shadow: none!important; font-size: 13px; } .page-sidebar .submenu{ margin: 0; padding: 0; position: relative; float: none; background-color: #fbfbfb; border: 0; box-shadow: inset 0 4px 4px -2px rgba(0,0,0,.15),inset 0 -4px 4px -2px rgba(0,0,0,.15); border-radius: 0; z-index: 123; } .page-sidebar .sidebar-menu>li>a { border-top: 1px solid #f3f3f3; } /* 菜单前面的小图标*/ .page-sidebar .sidebar-menu a .menu-icon { display: inline-block; vertical-align: middle; min-width: 30px; text-align: center; font-size: 14px; font-weight: normal; font-style: normal; margin-top: -3px; } /* 向右的箭头*/ .page-sidebar .sidebar-menu a .menu-expand{ display: inline-block; position: absolute; font-size: 10px; line-height: 10px; height: 10px; width: 10px; right: 12px; top: 15px; margin: 0; text-align: center; padding: 0; -webkit-text-shadow: none; text-shadow: none; color: #666; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; font-style: normal; font-weight: normal; } .panel-group .panel{ margin: 0; margin-top:0 !important; border: none; } /* 第一层级缩进 */ .page-sidebar .sidebar-menu .submenu>li>a { padding-left: 40px; } /* 第二层级缩进 */ .page-sidebar .sidebar-menu .submenu>li .submenu>li>a { padding-left: 50px; } .page-sidebar .sidebar-menu a:hover { color: #262626; } /* 选中增加蓝色border */ .page-sidebar .sidebar-menu .active:before { display: block; content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 4px; max-width: 4px; overflow: hidden; background-color: #2dc3e8; } .page-sidebar .sidebar-menu li a:not(.panel-heading):hover:before { display: block; content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 4px; max-width: 4px; overflow: hidden; background-color: #fb6e52; }
效果图：
点击菜单的箭头有点小问题，后面改，不是很影响。