webmaster 55 ارسال شده در آبان 93 گزارش بازنشر ارسال شده در آبان 93 با سلام خدمت دوستان عزیزیک منویی هست که زیر منو داره ولی دیگه زیرمنوهاش ، زیر منو نداره ...هر کاری کردم نتونستم درستش کنم .منظورم قسمت 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>میخوام با همون افکت که باز میشن زیرمنوهاشم همونطوری باز بشن.ممنون میشم کمک کنید. نقل قول لینک به ارسال
webmaster 55 ارسال شده در آبان 93 مالک گزارش بازنشر ارسال شده در آبان 93 از اساتید و اهل فن کسی نیست راهنمایی کنند؟ خیلی نیاز دارم به این کد نقل قول لینک به ارسال
مهدی 1668 ارسال شده در آبان 93 گزارش بازنشر ارسال شده در آبان 93 سلامترتیب زیر منوها به این صورت هستابتدا یک 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;}به همین ترتیب نقل قول لینک به ارسال
M.Javad 684 ارسال شده در آبان 93 گزارش بازنشر ارسال شده در آبان 93 http://codepen.io/andornagy/pen/xhiJH نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .