Milad123 285 ارسال شده در مهر 93 گزارش بازنشر ارسال شده در مهر 93 سلام به همگیعنوانی بهتر از این به ذهنم نرسید این کد سی اس اس یه منوی عمودیه : { 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; }الان من یه منو با این استایل دارم،تنها مشکلی که هست اینه که وقتی موس رو روی هرکدوم از این منوها میبری،بصورت آنی زیرمنوهاش باز میشه!من میخوام بصورت اسلو باز بشهاین منو رو میتونید اینجا ببینید. (سایدبار سمت چپ،منوی نقره ای رنگ)همونطور که میبینید وقتی موس میره روی هر حرف،زیرمنوهاش بصورت آنی باز و وقتی موس میره کنار بصورت آنی بسته میشه! نقل قول لینک به ارسال
Rohani 389 ارسال شده در مهر 93 گزارش بازنشر ارسال شده در مهر 93 با استفاده از کد ریز زمانی که li ها hover می شوند بذارید.-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease; 1 نقل قول لینک به ارسال
Milad123 285 ارسال شده در مهر 93 مالک گزارش بازنشر ارسال شده در مهر 93 با استفاده از کد ریز زمانی که li ها hover می شوند بذارید.-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease;ممنون ولی مشکل همینه که کد هیچ عملکردی نداره نقل قول لینک به ارسال
Rohani 389 ارسال شده در مهر 93 گزارش بازنشر ارسال شده در مهر 93 کد رو کجا قرار میدین؟ 2 نقل قول لینک به ارسال
SM-Mahdavi 5427 ارسال شده در مهر 93 گزارش بازنشر ارسال شده در مهر 93 سلامheight فکر نمی کنم transition بگیره. ولی با این حال به جای auto یه عدد بزارید ببینید حل میشه یا نه. اگه نشد روش رو عوض کنید. 1 نقل قول لینک به ارسال
Milad123 285 ارسال شده در مهر 93 مالک گزارش بازنشر ارسال شده در مهر 93 سلامheight فکر نمی کنم transition بگیره. ولی با این حال به جای auto یه عدد بزارید ببینید حل میشه یا نه. اگه نشد روش رو عوض کنید.قبلا همینطور بوده بجای آتو عدد بوده و کار میکرده منتها چون ارتفاع همه منوها باهم یکی نیستن و محتویات یکی زیاده و یکی کمتر،نمیتونم عدد بذارم و باید روی آتو باشه.مشکلم اینه که روی آتو که میذارم این مشکل پیش میاد کد رو کجا قرار میدین؟الان توی قسمت.menu-item ulگذاشتم کار نکرد.اگه جای خاصی باید قرار بگیره ممنون میشم بگید نقل قول لینک به ارسال
Ghasem Paran 333 ارسال شده در مهر 93 گزارش بازنشر ارسال شده در مهر 93 (ویرایش شده) سلامباید با jquery انجام بدید. ویرایش شده مهر 93 توسط Ghasem Paran 1 نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .