• اطلاعیه ها

    • Saeed Fard

      پوشش زنده وردکمپ ۲۰۱۸ اروپا توسط وردپرس پارسی   23/03/97

      اگر کاربر وردپرس هستید حتما تا به حال اسم وردکمپ رو شنیدید، کمپ و دورهمی بزرگ توسعه‌دهنده‌ها و کاربران وردپرس که سالانه در کشورهای مختلف برگزار میشه تحت عنوان وردکمپ هستش که از سمت مراجع اصلی وردپرس حمایت و برگزار می‌شه.   این‌ بار در سال 2018 وردکمپ اروپا در شهر بلگراد کشور صربستان در حال برگزاری هستش، این رویداد طی سه روز 24 تا 26 تیر ماه (June 14-16) برگزار میشه، در این رویداد مصطفی صوفی از وردپرس پارسی و به نمایندگی تمامی کاربران وردپرس فارسی حضور داره. وردپرس پارسی رویداد وردکمپ 2018 اروپا رو به صورت زنده توسط مصطفی پوشش می‌ده و در صورت علاقه‌مندی به این مراسم می‌تونید از طریق وردپرس پارسی دنبالش کنید.در حال حاضر یک روز از این مراسم گذشته که گزارش اون در قسمت پوشش زنده قرار گرفته. برای دنبال کردن مراسم وردکمپ اروپا به صورت لحظه‌ای به صفحه پوشش زنده در قسمت زیر مراجعه کنید. همینطور در آینده منتظر خبر برگزاری اولین وردکمپ در ایران توسط وردپرس‌پارسی باشید. https://wp-parsi.com/wceu-2018

      لینک خبر در وردپرس پارسی : https://wp-parsi.com/wceu-2018-live  
webmaster

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

4 پست در این موضوع قرار دارد

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

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

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

منظورم قسمت 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>

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

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

0

به اشتراک گذاری این پست


لینک به پست

از اساتید و اهل فن کسی نیست راهنمایی کنند؟ خیلی نیاز دارم به این کد

0

به اشتراک گذاری این پست


لینک به پست

سلام

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

ابتدا یک 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;
}

به همین ترتیب

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری