رفتن به مطلب
Milad123

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

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

سلام به همگی

عنوانی بهتر از این به ذهنم نرسید :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:

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


لینک به ارسال

سلام

باید با jquery انجام بدید.

ویرایش شده توسط Ghasem Paran

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


لینک به ارسال

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

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

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

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

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

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

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

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


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