فراغیب

الگو:منو اصلی/بخشنده: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۲ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۳: خط ۳:
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>منوی دسکتاپ واکنش‌گرا</title>
     <title>مخزن پلی اتیلن</title>
     <style>
     <style>
         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
         /* تعریف فونت ایران سنس */
 
         @font-face {
         body { font-family: 'Vazirmatn', Tahoma, sans-serif; }
            font-family: 'Iransans';
 
             font-weight: normal;
        .poly-header {
             font-style: normal;
             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;
        body { margin: 0; padding: 0; } /* اطمینان از نبود padding/margin پیش‌فرض */
            margin: 0 auto;
            padding: 10px 16px;
        }


         .poly-nav {
         .desktop-nav {
             display: flex;
             font-family: 'Iransans', Tahoma, Arial, sans-serif; /* اولویت با ایران سنس */
            align-items: center;
            gap: 16px;
        }
 
        /* ===== دکمه همبرگر (فقط موبایل) ===== */
        .poly-nav__toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
        }
 
        .poly-nav__bar {
            width: 26px;
            height: 3px;
             background: #fff;
             background: #fff;
             border-radius: 3px;
             padding: 10px 50px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            display: block; /* همیشه نمایش داده شود تا Media Query آن را کنترل کند */
         }
         }


        /* ===== لیست منو (پیش‌فرض: دیده شود) ===== */
         .menu-wrapper {
         .poly-nav__list {
             display: flex;
             display: flex;
            flex-direction: row;
             align-items: center;
             align-items: center;
            justify-content: flex-end; /* چیدمان از راست */
             list-style: none;
             list-style: none;
             gap: 4px;
             margin: 0;
            flex: 1;
             padding: 0;
        }
             gap: 30px;
 
        .poly-nav__list a {
            color: #fff;
            text-decoration: none;
             padding: 12px 16px;
             display: block;
            border-radius: 6px;
            white-space: nowrap;
         }
         }


         .poly-nav__list a:hover { background: rgba(255,255,255,0.15); }
         .menu-item { position: relative; cursor: pointer; }
 
         .menu-item > a { text-decoration: none; color: #444; font-size: 14px; font-weight: 600; }
        /* ===== منوی کشویی ===== */
         .poly-dropdown { position: relative; }


         .poly-dropdown__content {
        /* استایل زیرمنوها */
         .submenu {
             display: none;
             display: none;
             position: absolute;
             position: absolute;
خط ۷۸: خط ۴۳:
             right: 0;
             right: 0;
             background: #fff;
             background: #fff;
            min-width: 220px;
             box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            border-radius: 8px;
             padding: 10px 0;
             box-shadow: 0 8px 16px rgba(0,0,0,0.2);
             width: 180px;
             padding: 8px 0;
            border-radius: 5px;
             z-index: 100;
             z-index: 1000;
        }
 
        .poly-dropdown__content a {
            color: #333;
             padding: 10px 20px;
            border-radius: 0;
         }
         }


         .poly-dropdown__content a:hover { background: #e8f4fd; color: #0a5c8a; }
         .submenu li { list-style: none; padding: 8px 15px; }
        .submenu li a { text-decoration: none; color: #555; font-size: 13px; }
        .submenu li:hover { background: #f9f9f9; }


         .poly-dropdown:hover .poly-dropdown__content,
        /* استایل دکمه ثبت‌نام */
        .poly-dropdown:focus-within .poly-dropdown__content {
         .btn-signup {
             display: block;
            background-color: #e91e63;
            color: #fff !important;
            padding: 10px 25px;
            border-radius: 30px;
             transition: all 0.3s;
         }
         }
        .btn-signup:hover { background-color: #c2185b; }


         /* ===== دکمه ثبت نام سریع ===== */
         /* --- تغییرات برای موبایل --- */
         .poly-btn--register {
         /* Media Query برای موبایل و تبلت: منو را مخفی می‌کند */
            background: #f59e0b;
        @media (max-width: 1024px) {
            color: #1a1a1a;
             .desktop-nav {
             font-weight: 700;
                display: none !important; /* منو را کاملاً مخفی می‌کند */
            text-decoration: none;
             }
             padding: 10px 20px;
             /* اگر بخواهید در موبایل المان دیگری نمایش داده شود، اینجا اضافه کنید */
             border-radius: 8px;
            white-space: nowrap;
            transition: background 0.3s;
         }
         }


        .poly-btn--register:hover { background: #fbbf24; }
         /* Media Query برای دسکتاپ: منو را نمایش می‌دهد */
 
         @media (min-width: 1024px) {
         /* ========================================
             .desktop-nav {
          موبایل: منو مخفی + همبرگر ظاهر
                 display: block !important; /* اطمینان از نمایش در دسکتاپ */
          ======================================== */
         @media (max-width: 767px) {
             .poly-nav__toggle {
                 display: flex;
             }
             }
            .poly-nav__list {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 100%;
                right: 0;
                left: 0;
                background: #0a5c8a;
                padding: 12px;
                box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            }
            .poly-nav__list.is-open {
                display: flex;
            }
            .poly-nav__list a {
                width: 100%;
                text-align: right;
            }
            .poly-dropdown__content {
                position: static;
                background: rgba(0,0,0,0.15);
                margin: 4px 16px;
            }
            .poly-dropdown__content a { color: #fff; }
         }
         }
     </style>
     </style>
خط ۱۵۳: خط ۸۳:
<body>
<body>


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


            <!-- همبرگر -->
        <!-- خدمات اهدایی -->
            <button class="poly-nav__toggle" id="menuToggle" aria-label="باز کردن منو" aria-expanded="false">
        <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="navMenu">
        </li>
                 <li><a href="/wiki/اصلی">اصلی</a></li>
                 <li><a href="/wiki/مخزن_پلی_اتیلن_آب_شرب">مخزن آب شرب</a></li>
                 <li><a href="/wiki/مخزن_پلی_اتیلن_صنعتی">مخزن صنعتی</a></li>
 
                <li class="poly-dropdown">
                    <a href="/wiki/انواع_مخزن_پلی_اتیلن">انواع و ظرفیت‌ها ▾</a>
                    <div class="poly-dropdown__content">
                        <a href="/wiki/مخزن_یک_قسمتی">مخزن یک قسمتی</a>
                        <a href="/wiki/مخزن_دو_قسمتی">مخزن دو قسمتی</a>
                        <a href="/wiki/مخزن_سه_قسمتی">مخزن سه قسمتی</a>
                        <a href="/wiki/مخزن_پلی_اتیلن_بزرگ">مخازن با ظرفیت بالا</a>
                    </div>
                </li>


                 <li><a href="/wiki/قیمت_مخزن_پلی_اتیلن">استعلام قیمت</a></li>
        <!-- شرایط و ضوابط -->
                 <li><a href="/wiki/راهنمای_خرید_مخزن">راهنمای خرید</a></li>
        <li class="menu-item" onmouseover="showSub(this)" onmouseout="hideSub(this)">
            <a>شرایط و ضوابط ▾</a>
            <ul class="submenu">
                 <li><a href="#">شرایط سن و جسمانی</a></li>
                <li><a href="#">ممنوعیت‌های پزشکی</a></li>
                 <li><a href="#">سوالات متداول</a></li>
                <li><a href="#">ضوابط شرعی</a></li>
             </ul>
             </ul>
        </li>


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


<script>
<script>
     const toggleBtn = document.getElementById('menuToggle');
     // تابع ساده برای نمایش زیرمنو
    const navMenu = document.getElementById('navMenu');
    function showSub(el) {
 
        // اطمینان از اینکه زیرمنو فقط در صورتی نمایش داده شود که صفحه به اندازه کافی بزرگ باشد
     toggleBtn.addEventListener('click', () => {
        if (window.innerWidth > 1024) {
         const open = navMenu.classList.toggle('is-open');
            el.querySelector('.submenu').style.display = 'block';
        toggleBtn.setAttribute('aria-expanded', open);
        }
     });
     }
    // تابع برای مخفی کردن زیرمنو
    function hideSub(el) {
         el.querySelector('.submenu').style.display = 'none';
     }


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