رفتن به مطلب

یه باگ جی کوئری در منوی سایت


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

سلام و درود

دوستان گرامی یه مشکل در منوی سایت پیش اومده وقتی میرم روی منوی محصولات زیر منو چندین بار خود به خود باز و بسته میشه. کدها و ویدئو رو هم میزارم لطفا کمک کنید.

<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

لینک به ارسال
در ۱ ساعت قبل، 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 استفاده کنید که اگه آشنایی کامل باهاش ندارید، بفرمایید تا دقیق تر توضیح بدم

اگرم اسرار بر استفاده از جاوا اسکریپت دارید کدتونو بررسی کنم 

سوالی داشتید حتما بپرسید بنده پاسخگو هستم

موفق باشید

لینک به ارسال
در 6 دقیقه قبل، miladalizade گفته است :

وقت بخیر دوست من

برای این مورد نیاز نیستش از جاوا اسکریپت استفاده کنید

میتونین از خاصیت visibility استفاده کنید که اگه آشنایی کامل باهاش ندارید، بفرمایید تا دقیق تر توضیح بدم

اگرم اسرار بر استفاده از جاوا اسکریپت دارید کدتونو بررسی کنم 

سوالی داشتید حتما بپرسید بنده پاسخگو هستم

موفق باشید

با این خاصیت آشنا نیستم لطفا توضیح بدید. ولی مشکل رو حل کردم با اضافه کردن تابع stop(). و اگر برای جی کوئری راه حل بهتری دارید هم بفرمایید.

ممنون

لینک به ارسال
در 2 دقیقه قبل، unid_user گفته است :

با این خاصیت آشنا نیستم لطفا توضیح بدید. ولی مشکل رو حل کردم با اضافه کردن تابع stop(). و اگر برای جی کوئری راه حل بهتری دارید هم بفرمایید.

ممنون

درود

خوشحالم ک مشکلتون حل شد

راه حل دیگش اینه که ابتدا به زیر منو ها کد زیر رو اضافه کنید

    visibility: hidden;
    opacity: 0;

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

visibility: visible;
opacity: 1;

در این صورت حتی اگه بهش انیمیشن هم تعریف کنید اعمال خواهد شد وگرنه اگه از خاصیت display:none استفاده کنید هیچ انیمیشنی نمیتونین توش اعمال کنین

سوالی داشتید حتما بپرسید بنده پاسخگو هستم

موفق باشید

لینک به ارسال

کد جی کوئریتونو به صورت زیر تغییر بدین احتمالا درست میشه

$("li.dropdown").hover(function() {
  $(" > ul", this).stop().slideDown('slow');
}, function() {
  $(" > ul", this).stop().slideUp('slow');
});

 

لینک به ارسال

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

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

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

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

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

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

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

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

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