////////////////////////////unicorn.js
/**
* 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"/>
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>表格</title>
<meta name="keywords" content="侧边导航菜单(可分组折叠)"/>
<meta name="description" content="侧边导航菜单(可分组折叠)" />
<meta name="HandheldFriendly" content="True" />
<link rel="shortcut icon" href="img/favicon.ico"/>
<!-- Bootstrap3.3.5 CSS -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="respond/1.4.2/respond.min.js"></script>
<![endif]-->
<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"><i class="glyphicon glyphicon-home"></i> <span>首页</span></a></li>
<li class="submenu" >
<a href="#"><i class="glyphicon glyphicon-th"></i> <span>表单元素</span> <span class="label">3</span></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"><i class="glyphicon glyphicon-dashboard"></i> <span>Buttons & icons</span></a></li>
<li><a href="interface.html"><i class="glyphicon glyphicon-signal"></i> <span>Interface elements</span></a></li>
<li><a href="tables.html"><i class="glyphicon glyphicon-file"></i> <span>Tables</span></a></li>
<li><a href="grid.html"><i class="glyphicon glyphicon-download"></i> <span>Grid Layout</span></a></li>
<li class="submenu">
<a href="#"><i class="glyphicon glyphicon-tags"></i> <span>Sample pages</span> <span class="label">4</span></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"><i class="glyphicon glyphicon-volume-down"></i> <span>Charts & graphs</span></a>
</li>
<li>
<a href="widgets.html"><i class="glyphicon glyphicon-edit"></i> <span>Widgets</span></a>
</li>
<li><a href="index.html"><i class="glyphicon glyphicon-home"></i> <span>首页</span></a></li>
<li class="submenu">
<a href="#"><i class="glyphicon glyphicon-th"></i> <span>表单元素</span> <span class="label">3</span></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"><i class="glyphicon glyphicon-dashboard"></i> <span>Buttons & icons</span></a></li>
<li><a href="interface.html"><i class="glyphicon glyphicon-signal"></i> <span>Interface elements</span></a></li>
<li><a href="tables.html"><i class="glyphicon glyphicon-file"></i> <span>Tables</span></a></li>
<li><a href="grid.html"><i class="glyphicon glyphicon-download"></i> <span>Grid Layout</span></a></li>
<li class="submenu">
<a href="#"><i class="glyphicon glyphicon-tags"></i> <span>Sample pages</span> <span class="label">4</span></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"><i class="glyphicon glyphicon-volume-down"></i> <span>Charts & graphs</span></a>
</li>
<li>
<a href="widgets.html"><i class="glyphicon glyphicon-edit"></i> <span>Widgets</span></a>
</li>
</ul>
</div>
<!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) -->
<script src="bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="js/unicorn.js"></script>
</body>
</html>