Milad123

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

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

سلام به همگی

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

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

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

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

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

0

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


لینک به پست

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


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

1

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


لینک به پست

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


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

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

0

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


لینک به پست

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

2

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


لینک به پست

سلام

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

1

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


لینک به پست

سلام

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

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

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

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

الان توی قسمت

.menu-item ul

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

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

0

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


لینک به پست

ارسال شده در (ویرایش شده)

سلام

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

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

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


لینک به پست

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

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

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

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


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

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

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


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