نمایش ندادن زیرمنوی ریسپانسیو هنگام نمایش منو در حالت صفحه کوچک(صفحه موبایل)
سلام دوستان یه منوی افقی ریسپانسیو دارم که وقتی سایز صفحه مرورگر کوچیک بشه منو تو یه آیکن همبرگری جمع میشه و وقتی رو آیکن کلیک میکنیم به صورت عمودی در سمت چپ صفحه منو رو نمایش میده
به این منو استایل دادم که زیرمنوش موقع باز شدن افکت داشته باشه تو حالت عادی درست کار میکنه ولی وقتی منو میره تو حالت صفحه موبایل دیگه اصلا زیرمنو باز نمیشه لطفا کمک کنین بفهمم مشکل از چیه
این کد منوهاست
کد HTML:
<nav id="nav-menu-container"> <ul class="menu"> <li class="menu-active"><a href="#intro">صفحه اصلي</a></li> <li><a href="#">نظارت سيستم</a></li> <li><a href="#">تنظيمات سيستم</a></li> <li class="menu-has-children" tabindex = 0><a href="#">مرکز تلفن</a> <ul class="submenu zipper"> <li><a href="#">داخلی ها</a></li> <li><a href="#">درگاه ها</a></li> <li><a href="#">مسیریابی تماس</a></li> <li><a href="#">پاسخگوی خودکار</a></li> <li><a href="#">ويژگي ها</a></li> </ul> </li> <li class="menu-has-children" tabindex = 0><a href="#">گروه ها</a> <ul class="submenu zipper"> <li><a href="#">گروه کاربری</a></li> <li><a href="#">گروه داخلی</a></li> <li><a href="#">گروه تماس</a></li> </ul> </li> <li class="menu-has-children"><a href="#">امکانات خاص</a> <ul class="submenu zipper"> <li><a href="#">پست الکترونيک</a></li> <li><a href="#">فکس</a></li> </ul> </li> <li><a href="#">گزارشات</a></li> <li><a href="#">راهنما</a></li> <li><a href="#">آیکن</a> <ul class="submenu zipper"> <li><a href="#">مشخصات پروفایل</a></li> <li><a href="#">خروج</a></li> </ul> </li> </ul> </nav>
اینم کد سی اس اسه
.menu, .menu * {
margin: 0;
padding: 0;
list-style: none;
}
/* .menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}
.menu li {
position: relative;
white-space: nowrap;
}
*/
.menu > li {
float: right;
}
.menu li:hover > ul,
.menu li.sfHover > ul {
display: block;
}
.menu ul ul {
top: 0;
left: 100%;
}
.menu ul li {
/* min-width: 180px; */
}
/* Nav Menu Arrows */
.sf-arrows .sf-with-ul {
padding-right: 30px;
}
.sf-arrows .sf-with-ul:after {
content: "\f107";
position: absolute;
right: 15px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
}
.sf-arrows ul .sf-with-ul:after {
content: "\f105";
}
/* Nav Meu Container */
#nav-menu-container {
float: right;
margin: 0;
}
@media (min-width: 1024px) {
#nav-menu-container {
padding-right: 20px;
}
}
@media (max-width: 768px) {
#nav-menu-container {
display: none;
}
}
/* Nav Meu Styling */
.menu a {
padding: 0 8px 10px 8px;
text-decoration: none;
display: inline-block;
color: #fff;
font-family: Yekan, "Montserrat", sans-serif;
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
outline: none;
}
.menu li:hover > a, .menu > .menu-active > a {
color: #18d26e;
}
.menu > li {
margin-right: 10px;
}
.menu ul {
margin: 4px 0 0 0;
padding: 10px;/*
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
background: #fff; */
}
.menu ul li {
transition: 0.3s;
}
.menu ul li a {
padding: 10px;
color: #000;
transition: 0.3s;
display: block;
font-size: 15px;
text-transform: none;
text-align: center;
}
.menu ul li:hover > a {
color: #18d26e;
}
.menu ul ul {
margin: 0;
}
/****/
/* .menu, .menu ul {
list-style: none;
padding: 0;
}
.menu ul {
margin: 0;
}
.menu > li {
position: relative;
display: inline-block;
outline: 0;
} */
.submenu {
position: absolute;
/* left: 0; */
top: 50px;
z-index: 99;
overflow: hidden;
max-height: 0;
/* The transition-delay prevents the menu to disappear before the transition is run backward
* It's ~= length of the animation (.6s) + highest item transition delay (466ms) */
-webkit-transition: max-height 1ms linear 1s;
-moz-transition: max-height 1ms linear 1s;
/* A .submenu should be only revealed when hovering the .menu */
pointer-events: none;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
pointer-events: auto;
z-index: 10;
max-height: 2000px;
-webkit-transition: none;
-moz-transition: none;
}
اینم قسمت منوی عمودی برای موبایله
#mobile-nav-toggle {
position: fixed;
left: 0;
top: 0;
z-index: 999;
margin: 20px 0 0 20px;
border: 0;
background: none;
font-size: 24px;
display: none;
transition: all 0.4s;
outline: none;
cursor: pointer;
}
#mobile-nav-toggle i {
color: #fff;
}
@media (max-width: 768px) {
#mobile-nav-toggle {
display: inline;
}
}
/* Mobile Nav Styling */
#mobile-nav {
position: fixed;
top: 0;
padding-top: 18px;
bottom: 0;
z-index: 998;
background: rgba(0, 0, 0, 0.8);
left: -260px;
width: 260px;
overflow-y: auto;
transition: 0.4s;
}
#mobile-nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#mobile-nav ul li {
position: relative;
}
#mobile-nav ul li a {
color: #fff;
font-size: 13px;
text-transform: uppercase;
overflow: hidden;
padding: 10px 15px 10px 22px;
position: relative;
text-decoration: none;
width: 100%;
display: block;
outline: none;
font-weight: 700;
font-family: Yekan, "Montserrat", sans-serif;
}
#mobile-nav ul li a:hover {
color: #fff;
}
#mobile-nav ul li li {
padding-right: 30px;
}
#mobile-nav ul .menu-has-children i {
position: absolute;
right: 0;
z-index: 99;
padding: 15px;
cursor: pointer;
color: #fff;
}
#mobile-nav ul .menu-has-children i.fa-chevron-up {
color: #18d26e;
}
#mobile-nav ul .menu-has-children li a {
text-transform: none;
}
#mobile-nav ul .menu-item-active {
color: #18d26e;
}
#mobile-body-overly {
width: 100%;
height: 100%;
z-index: 997;
top: 0;
right: 0;
position: fixed;
background: rgba(0, 0, 0, 0.7);
display: none;
}
/* Mobile Nav body classes */
body.mobile-nav-active {
overflow: hidden;
}
body.mobile-nav-active #mobile-nav {
left: 0;
}
body.mobile-nav-active #mobile-nav-toggle {
color: #fff;
left: 210px;
}
خود منو رو نشون میده ها
زیرمنو رو نشون نمیده
