رفتن به مطلب

اضافه کردن قابلیت زمانی به این منو


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

سلام به همگی

عنوانی بهتر از این به ذهنم نرسید :D

این کد سی اس اس یه منوی عمودیه :


{
margin: 0px;
padding: 0px;
}

nav
{
font-family: Helvetica, Arial, "Lucida Grande" , sans-serif;
line-height: 1.5;
margin: 10px auto; /*for display only*/
width: 250px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.menu-item
{
background: #fff;
width: 250px;
}
/*Menu Header Styles*/
.menu-item h4
{
text-align:center;
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 7px 12px; /*Gradient*/
background: #C7C7C7; /* Old browsers */
background: -moz-linear-gradient(top, #C7C7C7 0%, #707070 44%, #B0B0B0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C7C7C7), color-stop(44%,#707070), color-stop(100%,#B0B0B0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C7C7C7 0%,#707070 44%,#B0B0B0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C7C7C7 0%,#707070 44%,#B0B0B0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C7C7C7 0%,#707070 44%,#B0B0B0 100%); /* IE10+ */
background: linear-gradient(top, #C7C7C7 0%,#707070 44%,#B0B0B0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C7C7C7', endColorstr='#B0B0B0',GradientType=0 ); /* IE6-9 */
}

.menu-item h4 a
{
color: white;
display: block;
text-decoration: none;
width: 250px;
}
/*Menu Header Styles*/
.menu-item h4
{
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 7px 12px; /*Gradient*/
background: #C7C7C7; /* Old browsers */
background: -moz-linear-gradient(top, #C7C7C7 0%, #707070 44%, #B0B0B0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C7C7C7), color-stop(44%,#707070), color-stop(100%,#B0B0B0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C7C7C7 0%,#707070 44%,#B0B0B0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C7C7C7 0%,#707070 44%,#B0B0B0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C7C7C7 0%,#707070 44%,#B0B0B0 100%); /* IE10+ */
background: linear-gradient(top, #C7C7C7 0%,#707070 44%,#B0B0B0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C7C7C7', endColorstr='#B0B0B0',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover
{
background: #505050; /* Old browsers */
background: -moz-linear-gradient(top, #505050 0%, #B0B0B0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E5E5E5), color-stop(100%,#B0B0B0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #505050 0%,#B0B0B0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #505050 0%,#B0B0B0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #505050 0%,#B0B0B0 100%); /* IE10+ */
background: linear-gradient(top, #505050 0%,#B0B0B0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#B0B0B0',GradientType=0 ); /* IE6-9 */
}
/*First Item Styles*/
.alpha p
{
font-size: 13px;
padding: 8px 12px;
color: #aaa;
}
/*ul Styles*/
.menu-item ul
{
background: #fff;
font-size: 13px;
line-height: 30px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}

.menu-item ul a
{
margin-left: 20px;
text-decoration: none;
color: #aaa;
display: block;
width: 250px;
}

/*li Styles*/
.menu-item li
{
border-bottom: 1px solid #eee;
}

.menu-item li:hover
{
background: #eee;
}
/*ul Styles*/
.menu-item ul
{
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px; /*Collapses the menu*/
list-style-type: none;
overflow: hidden;
padding: 0px;
}
/*ul Styles*/
.menu-item ul
{
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px; /*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul
{
height: auto;
}

الان من یه منو با این استایل دارم،تنها مشکلی که هست اینه که وقتی موس رو روی هرکدوم از این منوها میبری،بصورت آنی زیرمنوهاش باز میشه!

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

این منو رو میتونید اینجا ببینید. (سایدبار سمت چپ،منوی نقره ای رنگ)

همونطور که میبینید وقتی موس میره روی هر حرف،زیرمنوهاش بصورت آنی باز و وقتی موس میره کنار بصورت آنی بسته میشه!

لینک به ارسال

با استفاده از کد ریز زمانی که li ها hover می شوند بذارید.


-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;

لینک به ارسال

با استفاده از کد ریز زمانی که li ها hover می شوند بذارید.


-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;

ممنون ولی مشکل همینه که کد هیچ عملکردی نداره ;)

لینک به ارسال

سلام

height فکر نمی کنم transition بگیره. ولی با این حال به جای auto یه عدد بزارید ببینید حل میشه یا نه. اگه نشد روش رو عوض کنید.

لینک به ارسال

سلام

height فکر نمی کنم transition بگیره. ولی با این حال به جای auto یه عدد بزارید ببینید حل میشه یا نه. اگه نشد روش رو عوض کنید.

قبلا همینطور بوده بجای آتو عدد بوده و کار میکرده منتها چون ارتفاع همه منوها باهم یکی نیستن و محتویات یکی زیاده و یکی کمتر،نمیتونم عدد بذارم و باید روی آتو باشه.

مشکلم اینه که روی آتو که میذارم این مشکل پیش میاد :(

کد رو کجا قرار میدین؟

الان توی قسمت

.menu-item ul

گذاشتم کار نکرد.

اگه جای خاصی باید قرار بگیره ممنون میشم بگید :wub:

لینک به ارسال

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

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

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

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

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

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

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

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

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