我创建了一个管理面板。管理面板有一个导航菜单。导航有ul和li元素。
好的，现在管理用户已经显示使用和插入用户。
这是我的问题。当我点击管理用户时，它不会显示li显示用户和插入用户。
如何解决此问题，单击“管理用户”时显示“显示使用”和“插入用户”？
$(document).ready(function () {
$(".navigation-icon").click(function () {
$(".navigation").toggleClass('navigation-open');
$('body').toggleClass('nav-open');
});
});
$(window).on("load resize ", function () {
var scrollWidth = $('.tbl-content').width() - $('.tbl-content table').width();
$('.tbl-header').css({ 'padding-right': scrollWidth });
}).resize();
$(document).ready(function () {
$('.has-sub').click(function () {
$(this).toggleClass('tap');
});
});body {
padding: 0;
margin: 0;
background-color: #ffffff;
}
*, *:after, *:before {
box-sizing: inherit;
padding: 0;
margin: 0;
}
.top-header {
width: 1279px;
height: 57px;
background-color: #EDEDED;
float: right;
position: relative;
transition: all 800ms cubic-bezier(.9,0,.33,1);
border-bottom-style: solid;
border-bottom-color: black;
border-bottom-width: 1px;
}
.right-col {
float: right;
background-color: #F7F7F7;
width: 1279px;
height: 1721px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation {
width: 69px;
height: 1721px;
background-color: #1b72b4;
float: left;
display: block;
border-right-style: solid;
border-right-color: #000000;
border-right-width: 1px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.logo {
width: 65px;
height: 65px;
background-color: white;
display: block;
border-radius: 50%;
margin-top: 5px;
}
.logo img {
width: 65px;
height: 65px;
display: block;
float: left;
}
.title-logo {
opacity: 0;
visibility: hidden;
position: absolute;
margin-top: 20px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.title-logo .kala {
color: red;
}
.profile {
position: absolute;
margin-top: 20px;
height: 180px;
width: 230px;
text-align: right;
background-color: #34485C;
visibility: hidden;
opacity: 0;
transition: all 200ms cubic-bezier(.9,0,.33,1);
}
.profile img {
margin-top: 10px;
width: 100px;
height: 100px;
float: right;
margin-right: 70px;
border: 5px solid #FFFFFF;
z-index: 1000;
}
.info {
font-family: 'A Mitra_4 (MRT)';
margin-right: 10px;
line-height: 30px;
}
.navigation-icon {
width: 70px;
margin-left: 10px;
height: 57px;
display: block;
cursor: pointer;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-icon .top-bar {
width: 70px;
height: 4px;
display: block;
background-color: #000000;
position: absolute;
top: 10%;
transform: rotate(0);
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-icon .middle-bar {
width: 70px;
height: 4px;
display: block;
background-color: #000000;
position: absolute;
top: 30%;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-icon .bottom-bar {
width: 70px;
height: 4px;
display: block;
background-color: #000000;
position: absolute;
top: 50%;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.bottom-bar, .middle-bar, .top-bar {
margin-top: 8px;
}
.navigation-ul {
margin-top: 4%;
margin-left: .5%;
float: left;
visibility: hidden;
position: absolute;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-ul .user {
opacity: 0;
}
.navigation-ul li {
list-style: none;
margin-bottom: 10px;
position: relative;
padding: 0;
}
.sub-arrow:after {
content: '\203A';
margin-left: 70px;
transform: rotate(90deg);
}
.navigation-ul a {
text-align: left;
font-family: 'A Mitra_4 (MRT)';
text-decoration: none;
display: block;
font-weight: 800;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 15px;
transition: all 3000ms cubic-bezier(.9,0,.33,1);
}
.navigation-ul li ul {
margin-left: 15px;
text-decoration: none;
color: #ffffff;
display:none;
}
.tap .navigation-ul li ul{
display:block;
}
#icon {
margin-left: 9px;
font-size: 25px;
visibility: visible;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.user {
font-family: 'A Mitra_4 (MRT)';
margin-left: 10px;
font-size: 15px;
visibility: hidden;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation .navigation-social {
width: 100%;
height: 30px;
float: left;
margin-top: 30px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation .navigation-social-ul {
float: right;
list-style: none;
visibility: hidden;
}
.navigation .navigation-social-ul li {
display: inline-block;
}
.navigation .social-icon {
width: 30px;
height: 30px;
display: inline-block;
background-color: white;
}
/*_____----------__________-------- Default User --------_________--------________*/
h1 {
text-align: center;
font: bold 30px 'Iranian Sans';
}
table {
margin: 50px;
}
.tbl-header {
border: 2px solid black;
margin-left: 50px;
font-family: 'Iranian Sans';
background-color: #960e0e;
color: #ffffff;
}
th {
padding-left: 45px;
padding-right: 40px;
padding-bottom: 15px;
padding-top: 15px;
text-align: center;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.tbl-content {
border: 1px solid black;
margin-right: 85px;
background-color: #960e0e;
color: #ffffff;
font-family: 'Iranian Sans';
float: right;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
td {
padding-left: 45px;
padding-right: 40px;
padding-bottom: 15px;
padding-top: 15px;
text-align: center;
border-bottom: 1px solid black;
font-family: 'B Badr';
font-weight: 900;
font-size: 15px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
tr:hover {
background-color: #ada6a6;
}
/*_____----------__________-------- Jquery Effect -------_________--------________*/
.navigation-open {
background-color: #2A3F54;
width: 229px;
height: 1721px;
display: block;
position: absolute;
left: 0;
border-right-style: solid;
border-right-color: #000000;
border-right-width: 1px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .title-logo {
float: right;
margin-top: 20px;
margin-right: 30px;
font-family: 'Tahoma Bold';
font-size: 35px;
color: black;
}
.navigation-open .title-logo .kala {
color: red;
}
.navigation-open .navigation-ul {
opacity: 1;
margin-top: 250px;
visibility: visible;
transition: all 800ms cubic-bezier(.9,0,.33,1);
position: relative;
padding: 0;
transform: rotateY(0) translateX(0);
}
.navigation-open #icon {
font-size: 20px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .user {
visibility: visible;
transition: all 1000ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .title-logo {
opacity: 1;
visibility: visible;
left: 35%;
margin-top: 15px;
transition: all 1000ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .info {
color: white;
float: right;
font-family: 'A Mitra_4 (MRT)';
}
.navigation-open .profile {
opacity: 1;
visibility: visible;
transition: all 3000ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .profile img {
margin-top: 10px;
}
.navigation-open .navigation-ul li:hover {
width: 220px;
height: 40px;
background-color: #304457;
border-top-style: solid;
border-top-color: white;
border-bottom-style: solid;
border-bottom-color: white;
position: relative;
}
.navigation-open .navigation-ul li a #icon {
margin-top: 8px;
}
.navigation-open .user {
opacity: 1;
}
body.nav-open .top-bar {
transition: all 800ms cubic-bezier(.9,0,.33,1);
top: 17px;
transform: rotate(45deg);
}
body.nav-open .middle-bar {
transition: all 800ms cubic-bezier(.9,0,.33,1);
top: 17px;
opacity: 0;
visibility: hidden;
transform: translateX(50px);
}
body.nav-open .bottom-bar {
transition: all 800ms cubic-bezier(.9,0,.33,1);
top: 17px;
transform: rotate(-45deg);
margin-right: 5px;
}
body.nav-open .top-header {
width: 1119px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
body.nav-open .right-col {
width: 1119px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
body.nav-open .tbl-header {
border: 2px solid black;
margin-left: 50px;
font-family: 'Iranian Sans';
background-color: #960e0e;
color: #ffffff;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
body.nav-open th {
padding-right: 15px;
padding-left: 15px;
font-size: 15px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}<head runat="server">
<title></title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<header class="top-header">
<section class="navigation-icon">
<span class="top-bar"></span>
<span class="middle-bar"></span>
<span class="bottom-bar"></span>
</section>
</header>
<nav class="navigation">
<section class="logo">
<span class="title-logo">Kia<span class="kala">Kala</span></span>
<img src="" />
</section>
<div class="profile">
<img class="img-circle" src="http://www.uplooder.net/img/image/74/4ed187e4232a28f4e6a0a227b784f753/cloud-dx-translational-institution-icon.png" /><br />
<br />
<br />
<br />
<br />
<br />
<div class="info">
<div>Kia9372 <span>: User Name </span></div>
<div>Post :<span> Admin</span></div>
</div>
</div>
<ul class="navigation-ul">
<li><a href="#"><span class="glyphicon glyphicon-home" id="icon"><span class="user">Main Dashboard</span></span></a></li>
<li><a href="#" ><span class="glyphicon glyphicon-user" id="icon"><span class="user">Mange User<span class="sub-arrow"></span></span></span></a>
<ul>
<li><a href="Default.aspx"></a><span class="glyphicon glyphicon-user" id="icon"><span class="user">Show User</span></span></li>
<li><a href="Users/insert.aspx"></a><span class="glyphicon glyphicon-plus" id="icon"><span class="user">Insert User</span></span></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-list-alt" id="icon"><span class="user">category</span></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart" id="icon"><span class="user">Orders</span></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-barcode" id="icon"><span class="user">Products</span></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-print" id="icon"><span class="user">Report</span></span></a></li>
</ul>
<section class="navigation-social">
<ul class="navigation-social-ul">
<li><a href="#" class="social-icon"></a></li>
<li><a href="#" class="social-icon"></a></li>
<li><a href="#" class="social-icon"></a></li>
<li><a href="#" class="social-icon"></a></li>
</ul>
</section>
</nav>
<div class="right-col" role="main">
</div>
</form>
</body>
</html>
答案 0 :(得分：0)
将has-sub课程添加到每个li子菜单中，并将.has-sub.tap ul{display:block}添加到您的样式表
$(document).ready(function () {
$(".navigation-icon").click(function () {
$(".navigation").toggleClass('navigation-open');
$('body').toggleClass('nav-open');
});
});
$(window).on("load resize ", function () {
var scrollWidth = $('.tbl-content').width() - $('.tbl-content table').width();
$('.tbl-header').css({ 'padding-right': scrollWidth });
}).resize();
$(document).ready(function () {
$('.has-sub').click(function () {
$(this).toggleClass('tap');
});
});body {
padding: 0;
margin: 0;
background-color: #ffffff;
}
*, *:after, *:before {
box-sizing: inherit;
padding: 0;
margin: 0;
}
.top-header {
width: 1279px;
height: 57px;
background-color: #EDEDED;
float: right;
position: relative;
transition: all 800ms cubic-bezier(.9,0,.33,1);
border-bottom-style: solid;
border-bottom-color: black;
border-bottom-width: 1px;
}
.right-col {
float: right;
background-color: #F7F7F7;
width: 1279px;
height: 1721px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation {
width: 69px;
height: 1721px;
background-color: #1b72b4;
float: left;
display: block;
border-right-style: solid;
border-right-color: #000000;
border-right-width: 1px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.logo {
width: 65px;
height: 65px;
background-color: white;
display: block;
border-radius: 50%;
margin-top: 5px;
}
.logo img {
width: 65px;
height: 65px;
display: block;
float: left;
}
.title-logo {
opacity: 0;
visibility: hidden;
position: absolute;
margin-top: 20px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.title-logo .kala {
color: red;
}
.profile {
position: absolute;
margin-top: 20px;
height: 180px;
width: 230px;
text-align: right;
background-color: #34485C;
visibility: hidden;
opacity: 0;
transition: all 200ms cubic-bezier(.9,0,.33,1);
}
.profile img {
margin-top: 10px;
width: 100px;
height: 100px;
float: right;
margin-right: 70px;
border: 5px solid #FFFFFF;
z-index: 1000;
}
.info {
font-family: 'A Mitra_4 (MRT)';
margin-right: 10px;
line-height: 30px;
}
.navigation-icon {
width: 70px;
margin-left: 10px;
height: 57px;
display: block;
cursor: pointer;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-icon .top-bar {
width: 70px;
height: 4px;
display: block;
background-color: #000000;
position: absolute;
top: 10%;
transform: rotate(0);
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-icon .middle-bar {
width: 70px;
height: 4px;
display: block;
background-color: #000000;
position: absolute;
top: 30%;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-icon .bottom-bar {
width: 70px;
height: 4px;
display: block;
background-color: #000000;
position: absolute;
top: 50%;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.bottom-bar, .middle-bar, .top-bar {
margin-top: 8px;
}
.navigation-ul {
margin-top: 4%;
margin-left: .5%;
float: left;
visibility: hidden;
position: absolute;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-ul .user {
opacity: 0;
}
.navigation-ul li {
list-style: none;
margin-bottom: 10px;
position: relative;
padding: 0;
}
.sub-arrow:after {
content: '\203A';
margin-left: 70px;
transform: rotate(90deg);
}
.navigation-ul a {
text-align: left;
font-family: 'A Mitra_4 (MRT)';
text-decoration: none;
display: block;
font-weight: 800;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 15px;
transition: all 3000ms cubic-bezier(.9,0,.33,1);
}
.navigation-ul li ul {
margin-left: 15px;
text-decoration: none;
color: #ffffff;
display:none;
}
.tap .navigation-ul li ul{
display:block;
}
#icon {
margin-left: 9px;
font-size: 25px;
visibility: visible;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.user {
font-family: 'A Mitra_4 (MRT)';
margin-left: 10px;
font-size: 15px;
visibility: hidden;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation .navigation-social {
width: 100%;
height: 30px;
float: left;
margin-top: 30px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation .navigation-social-ul {
float: right;
list-style: none;
visibility: hidden;
}
.navigation .navigation-social-ul li {
display: inline-block;
}
.navigation .social-icon {
width: 30px;
height: 30px;
display: inline-block;
background-color: white;
}
/*_____----------__________-------- Default User --------_________--------________*/
h1 {
text-align: center;
font: bold 30px 'Iranian Sans';
}
table {
margin: 50px;
}
.tbl-header {
border: 2px solid black;
margin-left: 50px;
font-family: 'Iranian Sans';
background-color: #960e0e;
color: #ffffff;
}
th {
padding-left: 45px;
padding-right: 40px;
padding-bottom: 15px;
padding-top: 15px;
text-align: center;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.tbl-content {
border: 1px solid black;
margin-right: 85px;
background-color: #960e0e;
color: #ffffff;
font-family: 'Iranian Sans';
float: right;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
td {
padding-left: 45px;
padding-right: 40px;
padding-bottom: 15px;
padding-top: 15px;
text-align: center;
border-bottom: 1px solid black;
font-family: 'B Badr';
font-weight: 900;
font-size: 15px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
tr:hover {
background-color: #ada6a6;
}
/*_____----------__________-------- Jquery Effect -------_________--------________*/
.navigation-open {
background-color: #2A3F54;
width: 229px;
height: 1721px;
display: block;
position: absolute;
left: 0;
border-right-style: solid;
border-right-color: #000000;
border-right-width: 1px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .title-logo {
float: right;
margin-top: 20px;
margin-right: 30px;
font-family: 'Tahoma Bold';
font-size: 35px;
color: black;
}
.navigation-open .title-logo .kala {
color: red;
}
.navigation-open .navigation-ul {
opacity: 1;
margin-top: 250px;
visibility: visible;
transition: all 800ms cubic-bezier(.9,0,.33,1);
position: relative;
padding: 0;
transform: rotateY(0) translateX(0);
}
.navigation-open #icon {
font-size: 20px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .user {
visibility: visible;
transition: all 1000ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .title-logo {
opacity: 1;
visibility: visible;
left: 35%;
margin-top: 15px;
transition: all 1000ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .info {
color: white;
float: right;
font-family: 'A Mitra_4 (MRT)';
}
.navigation-open .profile {
opacity: 1;
visibility: visible;
transition: all 3000ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .profile img {
margin-top: 10px;
}
.navigation-open .navigation-ul li:hover {
width: 220px;
height: 40px;
background-color: #304457;
border-top-style: solid;
border-top-color: white;
border-bottom-style: solid;
border-bottom-color: white;
position: relative;
}
.navigation-open .navigation-ul li a #icon {
margin-top: 8px;
}
.navigation-open .user {
opacity: 1;
}
body.nav-open .top-bar {
transition: all 800ms cubic-bezier(.9,0,.33,1);
top: 17px;
transform: rotate(45deg);
}
body.nav-open .middle-bar {
transition: all 800ms cubic-bezier(.9,0,.33,1);
top: 17px;
opacity: 0;
visibility: hidden;
transform: translateX(50px);
}
body.nav-open .bottom-bar {
transition: all 800ms cubic-bezier(.9,0,.33,1);
top: 17px;
transform: rotate(-45deg);
margin-right: 5px;
}
body.nav-open .top-header {
width: 1119px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
body.nav-open .right-col {
width: 1119px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
body.nav-open .tbl-header {
border: 2px solid black;
margin-left: 50px;
font-family: 'Iranian Sans';
background-color: #960e0e;
color: #ffffff;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
body.nav-open th {
padding-right: 15px;
padding-left: 15px;
font-size: 15px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.has-sub.tap ul{display:block}<head runat="server">
<title></title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<header class="top-header">
<section class="navigation-icon">
<span class="top-bar"></span>
<span class="middle-bar"></span>
<span class="bottom-bar"></span>
</section>
</header>
<nav class="navigation">
<section class="logo">
<span class="title-logo">Kia<span class="kala">Kala</span></span>
<img src="" />
</section>
<div class="profile">
<img class="img-circle" src="http://www.uplooder.net/img/image/74/4ed187e4232a28f4e6a0a227b784f753/cloud-dx-translational-institution-icon.png" /><br />
<br />
<br />
<br />
<br />
<br />
<div class="info">
<div>Kia9372 <span>: User Name </span></div>
<div>Post :<span> Admin</span></div>
</div>
</div>
<ul class="navigation-ul">
<li><a href="#"><span class="glyphicon glyphicon-home" id="icon"><span class="user">Main Dashboard</span></span></a></li>
<li class="has-sub"><a href="#" ><span class="glyphicon glyphicon-user" id="icon"><span class="user">Mange User<span class="sub-arrow"></span></span></span></a>
<ul>
<li><a href="Default.aspx"></a><span class="glyphicon glyphicon-user" id="icon"><span class="user">Show User</span></span></li>
<li><a href="Users/insert.aspx"></a><span class="glyphicon glyphicon-plus" id="icon"><span class="user">Insert User</span></span></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-list-alt" id="icon"><span class="user">category</span></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart" id="icon"><span class="user">Orders</span></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-barcode" id="icon"><span class="user">Products</span></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-print" id="icon"><span class="user">Report</span></span></a></li>
</ul>
<section class="navigation-social">
<ul class="navigation-social-ul">
<li><a href="#" class="social-icon"></a></li>
<li><a href="#" class="social-icon"></a></li>
<li><a href="#" class="social-icon"></a></li>
<li><a href="#" class="social-icon"></a></li>
</ul>
</section>
</nav>
<div class="right-col" role="main">
</div>
</form>
</body>
</html>