رفتن به مطلب

مشکل در کد زیر منو


پست های پیشنهاد شده

با سلام خدمت دوستان عزیز

یک منویی هست که زیر منو داره ولی دیگه زیرمنوهاش ، زیر منو نداره ...

هر کاری کردم نتونستم درستش کنم .

منظورم قسمت children هست که سی اس اس اینجاش رو نتونستم درست کنم :


<ul class="children">
<li><a href="#">222222222</a></li>
<li><a href="#">222222222</a></li>
<li><a href="#">222222222</a></li>
<li><a href="#">222222222</a></li>
</ul>

کد html همراه با Css :


<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>MENU</title>


<style>
.menu, .menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu {
height: 58px;
}
.menu li {
background: -moz-linear-gradient(#292929, #252525);
background: -ms-linear-gradient(#292929, #252525);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
background: -webkit-linear-gradient(#292929, #252525);
background: -o-linear-gradient(#292929, #252525);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
background: linear-gradient(#292929, #252525);
border-bottom: 2px solid #181818;
border-top: 2px solid #303030;
min-width: 160px;
}
.menu > li {
display: block;
float: right;
position: relative;
}
.menu > li:first-child {
}
.menu a {
border-right: 3px solid rgba(0, 0, 0, 0);
color: #808080;
display: block;
font-family: 'B Yekan';
font-size: 18px;
line-height: 54px;
padding: 0 15px;
text-decoration: none;
text-transform: uppercase;
text-align:right;
}
.menu li:hover {
background-color: #1c1c1c;
background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
background: -o-linear-gradient(#1c1c1c, #1b1b1b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
background: linear-gradient(#1c1c1c, #1b1b1b);
border-bottom: 2px solid #222222;
border-top: 2px solid #1B1B1B;
}
.menu li:hover > a {
border-radius: 5px 0 0 0;
border-right: 3px solid #C4302B;
color: #C4302B;
}
/* submenu styles */
.submenu {
right: 0;
max-height: 0;
position: absolute;
top: 100%;
z-index: 0;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;
}
.submenu li {
opacity: 0;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transition: opacity .4s, -webkit-transform .5s;
-moz-transition: opacity .4s, -moz-transform .5s;
-ms-transition: opacity .4s, -ms-transform .5s;
-o-transition: opacity .4s, -o-transform .5s;
transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
border-left: 3px solid #454545;
border-radius: 0;
color: #ffffff;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
max-height: 2000px;
z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
-webkit-transition-delay: 50ms;
-moz-transition-delay: 50ms;
-ms-transition-delay: 50ms;
-o-transition-delay: 50ms;
transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-ms-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
-webkit-transition-delay: 150ms;
-moz-transition-delay: 150ms;
-ms-transition-delay: 150ms;
-o-transition-delay: 150ms;
transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
-webkit-transition-delay: 250ms;
-moz-transition-delay: 250ms;
-ms-transition-delay: 250ms;
-o-transition-delay: 250ms;
transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
-o-transition-delay: 300ms;
transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
-webkit-transition-delay: 350ms;
-moz-transition-delay: 350ms;
-ms-transition-delay: 350ms;
-o-transition-delay: 350ms;
transition-delay: 350ms;
}
.submenu li:nth-child(1) {
-webkit-transition-delay: 350ms;
-moz-transition-delay: 350ms;
-ms-transition-delay: 350ms;
-o-transition-delay: 350ms;
transition-delay: 350ms;
}
.submenu li:nth-child(2) {
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
-o-transition-delay: 300ms;
transition-delay: 300ms;
}
.submenu li:nth-child(3) {
-webkit-transition-delay: 250ms;
-moz-transition-delay: 250ms;
-ms-transition-delay: 250ms;
-o-transition-delay: 250ms;
transition-delay: 250ms;
}
.submenu li:nth-child(4) {
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
.submenu li:nth-child(5) {
-webkit-transition-delay: 150ms;
-moz-transition-delay: 150ms;
-ms-transition-delay: 150ms;
-o-transition-delay: 150ms;
transition-delay: 150ms;
}
.submenu li:nth-child(6) {
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-ms-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;
}
.submenu li:nth-child(7) {
-webkit-transition-delay: 50ms;
-moz-transition-delay: 50ms;
-ms-transition-delay: 50ms;
-o-transition-delay: 50ms;
transition-delay: 50ms;
}
.submenu li:nth-child(8) {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
</style>




</head>
<body>


<ul class="menu">
<li><a href="#">خانه</a></li>
<li><a href="#s1">موضوع اول</a>
<ul class="submenu">
<li><a href="#">زیر مجموعه</a>
<ul class="children">
<li><a href="#">222222222</a></li>
<li><a href="#">222222222</a></li>
<li><a href="#">222222222</a></li>
<li><a href="#">222222222</a></li>
</ul>
</li>

<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>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
</ul>
</li>
<li class="active"><a href="#s2">موضوع دوم</a>
<ul class="submenu">
<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>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
</ul>
</li>
<li><a href="#">موضوع سوم</a>
<ul class="submenu">
<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>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
<li><a href="#">زیر مجموعه</a></li>
</ul>
</li>
<li><a href="#">موضوع چهارم</a></li>
</ul>



</body>
</html>

میخوام با همون افکت که باز میشن زیرمنوهاشم همونطوری باز بشن.

ممنون میشم کمک کنید.

لینک به ارسال
  • 3 هفته بعد...

سلام

ترتیب زیر منوها به این صورت هست

ابتدا یک ul برای تمام منوی نمایش داده میشه

هر لین‌کی که به منو اضافه کنید یک li درست میشه

حالا اگر اون لینک زیرمنو داشته باشه

li هم دوباره یک ul میگریه و لینکهای زیر منو توی li نمایش داده میشه

یعنی:

تمام لینک در منو


<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>

اگر زیر منو داشته باشه


<ul>
<li>link1</li>
<ul>
<li>link1-1</li>
<li>link1-2</li>
<li>link1-3</li>
</ul>
<li>link2</li>
<li>link3</li>
</ul>

و به همین ترتیب


<ul>
<li>link1</li>
<ul>
<li>link1-1</li>
<ul>
<li>link1-1-1</li>
<li>link1-1-2</li>
<li>link1-1-3</li>
</ul>
<li>link1-2</li>
<li>link1-3</li>
</ul>
<li>link2</li>
<li>link3</li>
</ul>

با این مقدمه

در کد شما تمام li ها مخفی شده


.submenu li {
opacity: 0;
}

و تنها در ردیف اول با رفتن موس روی عنوان زیر منو نمایش داده میشه


.menu > li:hover .submenu li,
.menu > li:focus .submenu li {
opacity: 1;
}

برای نمایش زیر منوهای بعدی هم می‌بایست کد اون ها رو هم اضافه کرد


.menu > li ul li:hover .submenu li ul li,
.menu > li ul li:focus .submenu li ul li{
opacity: 1;
}

به همین ترتیب

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...