unid_user 63 ارسال شده در آذر 97 گزارش بازنشر ارسال شده در آذر 97 سلام و درود دوستان گرامی یه مشکل در منوی سایت پیش اومده وقتی میرم روی منوی محصولات زیر منو چندین بار خود به خود باز و بسته میشه. کدها و ویدئو رو هم میزارم لطفا کمک کنید. <nav> <ul> <li> <a href="#">صفحه اصلی</a> </li> <li class="dropdown"> <a href="#">محصولات</a> <ul> <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> <li> <a href="#">درباره ما</a> </li> <li> <a href="#">تماس با ما</a> </li> </ul> </nav> nav { background-color: #616161; text-align: center; border-bottom: 2px solid #333333; } nav > ul > li { display: inline-block; list-style: none; color: #fff; font-size: 12px; } nav > ul > li > a { color: #fff; display: block; padding: 10px 20px; font-size: 12px; transition: all .5s; } nav > ul > li > a:hover, li.dropdown > ul > li > a:hover { background-color: #555555; color: #deb887; } nav > ul > li > ul > li { list-style: none; text-align: right; } nav > ul > li > ul > li > a { color: #fff; } li.dropdown { position: relative; } li.dropdown > ul { position: absolute; width: 150px; background-color: #616161; right: 0px; top: 106%; border-bottom: 2px solid #333333; display: none; } li.dropdown > ul > li > a { margin: 10px auto; display: block; padding: 10px 20px; } $("li.dropdown").hover(function() { $(" > ul", this).slideDown('slow'); }, function() { $(" > ul", this).slideUp('slow'); }); با تشکر و سپاس Video-Sun-Dec-16-2018-22-56-36.webm نقل قول لینک به ارسال
miladalizade 64 ارسال شده در آذر 97 گزارش بازنشر ارسال شده در آذر 97 در ۱ ساعت قبل، unid_user گفته است : سلام و درود دوستان گرامی یه مشکل در منوی سایت پیش اومده وقتی میرم روی منوی محصولات زیر منو چندین بار خود به خود باز و بسته میشه. کدها و ویدئو رو هم میزارم لطفا کمک کنید. <nav> <ul> <li> <a href="#">صفحه اصلی</a> </li> <li class="dropdown"> <a href="#">محصولات</a> <ul> <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> <li> <a href="#">درباره ما</a> </li> <li> <a href="#">تماس با ما</a> </li> </ul> </nav> nav { background-color: #616161; text-align: center; border-bottom: 2px solid #333333; } nav > ul > li { display: inline-block; list-style: none; color: #fff; font-size: 12px; } nav > ul > li > a { color: #fff; display: block; padding: 10px 20px; font-size: 12px; transition: all .5s; } nav > ul > li > a:hover, li.dropdown > ul > li > a:hover { background-color: #555555; color: #deb887; } nav > ul > li > ul > li { list-style: none; text-align: right; } nav > ul > li > ul > li > a { color: #fff; } li.dropdown { position: relative; } li.dropdown > ul { position: absolute; width: 150px; background-color: #616161; right: 0px; top: 106%; border-bottom: 2px solid #333333; display: none; } li.dropdown > ul > li > a { margin: 10px auto; display: block; padding: 10px 20px; } $("li.dropdown").hover(function() { $(" > ul", this).slideDown('slow'); }, function() { $(" > ul", this).slideUp('slow'); }); با تشکر و سپاس Video-Sun-Dec-16-2018-22-56-36.webm وقت بخیر دوست من برای این مورد نیاز نیستش از جاوا اسکریپت استفاده کنید میتونین از خاصیت visibility استفاده کنید که اگه آشنایی کامل باهاش ندارید، بفرمایید تا دقیق تر توضیح بدم اگرم اسرار بر استفاده از جاوا اسکریپت دارید کدتونو بررسی کنم سوالی داشتید حتما بپرسید بنده پاسخگو هستم موفق باشید نقل قول لینک به ارسال
unid_user 63 ارسال شده در آذر 97 مالک گزارش بازنشر ارسال شده در آذر 97 در 6 دقیقه قبل، miladalizade گفته است : وقت بخیر دوست من برای این مورد نیاز نیستش از جاوا اسکریپت استفاده کنید میتونین از خاصیت visibility استفاده کنید که اگه آشنایی کامل باهاش ندارید، بفرمایید تا دقیق تر توضیح بدم اگرم اسرار بر استفاده از جاوا اسکریپت دارید کدتونو بررسی کنم سوالی داشتید حتما بپرسید بنده پاسخگو هستم موفق باشید با این خاصیت آشنا نیستم لطفا توضیح بدید. ولی مشکل رو حل کردم با اضافه کردن تابع stop(). و اگر برای جی کوئری راه حل بهتری دارید هم بفرمایید. ممنون نقل قول لینک به ارسال
miladalizade 64 ارسال شده در آذر 97 گزارش بازنشر ارسال شده در آذر 97 در 2 دقیقه قبل، unid_user گفته است : با این خاصیت آشنا نیستم لطفا توضیح بدید. ولی مشکل رو حل کردم با اضافه کردن تابع stop(). و اگر برای جی کوئری راه حل بهتری دارید هم بفرمایید. ممنون درود خوشحالم ک مشکلتون حل شد راه حل دیگش اینه که ابتدا به زیر منو ها کد زیر رو اضافه کنید visibility: hidden; opacity: 0; سپس هاورشو بنویسید و استایل زیر رو بهش بدین visibility: visible; opacity: 1; در این صورت حتی اگه بهش انیمیشن هم تعریف کنید اعمال خواهد شد وگرنه اگه از خاصیت display:none استفاده کنید هیچ انیمیشنی نمیتونین توش اعمال کنین سوالی داشتید حتما بپرسید بنده پاسخگو هستم موفق باشید 1 نقل قول لینک به ارسال
Mobin 1669 ارسال شده در آذر 97 گزارش بازنشر ارسال شده در آذر 97 کد جی کوئریتونو به صورت زیر تغییر بدین احتمالا درست میشه $("li.dropdown").hover(function() { $(" > ul", this).stop().slideDown('slow'); }, function() { $(" > ul", this).stop().slideUp('slow'); }); نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .