bootstrap菜单代码

////////////////////////////unicorn.js

/**

* Unicorn Admin Template
* Diablo9983 -> [email protected]
**/
$(document).ready(function(){
// === Sidebar navigation === //
$('.submenu > a').click(function(e)
{
e.preventDefault();
var submenu = $(this).siblings('ul');
var li = $(this).parents('li');
var submenus = $('#sidebar li.submenu ul');
var submenus_parents = $('#sidebar li.submenu');
if(li.hasClass('open'))
{
if(($(window).width() > 768) || ($(window).width() < 479)) {
submenu.hide();
} else {
submenu.hide();
}
li.removeClass('open');
} else
{
if(($(window).width() > 768) || ($(window).width() < 479)) {
//submenus.hide();
submenu.show();
} else {
//submenus.hide();
submenu.show();
}
//submenus_parents.removeClass('open');
li.addClass('open');
}
});

var ul = $('#sidebar > ul');

$('#sidebar > a').click(function(e)
{
e.preventDefault();
var sidebar = $('#sidebar');
if(sidebar.hasClass('open'))
{
sidebar.removeClass('open');
ul.hide();
} else
{
sidebar.addClass('open');
ul.show();
}
});

$('#sidebar li.submenu ul').show();
$('#sidebar li.submenu').addClass('open');

$(window).resize(function(){
$('#sidebar').height($(window).height()-2);
});
$('#sidebar').height($(window).height()-2);
});

////////////////////////////////////////////////////////////////unicorn.main.css

/**
* Unicorn Admin Template
* Diablo9983 -> [email protected]
**/
* {
outline:none !important;
-moz-outline: none !important;
}
/* Main */
/**
body {
overflow-x: hidden;
margin-top: -9px;
}**/

/* Sidebar Navigation */
#sidebar {
display: block;
float: left;
position: relative;
width: 220px;
z-index: 16;
border: 1px solid #eeeeee;
}
#sidebar a {
text-decoration: none;
}
#sidebar a:hover {
text-decoration: none;
}
#sidebar > ul {
list-style: none;
margin: 10px 0 0;
padding: 0;
position: absolute;
width: 220px;
}
#sidebar > ul > li {
display: block;
position: relative;
}

#sidebar > ul > li.active {
/**box-shadow: 0 2px 4px rgba(0,0,0,0.2) inset;**/
}

#sidebar > ul > li > a {
padding: 10px 0 10px 15px;
display: block;
color: #000000;
}

#sidebar > ul > li > a > i {
margin-right: 10px;
}

#sidebar > ul > li.active > a {
background: #000000 url("../img/menu-active.png") no-repeat scroll right center transparent !important;
}

#sidebar > ul > li > a > .label {
margin: 0 20px 0 0;
float: right;
padding: 3px 5px 2px;
box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset, 0 1px 0 rgba(255,255,255,0.2);
}

#sidebar > ul ul {
display: none;
margin: 0;
padding: 0;
/**box-shadow: 0 0 3px rgba(0,0,0,0.5) inset;**/
}
#sidebar > ul li.open ul {
display: block;
}
#sidebar > ul ul li a{
padding: 10px 0 10px 40px;
display: block;
color: #777777;
}

#sidebar > ul ul li:first-child a {
border-top: 0;
}
#sidebar > ul ul li:last-child a {
border-bottom: 0;
}

/* Content */
#content {
background: none repeat scroll 0 0 #eeeeee;
margin-left: 220px;
margin-right: 0;
padding-bottom: 25px;
position: relative;
min-height: 500px;
width: auto;

border-top-left-radius: 8px;
}

/* Responsive design */
@media (max-width: 480px) {

#content {
margin-left: 0 !important;
border-top-left-radius: 0;
}

#sidebar {
float: none;
width: 100% !important;
}
#sidebar > a {
padding: 7px 20px 7px 15px;
box-shadow: 0 1px 0 #666666;
margin-bottom: 1px;
display: block !important;
text-transform: uppercase;
color: #eeeeee;
font-size: 10px;
}
#sidebar > a > i {
margin-right: 10px;
background-image: url('../img/glyphicons-halflings-white.png');
}
#sidebar > ul {
display: none;
margin: -2px 0 0 !important;
width: 100% !important;
box-shadow: 0 6px 6px rgba(0,0,0,0.4);
}
#sidebar > ul > li.active > a {
background: none !important;
}
#sidebar > ul > li > a > span {
display: inline !important;
}

}

@media (min-width: 481px) and (max-width: 767px) {

#sidebar, #sidebar > ul {
width: 43px;
}
#sidebar > ul ul {
display: none;
position: absolute;
left:50px;
top: 0;
min-width: 150px;
box-shadow: 0 1px 5px rgba(0,0,0,0.7);
/**border-radius: 5px;**/
list-style: none;
}
#sidebar > ul ul li a {
white-space: nowrap;
padding: 10px 25px;
}
#sidebar > ul ul:before {
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
content: "";
display: inline-block;
left: -6px;
position: absolute;
top: 11px;
}
#sidebar > ul ul:after {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
content: "";
display: inline-block;
left: -5px;
position: absolute;
top: 12px;
}
#sidebar > a {
display: none !important;
}
#sidebar > ul > li.open.submenu > a {
border-bottom: none !important;
}
#sidebar > ul > li > a > span {
display: none;
}
#content {
margin-left: 43px;
}
}
@media (max-width: 600px) {

}
@media (max-width: 767px) {
body {
padding: 0 !important;
}

}
@media (min-width: 768px) and (max-width: 979px) {

}
@media (max-width: 979px) {

}

/**
* Unicorn Admin Template
* Diablo9983 -> [email protected]
**/
body {
background-color: #ffffff;
}

#sidebar > ul {
/**border-top: 1px solid #661D1D;
border-bottom: 1px solid #7B3E3E;**/

}
#sidebar > ul > li {
/**border-top: 1px solid #7B3E3E;
border-bottom: 1px solid #661D1D;**/
}
#sidebar > ul > li.active {
background-color: #eeeeee;
background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#eeeeee), to(#eeeeee));
background-image: -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 100%);
background-image: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%);
background-image: -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 100%);
background-image: -o-linear-gradient(top, #eeeeee 0%, #eeeeee 100%);
background-image: linear-gradient(top, #eeeeee 0%, #eeeeee 100%);
}

#sidebar > ul > li.open.submenu > a {
/**border-bottom: 1px solid #661D1D;**/
}
#sidebar > ul > li.open.active.submenu > a {
/**border-bottom: 1px solid #661D1D;**/
}
#sidebar > ul > li > a > .label {
background-color: #BA1E20;
}
#sidebar > ul > li > a:hover {
background-color: #eeeeee;
}
#sidebar > ul ul {
/**border-top: 1px solid #7B3E3E;**/
background-color: #ffffff;
}
#sidebar > ul ul li a {
/**border-top: 1px solid #5D2B2B;
border-bottom: 1px solid #431F1F;**/
}
#sidebar > ul ul li a:hover, #sidebar > ul ul li.active a {
color: #000000;
background-color: #eeeeee;
}

@media (max-width: 480px) {
#sidebar > a {
background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#532424), to(#431B1B));
background-image: -webkit-linear-gradient(top, #532424 0%, #431B1B 100%);
background-image: -moz-linear-gradient(top, #532424 0%, #431B1B 100%);
background-image: -ms-linear-gradient(top, #532424 0%, #431B1B 100%);
background-image: -o-linear-gradient(top, #532424 0%, #431B1B 100%);
background-image: linear-gradient(top, #532424 0%, #431B1B 100%);
border-bottom: 1px solid #301616;
}
#sidebar > ul {
background-color: #ffffff;
}
}
@media (min-width: 481px) and (max-width: 767px) {
#sidebar > ul ul:before {
/**border-right: 7px solid rgba(0, 0, 0, 0.2);**/
}
#sidebar > ul ul:after {
/**border-right: 6px solid #13152A;**/
}
}

////////////////////////////////////////////////////////////////////////////////////menu.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<title>表格</title>
<meta name="keywords" content="侧边导航菜单(可分组折叠)"/>
<meta name="description" content="侧边导航菜单(可分组折叠)" />
<meta name="HandheldFriendly" content="True" />
<link rel="shortcut icon" href="img/favicon.ico"/>

<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>



<link href="css/unicorn.main.css" rel="stylesheet"/>
<link href="css/unicorn.red.css" rel="stylesheet"/>
<style type="text/css">

/*滚动条整体部分,必须要设置*/
#sidebar::-webkit-scrollbar{
width: 5px;
height: 10px;
background-color: #cccccc;
}
/*滚动条的轨道*/
#sidebar::-webkit-scrollbar-track{
box-shadow: inset 0 0 5px rgba(0,0,0,.3);
background-color: #cccccc;
}
/*滚动条的滑块按钮*/
#sidebar::-webkit-scrollbar-thumb{
border-radius: 0px;
background-color: #eeeeee;
box-shadow: inset 0 0 5px #000;
}
/*滚动条的上下两端的按钮*/
#sidebar::-webkit-scrollbar-button{
height: 10px;
background-color: #eeeeee;
}
#sidebar{
overflow-x:hidden;
overflow-y:auto;
}

</style>
</head>

<body>

<div id="sidebar">

<ul>
<li ><a href="index.html"> 首页</a></li>
<li class="submenu" >
<a href="#"> 表单元素 3</a>
<ul>
<li class="active"><a href="form-common.html">Common elements</a></li>
<li><a href="form-validation.html">Validation</a></li>
<li><a href="form-wizard.html">Wizard</a></li>
</ul>
</li>
<li><a href="buttons.html"> Buttons & icons</a></li>
<li><a href="interface.html"> Interface elements</a></li>
<li><a href="tables.html"> Tables</a></li>
<li><a href="grid.html"> Grid Layout</a></li>
<li class="submenu">
<a href="#"> Sample pages 4</a>
<ul>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="chat.html">Support chat</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</li>
<li>
<a href="charts.html"> Charts & graphs</a>
</li>
<li>
<a href="widgets.html"> Widgets</a>
</li>
<li><a href="index.html"> 首页</a></li>
<li class="submenu">
<a href="#"> 表单元素 3</a>
<ul>
<li><a href="form-common.html">Common elements</a></li>
<li><a href="form-validation.html">Validation</a></li>
<li><a href="form-wizard.html">Wizard</a></li>
</ul>
</li>
<li><a href="buttons.html"> Buttons & icons</a></li>
<li><a href="interface.html"> Interface elements</a></li>
<li><a href="tables.html"> Tables</a></li>
<li><a href="grid.html"> Grid Layout</a></li>
<li class="submenu">
<a href="#"> Sample pages 4</a>
<ul>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="chat.html">Support chat</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</li>
<li>
<a href="charts.html"> Charts & graphs</a>
</li>
<li>
<a href="widgets.html"> Widgets</a>
</li>
</ul>

</div>

<script src="bootstrap-3.3.7-dist/js/jquery.min.js"></script>

<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="js/unicorn.js"></script>

</body>

</html>

eyugod

发布了36 篇原创文章 · 获赞 5 · 访问量 4万+

私信关注

猜你喜欢