Bootstrap Frontend Demo:
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Unicorn Admin</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- <link rel="stylesheet" href="css/bootstrap-responsive.min.css" /> -->
<link rel="stylesheet" href="css/unicorn.main.css" />
<link rel="stylesheet" href="css/unicorn.myred.css" class="skin-color" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<frameset rows="60,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame"/>
<frameset cols="220,*" frameborder="no" border="0" framespacing="0">
<frame src="left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"/>
<frame src="" name="mainFrame" id="mainFrame"/>
</frameset>
</frameset>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Unicorn Admin</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="css/unicorn.main.css" />
<link rel="stylesheet" href="css/unicorn.myred.css" class="skin-color" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="header">
<img src="hsbc.jpg">
</div>
<div id="user-nav" class="navbar navbar-inverse">
<ul class="nav btn-group">
<li class="btn btn-inverse"><a title="" href="#"><i class="icon icon-user"></i> <span class="text">Sowon S Y TANG/HBAP/HSBC</span></a></li>
<li class="btn btn-inverse"><a title="" href="login.html"><i class="icon icon-share-alt"></i> <span class="text">Logout</span></a></li>
</ul>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.custom.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/jquery.wizard.js"></script>
</body>
</html>
<script type="text/javascript">
$(function(){
//set menu link
var menuLink = {};
menuLink["menu_home"] = "http://www.ifeng.com/";
menuLink["menu_form_sub_1"] = "form1.html";
menuLink["menu_form_sub_2"] = "form2.html";
menuLink["menu_form_sub_3"] = "http://www.baidu.com";
menuLink["menu_button"] = "buttons.html";
$("a[id^=menu_]").click(function(e){
e.preventDefault();
$("#ContractId").prop("src",menuLink[$(this).prop("id")]);
});
//set active
$("#sidebar ul li a").click(function(e){
e.preventDefault();
//alert($(this).prop("id"))
var parent = $(this).parent();
if(parent.parent().parent().hasClass("submenu")){
$("#sidebar ul li").removeClass("active open");
parent.parent().parent().addClass("active open");
parent.parent().find("li").removeClass("active");
parent.addClass("active");
return true;
}
if( parent.hasClass("submenu")){
parent.addClass("open");
return true;
}
$("#sidebar ul li").removeClass("active open");
parent.addClass("active");
});
});
</script>
<style type="text/css">
html,body{
height:100%;
}
#content{
width: 100%;
height: 100%;
background: none;
}
iframe{
width: 100%;
height: 100%;
}
#header img{
margin-top: 10px;
}
#user-nav ul li a{
color: #F2F2F2
}
</style>left.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>HRR & CWA</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- <link rel="stylesheet" href="css/bootstrap-responsive.min.css" /> -->
<link rel="stylesheet" href="css/unicorn.main.css" />
<link rel="stylesheet" href="css/unicorn.myred.css" class="skin-color" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<!-- http://v2.bootcss.com/base-css.html -->
<div id="sidebar">
<ul>
<li><a id="menu_home" href="#" ><i class="icon icon-home"></i> <span>Home</span></a></li>
<li class="submenu">
<a href="#"><i class="icon icon-th-list"></i> <span>CWA Request</span> </a>
<ul>
<li><a id="menu_form_sub_1" href="#">Request</a></li>
<li><a id="menu_form_sub_2" href="#">View1</a></li>
<li class=""><a id="menu_form_sub_3" href="#">View2</a></li>
</ul>
</li>
<li class="submenu">
<a href="#"><i class="icon icon-th-list"></i> <span>HRR Request</span> </a>
<ul>
<li><a id="menu_form_sub_1" href="#">Request</a></li>
<li><a id="menu_form_sub_2" href="#">View1</a></li>
<li class=""><a id="menu_form_sub_3" href="#">View2</a></li>
</ul>
</li>
<li><a id="menu_home" href="#" ><i class="icon icon-home"></i> <span>HRR Approved Customer</span></a></li>
<li><a id="menu_home" href="#" ><i class="icon icon-home"></i> <span>HRR MTM Amount</span></a></li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.custom.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/jquery.wizard.js"></script>
</body>
</html>
<script type="text/javascript">
$(function(){
//set menu link
var menuLink = {};
menuLink["menu_home"] = "http://www.ifeng.com/";
menuLink["menu_form_sub_1"] = "form1.html";
menuLink["menu_form_sub_2"] = "form2.html";
menuLink["menu_form_sub_3"] = "http://www.baidu.com";
menuLink["menu_button"] = "buttons.html";
$("a[id^=menu_]").click(function(e){
e.preventDefault();
self.parent.frames["mainFrame"].location = menuLink[$(this).prop("id")];
});
//set active
$("#sidebar ul li a").click(function(e){
e.preventDefault();
var parent = $(this).parent();
if(parent.parent().parent().hasClass("submenu")){
$("#sidebar ul li").removeClass("active open");
parent.parent().parent().addClass("active open");
parent.parent().find("li").removeClass("active");
parent.addClass("active");
return true;
}
if( parent.hasClass("submenu")){
$(".submenu").removeClass("open");
parent.addClass("open");
return true;
}
$("#sidebar ul li").removeClass("active open");
parent.addClass("active");
});
});
</script>
<style type="text/css">
html,body{
height:100%;
}
#content{
width: 100%;
height: 100%;
background: none;
}
iframe{
width: 100%;
height: 100%;
}
#header img{
margin-top: 10px;
}
</style>unicorn.main.css
/**
* Unicorn Admin Template
* Diablo9983 -> diablo9983@gmail.com
**/
* {
outline:none !important;
-moz-outline: none !important;
}
/* Main */
body {
overflow-x: hidden;
/*margin-top: -9px;*//**/
}
a:hover {
text-decoration: none;
}
/* Header */
#header {
height: 55px;
position: relative;
width: 100%;
z-index: -9;
}
/* Top user navigation */
#user-nav {
position: absolute;
right: 30px;
top: 5px;
z-index: 20;
margin: 0;
}
#user-nav > ul {
margin: 0;
padding: 0;
list-style: none;
}
#user-nav > ul > li {
float: left;
list-style-type: none;
margin: 0;
position: relative;
padding: 0;
}
#user-nav > ul > li > a {
padding: 5px 10px;
display: block;
font-size: 10px;
}
#user-nav > ul > li > a:hover, #user-nav > ul > li.open > a {
color: #ffffff;
}
#user-nav > ul > li > a > i, #sidebar li a i {
vertical-align: top;
background-image: url('../img/glyphicons-halflings-white.png');
opacity: .5;
margin-top: 2px;
}
#user-nav > ul > li > a:hover > i, #user-nav > ul > li.open > a > i {
opacity: 1;
}
#user-nav > ul > li > a > .label {
vertical-align: middle;
padding: 1px 4px 1px;
margin: -2px 4px 0;
display: inline-block;
}
#user-nav > ul ul > li > a {
text-align: left;
text-shadow: 0 1px 0 #ffffff;
}
#user-nav > ul ul > li > a:hover {
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
/* Sidebar Navigation */
#sidebar {
display: block;
float: left;
position: relative;
width: 220px;
z-index: 16;
}
#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: #F2F2F2;
}
#sidebar > ul > li > a > i {
margin-right: 10px;
}
#sidebar > ul > li.active > a {
background: 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 25px;
display: block;
color: #F2F2F2;
}
#sidebar > ul ul li:first-child a {
border-top: 0;
}
#sidebar > ul ul li:last-child a {
border-bottom: 0;
}
unicorn.myred.css
/**
* Unicorn Admin Template
* Diablo9983 -> diablo9983@gmail.com
**/
body {
background-color: #FFF;
}
#header {
border-bottom: 5px solid #FE1706; /*深红*/
}
#user-nav .btn-inverse {
background-color: #FA1100;
border-top-color: #FE382A;
background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#FE2F20), to(#FE1706));
}
#sidebar > ul {
background-color: #FE1706; /*深红*/
border-bottom: 1px solid #FE382A; /*淡红*/
}
#sidebar > ul > li {
border-top: 1px solid #FE382A; /*淡红*/
border-bottom: 1px solid #FA1100; /*中红*/
}
#sidebar > ul > li.active {
background-color: #FF0000; /**/
}
#sidebar > ul > li.open.submenu > a {
border-bottom: 1px solid #FE2A1B;/**/
}
#sidebar > ul > li.open.active.submenu > a {
border-bottom: 1px solid #FE2A1B;/**/
}
#sidebar > ul > li > a > .label {
background-color: #431B1B;
}
#sidebar > ul > li > a:hover {
background-color: #FF0000;/**/
}
#sidebar > ul ul {
border-top: 1px solid #FE2A1B;
background-color: #EF1101;/**/
}
#sidebar > ul ul li a {
border-top: 1px solid #DF1001;/**/
border-bottom: 1px solid #FE2A1B;
}
#sidebar > ul ul li a:hover, #sidebar > ul ul li.active a {
color: #F2F2F2;
background-color: #FF0000;/**/
}
.dropdown-menu li a:hover, .dropdown-menu .active a, .dropdown-menu .active a:hover {
background-color: #FF0000;/**/
color: #eeeeee;
}
8745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
