پرش به محتوا

منو اصلی/بخشنده - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۳ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۳: خط ۳:
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>منوی دسکتاپ واکنش‌گرا</title>
    <meta name="description" content="محصولات مخزن پلی اتیلن - انواع مخازن آب شرب، صنعتی و ظرفیت‌های مختلف به همراه استعلام قیمت و راهنمای خرید">
     <title>مخزن پلی اتیلن | انواع مخازن و استعلام قیمت</title>
     <style>
     <style>
         /* ===== تنظیمات پایه ===== */
         /* تعریف فونت ایران سنس */
         *, *::before, *::after {
         @font-face {
             box-sizing: border-box;
             font-family: 'Iransans';
             margin: 0;
             font-weight: normal;
             padding: 0;
             font-style: normal;
         }
         }


         html {
         /* تنظیمات کلی منو */
            font-size: 100%; /* 16px پیش‌فرض برای دسترس‌پذیری */
        body { margin: 0; padding: 0; } /* اطمینان از نبود padding/margin پیش‌فرض */
        }


         body {
         .desktop-nav {
             font-family: 'Vazirmatn', Tahoma, sans-serif;
             font-family: 'Iransans', Tahoma, Arial, sans-serif; /* اولویت با ایران سنس */
            line-height: 1.6;
             background: #fff;
        }
            padding: 10px 50px;
 
             box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        /* ========================================
             display: block; /* همیشه نمایش داده شود تا Media Query آن را کنترل کند */
          مرحله ۱: موبایل (پایه) — تا 768px
          ======================================== */
        .poly-header {
             background: #0a5c8a;
             box-shadow: 0 2px 8px rgba(0,0,0,0.15);
             position: sticky;
            top: 0;
            z-index: 1000;
        }
 
        .poly-menu-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 12px 16px;
         }
         }


         .poly-nav {
         .menu-wrapper {
             display: flex;
             display: flex;
             align-items: center;
             align-items: center;
             justify-content: space-between;
             justify-content: flex-end; /* چیدمان از راست */
             gap: 12px;
            list-style: none;
            margin: 0;
            padding: 0;
             gap: 30px;
         }
         }


        /* دکمه همبرگر */
         .menu-item { position: relative; cursor: pointer; }
         .poly-nav__toggle {
        .menu-item > a { text-decoration: none; color: #444; font-size: 14px; font-weight: 600; }
            display: flex;
            flex-direction: column;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
        }


        .poly-nav__bar {
         /* استایل زیرمنوها */
            width: 26px;
         .submenu {
            height: 3px;
            background: #fff;
            border-radius: 3px;
            transition: transform 0.3s, opacity 0.3s;
        }
 
         /* لیست منو (در موبایل: مخفی و از پایین باز می‌شود) */
         .poly-nav__list {
             display: none;
             display: none;
            flex-direction: column;
             position: absolute;
             position: absolute;
             top: 100%;
             top: 100%;
             right: 0;
             right: 0;
            left: 0;
             background: #fff;
             background: #0a5c8a;
             box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            list-style: none;
             padding: 10px 0;
            padding: 12px;
             width: 180px;
             box-shadow: 0 8px 16px rgba(0,0,0,0.2);
             border-radius: 5px;
        }
             z-index: 1000;
 
        .poly-nav__list.is-open {
            display: flex;
        }
 
        .poly-nav__list a {
            color: #fff;
            text-decoration: none;
             padding: 12px 16px;
            display: block;
            border-radius: 6px;
            transition: background 0.3s;
        }
 
        .poly-nav__list a:hover,
        .poly-nav__list a:focus-visible {
             background: rgba(255,255,255,0.15);
        }
 
        /* منوی کشویی (در موبایل: زیر آیتم باز می‌شود) */
        .poly-dropdown__content {
            display: none;
            flex-direction: column;
            background: rgba(0,0,0,0.15);
             border-radius: 6px;
             margin: 4px 16px;
            padding: 4px 0;
        }
 
        .poly-dropdown.is-open .poly-dropdown__content {
            display: flex;
        }
 
        .poly-dropdown__content a {
            font-size: 0.95rem;
            padding: 10px 16px;
         }
         }


        /* دکمه ثبت نام سریع */
         .submenu li { list-style: none; padding: 8px 15px; }
         .poly-btn--register {
        .submenu li a { text-decoration: none; color: #555; font-size: 13px; }
            background: #f59e0b;             /* رنگ نارنجی برای جلب توجه */
        .submenu li:hover { background: #f9f9f9; }
            color: #1a1a1a;
            font-weight: 700;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 8px;
            transition: background 0.3s, transform 0.2s;
            white-space: nowrap;
            font-size: 0.95rem;
        }


         .poly-btn--register:hover,
         /* استایل دکمه ثبت‌نام */
         .poly-btn--register:focus-visible {
         .btn-signup {
             background: #fbbf24;
            background-color: #e91e63;
             transform: translateY(-2px);
             color: #fff !important;
             padding: 10px 25px;
            border-radius: 30px;
            transition: all 0.3s;
         }
         }
        .btn-signup:hover { background-color: #c2185b; }


         /* ========================================
         /* --- تغییرات برای موبایل --- */
          مرحله ۲: تبلت — 768px به بالا
        /* Media Query برای موبایل و تبلت: منو را مخفی می‌کند */
          ======================================== */
        @media (max-width: 1024px) {
        @media (min-width: 768px) {
             .desktop-nav {
            /* همبرگر مخفی شود */
                 display: none !important; /* منو را کاملاً مخفی می‌کند */
            .poly-nav__toggle {
                display: none;
            }
 
            /* منو به حالت افقی دربیاید */
            .poly-nav__list {
                display: flex;
                flex-direction: row;
                position: static;
                background: none;
                box-shadow: none;
                padding: 0;
                gap: 4px;
                flex: 1;
                justify-content: flex-start;
            }
 
            .poly-nav__list > li {
                position: relative;
            }
 
            /* منوی کشویی (در دسکتاپ: آبشاری) */
            .poly-dropdown__content {
                display: none;
                position: absolute;
                top: 100%;
                right: 0;
                background: #fff;
                min-width: 220px;
                border-radius: 8px;
                box-shadow: 0 8px 16px rgba(0,0,0,0.2);
                padding: 8px 0;
                margin: 0;
            }
 
            .poly-dropdown__content a {
                color: #333;
                padding: 10px 20px;
                border-radius: 0;
            }
 
             .poly-dropdown__content a:hover {
                 background: #e8f4fd;
                color: #0a5c8a;
            }
 
            /* باز شدن با hover در دسکتاپ */
            .poly-dropdown:hover .poly-dropdown__content,
            .poly-dropdown:focus-within .poly-dropdown__content {
                display: block;
             }
             }
            /* اگر بخواهید در موبایل المان دیگری نمایش داده شود، اینجا اضافه کنید */
         }
         }


         /* ========================================
         /* Media Query برای دسکتاپ: منو را نمایش می‌دهد */
          مرحله ۳: دسکتاپ بزرگ — 1200px به بالا
         @media (min-width: 1024px) {
          ======================================== */
             .desktop-nav {
         @media (min-width: 1200px) {
                 display: block !important; /* اطمینان از نمایش در دسکتاپ */
             .poly-menu-container {
                 padding: 12px 24px;
            }
 
            .poly-nav__list a {
                font-size: 1rem;
                padding: 12px 18px;
            }
 
            .poly-btn--register {
                font-size: 1rem;
                padding: 12px 24px;
             }
             }
         }
         }
خط ۲۱۶: خط ۸۳:
<body>
<body>


<!-- ===== هدر + منوی ناوبری ===== -->
<!-- منوی ناوبری دسکتاپ -->
<header class="poly-header">
<nav class="desktop-nav">
     <div class="poly-menu-container">
     <ul class="menu-wrapper">
         <nav class="poly-nav" aria-label="منوی محصولات مخزن پلی اتیلن">
         <li><a href="#">اصلی</a></li>


            <!-- دکمه همبرگر (موبایل) -->
        <!-- خدمات اهدایی -->
            <button class="poly-nav__toggle" aria-label="باز کردن منو" aria-expanded="false" aria-controls="poly-nav-menu">
        <li class="menu-item" onmouseover="showSub(this)" onmouseout="hideSub(this)">
                <span class="poly-nav__bar"></span>
             <a>انواع خدمات اهدایی ▾</a>
                <span class="poly-nav__bar"></span>
             <ul class="submenu">
                <span class="poly-nav__bar"></span>
                 <li><a href="#">اهدای تخمک</a></li>
             </button>
                 <li><a href="#">رحم جایگزین</a></li>
 
                 <li><a href="#">اهدای جنین</a></li>
            <!-- لیست منو -->
            </ul>
             <ul class="poly-nav__list" id="poly-nav-menu">
        </li>
                 <li><a href="/wiki/اصلی">اصلی</a></li>
                 <li><a href="/wiki/مخزن_پلی_اتیلن_آب_شرب">مخزن آب شرب</a></li>
                 <li><a href="/wiki/مخزن_پلی_اتیلن_صنعتی">مخزن صنعتی</a></li>


                <!-- منوی کشویی -->
        <!-- شرایط و ضوابط -->
                <li class="poly-dropdown">
        <li class="menu-item" onmouseover="showSub(this)" onmouseout="hideSub(this)">
                    <a href="/wiki/انواع_مخزن_پلی_اتیلن" class="poly-dropdown__link" aria-haspopup="true" aria-expanded="false">
            <a>شرایط و ضوابط ▾</a>
                        انواع و ظرفیت‌ها
            <ul class="submenu">
                    </a>
                <li><a href="#">شرایط سن و جسمانی</a></li>
                    <div class="poly-dropdown__content">
                <li><a href="#">ممنوعیت‌های پزشکی</a></li>
                        <a href="/wiki/مخزن_یک_قسمتی">مخزن یک قسمتی</a>
                 <li><a href="#">سوالات متداول</a></li>
                        <a href="/wiki/مخزن_دو_قسمتی">مخزن دو قسمتی</a>
                 <li><a href="#">ضوابط شرعی</a></li>
                        <a href="/wiki/مخزن_سه_قسمتی">مخزن سه قسمتی</a>
                        <a href="/wiki/مخزن_پلی_اتیلن_بزرگ">مخازن با ظرفیت بالا</a>
                    </div>
                </li>
 
                 <li><a href="/wiki/قیمت_مخزن_پلی_اتیلن">استعلام قیمت</a></li>
                 <li><a href="/wiki/راهنمای_خرید_مخزن">راهنمای خرید</a></li>
             </ul>
             </ul>
        </li>


            <!-- دکمه ثبت نام سریع (سمت راست) -->
        <li><a href="#">استعلام هزینه</a></li>
            <div class="poly-nav__actions">
        <li><a href="#">مناطق و شهرها</a></li>
                <a href="/wiki/ثبت_نام" class="poly-btn poly-btn--register">ثبت نام سریع</a>
        <li><a href="#" class="btn-signup">ثبت‌نام سریع</a></li>
            </div>
     </ul>
 
</nav>
        </nav>
     </div>
</header>


<script>
<script>
     // ===== منوی همبرگر (موبایل) =====
     // تابع ساده برای نمایش زیرمنو
    const toggleBtn = document.querySelector('.poly-nav__toggle');
    function showSub(el) {
    const navList = document.querySelector('.poly-nav__list');
        // اطمینان از اینکه زیرمنو فقط در صورتی نمایش داده شود که صفحه به اندازه کافی بزرگ باشد
 
        if (window.innerWidth > 1024) {
    toggleBtn.addEventListener('click', () => {
            el.querySelector('.submenu').style.display = 'block';
        const isOpen = navList.classList.toggle('is-open');
         }
         toggleBtn.setAttribute('aria-expanded', isOpen);
     }
     });
     // تابع برای مخفی کردن زیرمنو
 
     function hideSub(el) {
     // ===== منوی کشویی (لمسی در موبایل) =====
         el.querySelector('.submenu').style.display = 'none';
     const dropdowns = document.querySelectorAll('.poly-dropdown');
     }
 
    dropdowns.forEach(dropdown => {
         const link = dropdown.querySelector('.poly-dropdown__link');
        const toggle = () => {
            const isOpen = dropdown.classList.toggle('is-open');
            link.setAttribute('aria-expanded', isOpen);
        };
 
        link.addEventListener('click', (e) => {
            // فقط در موبایل: کلیک، زیرمنو را باز کند نه لینک را
            if (window.innerWidth < 768) {
                e.preventDefault();
                toggle();
            }
        });
     });


     // ===== بستن منو با کلیک بیرون =====
     // یک رویداد listener اضافه می‌کنیم که اگر اندازه صفحه تغییر کرد، وضعیت نمایش زیرمنو را بررسی کند
     document.addEventListener('click', (e) => {
     window.addEventListener('resize', () => {
         if (!e.target.closest('.poly-nav')) {
        // اگر اندازه صفحه کوچکتر از ۱۰۲۴ پیکسل شد، اطمینان حاصل کنیم که هیچ زیرمنویی باز نماند
             navList.classList.remove('is-open');
         if (window.innerWidth <= 1024) {
            toggleBtn.setAttribute('aria-expanded', 'false');
             document.querySelectorAll('.submenu').forEach(sub => sub.style.display = 'none');
            dropdowns.forEach(d => d.classList.remove('is-open'));
         }
         }
     });
     });

نسخهٔ کنونی تا ‏۱۶ اوت ۲۰۲۶، ساعت ۰۷:۲۹

منوی دسکتاپ واکنش‌گرا

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:منو_اصلی/بخشنده&oldid=6360»