nader
2 سال پیش توسط nader مطرح شد
2 پاسخ

ساخت زیر منو

سلام امیدوارم حالتون خوب باشه من میخوام یه منو درست کنم و برای یکی از اون گذینه های منو میخوام زیر منو بزنم و قصد دارم وقتی روی اون گذینه hover شد زیر منو هاش به درستی نمایش داده بشه
مثلا یکی از گذینه های منوی من محصولات هست که میخوام وقتی روش hover شد سه تا زیر منوی موتور سیکلت وسایل صنعتی و خودرو رو بهم نشون بده اگه میشه کمک کنید ممنون


ثبت پرسش جدید
رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 2 سال پیش مطرح شد
0

درود خوبی...
پیوند زیر:
https://codepen.io/emredenx/pen/MWzBxK


علیرضا کفایتی
تخصص : برنامه نویس laravel, vue.js
@alirezakefayati 2 سال پیش مطرح شد
0

سلام
فرض کنید این منوی شما باشه:

<nav>
<div class="dropdown">
<span>فروشگاه</span>
<ul id="dropdown-content">
<li>خودرو</li>
<li>موتور سیکلت</li>
</ul>
</div>
</nav>

ابتدا یک nav گذاشتیم که قراره کل منوی ما و آیتم‌های دیگری که شما می‌خواهید داخل منویتان قرار بگیرد آنجا باشد.
بعد از آن یکی از آیتم‌های آن که فرمودید فروشگاه هستش رو به حالتی که اول یک div اصلی باشد و بعد داخل span متن «فروشگاه» قرار بیگرد. داخل همان div و بعد از span یک تگ ul تعریف می‌کنیم تا به قول شما زیر منوهایمان را آنجا قرار بدهیم.

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

این هم کد css. طبیعتا در ابتدا باید به dropdown استایل مد نظر خودمون رو بدیم. در ادامه dropdown-content استایل بهش میدیم و display اش هم برابر none می‌کنیم. حالا قراره هر وقت کاربر روی dropdown ما موسش رو آورد display عنصر dropdown-content رو باید برابر block کنیم تا نمایش داده بشه


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام