Kianoush Kianoush - 4 months ago 6
CSS Question

Not open li in ul for Vertical DropDown Menu With Jquery Code

I created an admin panel. The admin panel has a navigation menu. The navigation has ul and li elements.

Ok, now Manage User has li's Show Use and Insert User .

This is my problem. When I click on Manage User, it doesn't show li Show User and Insert User .

How can I resolve this problem, to show Show Use and Insert User when I click on Manage User?



$(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&nbsp;&nbsp;<span>:&nbsp;User Name </span></div>
<div>Post&nbsp;&nbsp;:<span>&nbsp;&nbsp;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>




Answer

Add has-sub class to each li have sub menu and add .has-sub.tap ul{display:block} to your stylesheet

$(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&nbsp;&nbsp;<span>:&nbsp;User Name </span></div>
                    <div>Post&nbsp;&nbsp;:<span>&nbsp;&nbsp;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>