kia9372
یک شنبه 20 تیر 1395, 22:27 عصر
درود .
من میخوام یه dropdwon عمودی بسازم .
منوی 'نمایش کاربران ' 2 زیر منو دارد ک وقتی روزی مدیریت کاربران کلیلک میکنمر نشونشون نمیاده . باید چیکار کنم ؟
حضرت عباسی اگر کسی بلده کمک کنه . الان دور روزه گیرم .
<! </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>
.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-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 .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; }[/PHP]
$(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');
}); });
من میخوام یه dropdwon عمودی بسازم .
منوی 'نمایش کاربران ' 2 زیر منو دارد ک وقتی روزی مدیریت کاربران کلیلک میکنمر نشونشون نمیاده . باید چیکار کنم ؟
حضرت عباسی اگر کسی بلده کمک کنه . الان دور روزه گیرم .
<! </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>
.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-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 .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; }[/PHP]
$(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');
}); });