چگونه یک منوی موبایل اسلایدی در وردپرس بسازیم؟ (راهنمای کامل + کد آماده)

چرا به یک منوی موبایل در وردپرس نیاز داریم؟

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

در وردپرس، یک منوی موبایل اسلایدی که با کلیک روی منوی همبرگری باز شود، تجربه کاربری را بهبود می‌بخشد و نرخ خروج کاربران را کاهش می‌دهد.

در این مقاله، شما یاد خواهید گرفت که چگونه یک منوی موبایل اسلایدی واکنش‌گرا را با HTML، CSS و JavaScript طراحی کنید که فقط در موبایل نمایش داده شود. پس اگر می‌خواهید سایت شما در موبایل حرفه‌ای‌تر به نظر برسد، این آموزش را تا انتها دنبال کنید!

مرحله ۱: ایجاد ساختار HTML برای منوی موبایل

در ابتدا، باید ساختار HTML منوی موبایل را ایجاد کنیم. برای این کار، کد زیر را در فایل header.php یا footer.php قالب وردپرس خود قرار دهید:

<div class="menu-icon" onclick="toggleMenu()">&#9776;</div>
<div class="menu" id="mobileMenu">
    <div class="close-btn" onclick="toggleMenu()">&times;</div>
    <ul>
        <li><a href="#">صفحه اصلی</a></li>
        <li><a href="#">درباره ما</a></li>
        <li><a href="#">خدمات ما</a></li>
        <li><a href="#">تماس با ما</a></li>
    </ul>
</div>

توضیح کد:

• <div class="menu-icon">: دکمه‌ای که آیکون منوی همبرگری را نمایش می‌دهد و با کلیک روی آن، تابع toggleMenu() اجرا می‌شود.
• <div class="menu" id="mobileMenu">: بخش اصلی منو که در ابتدا مخفی است.
• <div class="close-btn">: دکمه‌ای برای بستن منو که هنگام کلیک روی آن نیز تابع toggleMenu() اجرا می‌شود.
• <ul> و <li>: لیست لینک‌های داخلی منو که کاربران می‌توانند روی آن‌ها کلیک کنند.

مرحله ۲: استایل‌دهی به منو با CSS

.menu-icon {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    z-index: 1000;
    display: none;
}
.menu {
    position: fixed;
    top: 0;
    right: -250px;
    width: 250px;
    height: 100vh;
    background: #333;
    color: white;
    padding: 20px;
    transition: right 0.3s ease;
    display: none;
}
.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu ul li {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.menu ul li a {
    color: white;
    text-decoration: none;
    display: block;
}
.menu ul li:hover {
    background: rgba(255, 255, 255, 0.2);
}
.close-btn {
    font-size: 25px;
    cursor: pointer;
    text-align: left;
    display: block;
    margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
    .menu-icon {
        display: block;
    }
    .menu {
        display: block;
    }
}

توضیح کد:

• position: fixed; برای قرار دادن منو در بالای صفحه به‌صورت ثابت.
• right: -250px; باعث می‌شود منو در ابتدا خارج از صفحه باشد و با کلیک باز شود.
• transition: right 0.3s ease; برای ایجاد یک افکت انیمیشنی نرم هنگام باز و بسته شدن منو.
• @media screen and (max-width: 768px) باعث نمایش منو فقط در موبایل می‌شود.

مرحله ۳: افزودن عملکرد منو با JavaScript

حالا برای باز و بسته شدن منو، این کد جاوا اسکریپت را در فایل script.js یا داخل تگ <script> در footer.php قرار دهید:

function toggleMenu() {
    var menu = document.getElementById('mobileMenu');
    if (menu.style.right === "0px") {
        menu.style.right = "-250px";
    } else {
        menu.style.right = "0px";
    }
}

توضیح کد:

• ابتدا المنتی با id="mobileMenu" را دریافت می‌کنیم.
• بررسی می‌کنیم که مقدار right منو برابر 0px است یا خیر.
• اگر مقدار right برابر 0px بود، مقدار آن را -250px می‌کنیم تا منو بسته شود.
• اگر مقدار right چیزی غیر از 0px بود، مقدار آن را 0px قرار می‌دهیم تا منو باز شود.

نتیجه نهایی

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

ویژگی‌های این منو:

نمایش فقط در موبایل

اسلایدی از سمت راست

طراحی ساده و کاربردی

بهینه‌شده برای وردپرس

جمع‌بندی و نکات پایانی

• اگر از قالب وردپرس استفاده می‌کنید، این کدها را در header.php, footer.php و style.css اضافه کنید.
• می‌توانید با استفاده از CSS افکت‌های جذاب‌تری برای منو اضافه کنید.
• استفاده از z-index باعث می‌شود منو همیشه روی سایر محتواها قرار بگیرد.

با این روش، می‌توانید یک منوی حرفه‌ای برای نسخه موبایل طراحی کنید که هم زیبا باشد و هم تجربه کاربری را بهبود بدهد. اگر سؤالی دارید، در بخش نظرات مطرح کنید!