چطوری با استفاده از بوت استرپ منو باز شونده بسازیم ؟

ممکنه که هر کدوم از ما وبمسترها ، آشنایی کوچک و نسبی با بوت استرپ داشته باشیم . اما اگر به صورت تخصصی در حوزه طراحی سایت فعالیت میکنید ، پیشنهاد میکنم که به آموزش های بوت استرپ مراجعه کنید و سعی کنید این تکنولوژی رو حرفه ایی تر کار کنید . بعضی ها در مورد اهمیت بوت استرپ از من پرسیده بودند و در پاسخ به آنها باید بگم که بوت استرپ ، یک ابزار یا وسیله خیلی مناسب برای طراحی سایت های ریسپانسیوه ! مثلا شما میتونید با استفاده از آن سایت های وردپرسی رو ریسپانسیو کنید یا هر باکسی رو در آن طراحی کنید .

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

میدانید که به‌صورت پیش‌فرض با کلیک کردن بر روی برخی منوها گزینه‌هایی برای شما بازخواهند شد . اگر میخواهید که این منوها با هاور شدن ، باز شوند وبیت رو تا انتهای این مقاله همراهی کنید .

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

درواقع شما می‌توانید از CSS Level 4 Media Queries استفاده کنید و تشخیص دهید کاربر می‌تواند از منوی شناور یا Hover استفاده کند. یا ترجیح می‌دهد از یکی از ویژگی‌های JavaScript مانند Modernizr استفاده کند. بااین‌حال شما از هر روشی که استفاده کنید 100 درصد بدون مشکل نیست.

برای اینکه بتوانید بوت استرپ رو به سایت وردپرسی خودتون اضافه کنید ، میتوانید از CDN آن استفاده کنید . در این روش کافیه که لینک ها و چیزهایی که خود بوت استرپ برای ما مشخص کرده را در وبسایتمون اضافه کنیم .

ابتدا یک منوی ساده بسازید

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

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="logo horizontal-logo" src="horizontal-logo.svg" alt="forecastr logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
...
</ul>
</div>
</div>
</navbar>

اضافه کردن یک سری استایل برای زیبایی بیشتر

در گام بعدی شما باید 3 قانون اساسی CSS را برای مؤلفه خود مشخص کنید. درواقع این موارد کار بسیار مهم و زیادی را انجام نمی‌دهدند و تنها یک سری فواصل بین سبک‌های منوی شما می‌دهدند که باعث زیبایی سایت شما می‌شود.

.navbar .nav-item:not(:last-child) {
margin-right: 35px;
}
.dropdown-toggle::after {
transition: transform 0.15s linear;
}
.show.dropdown .dropdown-toggle::after {
transform: translateY(3px);
}

سفارشی کردن باز شونده‌ها

حالا ممکنه که بخواهید این منوی بازشونده رو سفارشی سازی کنید . این منو ممکنه که کاملا ریسپانسیو نباشه و بر روی صفحات نمایشگر کوچک یعنی کمتر از 768 پیکسل با کلیک کردن بر روی لینک‌ها نمایش داده شود. اما در صفحات متوسط یعنی 768 پیکسل و بالاتر از آن نیز با استفاده از Hover هدف را مشخص می‌کنیم. برای رسیدن به این هدف باید در ابتدا حاشیه پیش‌‌فرض منوهای کشویی را حذف کنید. در واقع ما نیاز داریم که این شکاف‌‌ها را از بین ببریم در واقع به همین دلیل است که کاربر می‌‌تواند بدون فعال کردن دوباره همه چیز بتواند بین parent link و dropdown در حرکت باشد.

.dropdown-menu {
margin-top: 0;
}

در مرحله بعدی ما یک کد jQuery را برای شما خواهیم گفت که یک سری اقدامات را برای شما انجام خواهد داد. این کد با بارگذاری صفحه و تغییر اندازه پنجره اجرا می‌شود. هر بار که روی منو کلیک می‌‌کنید یک کلاس جدید سی‌‌اس‌‌اس به منو اضافه خواهد شد که شما با استفاده از آن این امکان را خواهید داشت که منوی باز شونده سایت خود را با سی اس اس‌های بیشتر ویرایش کنید.

تغییر حالت منو از کلیک به هاور موس

کد زیر درواقع همان کد jQuery است که شما به آن نیاز دارید. پس به هدر سایت خود با تگ <script> اضافه کنید.

const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";

$(window).on("load resize", function() {
if (this.matchMedia("(min-width: 768px)").matches) {
$dropdown.hover(
function() {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "true");
$this.find($dropdownMenu).addClass(showClass);
},
function() {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "false");
$this.find($dropdownMenu).removeClass(showClass);
}
);
} else {
$dropdown.off("mouseenter mouseleave");
}
});