من میخوام یه dropdwon عمودی بسازم .
منوی 'نمایش کاربران ' 2 زیر منو دارد ک وقتی روزی مدیریت کاربران کلیلک میکنمر نشونشون نمیاده . باید چیکار کنم ؟
حضرت عباسی اگر کسی بلده کمک کنه . الان دور روزه گیرم .
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<link href="/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/bootstrap.css" rel="stylesheet" />
<link href="/css/bootstrap-theme.css" rel="stylesheet" />
<script src="/js/bootstrap.js"></script>
<link href="/AdminPanel/StyleSheet/StyleSheet.css" rel="stylesheet" />
</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="/Image/1467494806_Picasa.png" />
</section>
<div class="profile">
<img class="img-circle" src="/Image/Profile.png" /><br />
<br />
<br />
<br />
<br />
<br />
<div class="info">
<div>Kia9372 <span>: نام کاربری </span></div>
<div>سمت :<span> مدیر کل</span></div>
</div>
</div>
<ul class="navigation-ul">
<li><a href="#"><span class="glyphicon glyphicon-home" id="icon1"><span class="user">داشبورد اصلی مدیریت</span></span></a></li>
<li><a href="#" ><span class="glyphicon glyphicon-user" id="icon2"><span class="user">مدیریت کاربران<span class="sub-arrow"></span></span></span></a>
<ul>
<li><a href="Default.aspx"></a><span class="glyphicon glyphicon-user" id="icon3"><span class="user">نمایش کاربران</span></span></li>
<li><a href="Users/insert.aspx"></a><span class="glyphicon glyphicon-plus" id="icon4"><span class="user">اضافه کردن کاربر جدید</span></span></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-list-alt" id="icon5"><span class="user">مدیریت دسته بندی ها</span></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart" id="icon6"><span class="user">مدیریت سفارشات</span></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-barcode" id="icon7"><span class="user">مدیریت محصولات</span></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-print" id="icon8"><span class="user">گزارشات</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>
<script src="/Scripts/jquery-3.0.0.min.js"></script>
<script src="/Script/JQuery.js"></script>
</body> </html>
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;
}
#icon1 {
margin-left: 9px;
font-size: 25px;
visibility: visible;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
#icon2 {
margin-left: 9px;
font-size: 25px;
visibility: visible;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
#icon3 {
margin-left: 9px;
font-size: 25px;
visibility: visible;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
#icon4 {
margin-left: 9px;
font-size: 25px;
visibility: visible;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
#icon5 {
margin-left: 9px;
font-size: 25px;
visibility: visible;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
#icon6 {
margin-left: 9px;
font-size: 25px;
visibility: visible;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
#icon7 {
margin-left: 9px;
font-size: 25px;
visibility: visible;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
#icon8 {
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;
v1isibility: 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); }
$(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');
}); });
