پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۴: خط ۴:
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="محصولات مخزن پلی اتیلن - انواع مخازن آب شرب، صنعتی و ظرفیت‌های مختلف به همراه استعلام قیمت و راهنمای خرید">
     <title>مخزن پلی اتیلن</title>
     <title>مخزن پلی اتیلن | انواع مخازن و استعلام قیمت</title>
     <style>
     <style>
        /* ===== تنظیمات پایه ===== */
         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
         *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }


         html {
         body { font-family: 'Vazirmatn', Tahoma, sans-serif; }
            font-size: 100%; /* 16px پیش‌فرض برای دسترس‌پذیری */
        }


        body {
            font-family: 'Vazirmatn', Tahoma, sans-serif;
            line-height: 1.6;
        }
        /* ========================================
          مرحله ۱: موبایل (پایه) — تا 768px
          ======================================== */
         .poly-header {
         .poly-header {
             background: #0a5c8a;
             background: #0a5c8a;
خط ۳۷: خط ۲۱:
             max-width: 1200px;
             max-width: 1200px;
             margin: 0 auto;
             margin: 0 auto;
             padding: 12px 16px;
             padding: 10px 16px;
         }
         }


خط ۴۳: خط ۲۷:
             display: flex;
             display: flex;
             align-items: center;
             align-items: center;
            justify-content: space-between;
             gap: 16px;
             gap: 12px;
         }
         }


         /* دکمه همبرگر */
         /* ===== دکمه همبرگر (فقط موبایل) ===== */
         .poly-nav__toggle {
         .poly-nav__toggle {
             display: flex;
             display: none;
             flex-direction: column;
             flex-direction: column;
             gap: 5px;
             gap: 5px;
خط ۶۳: خط ۴۶:
             background: #fff;
             background: #fff;
             border-radius: 3px;
             border-radius: 3px;
            transition: transform 0.3s, opacity 0.3s;
         }
         }


         /* لیست منو (در موبایل: مخفی و از پایین باز می‌شود) */
         /* ===== لیست منو (پیش‌فرض: دیده شود) ===== */
         .poly-nav__list {
         .poly-nav__list {
             display: none;
             display: flex;
             flex-direction: column;
             flex-direction: row;
             position: absolute;
             align-items: center;
            top: 100%;
            right: 0;
            left: 0;
            background: #0a5c8a;
             list-style: none;
             list-style: none;
             padding: 12px;
             gap: 4px;
             box-shadow: 0 8px 16px rgba(0,0,0,0.2);
             flex: 1;
        }
 
        .poly-nav__list.is-open {
            display: flex;
         }
         }


خط ۹۰: خط ۶۴:
             display: block;
             display: block;
             border-radius: 6px;
             border-radius: 6px;
             transition: background 0.3s;
             white-space: nowrap;
         }
         }


         .poly-nav__list a:hover,
         .poly-nav__list a:hover { background: rgba(255,255,255,0.15); }
        .poly-nav__list a:focus-visible {
 
            background: rgba(255,255,255,0.15);
         /* ===== منوی کشویی ===== */
         }
        .poly-dropdown { position: relative; }


        /* منوی کشویی (در موبایل: زیر آیتم باز می‌شود) */
         .poly-dropdown__content {
         .poly-dropdown__content {
             display: none;
             display: none;
             flex-direction: column;
             position: absolute;
             background: rgba(0,0,0,0.15);
            top: 100%;
             border-radius: 6px;
            right: 0;
             margin: 4px 16px;
            background: #fff;
            padding: 4px 0;
            min-width: 220px;
            border-radius: 8px;
             box-shadow: 0 8px 16px rgba(0,0,0,0.2);
             padding: 8px 0;
             z-index: 100;
         }
         }


         .poly-dropdown.is-open .poly-dropdown__content {
         .poly-dropdown__content a {
             display: flex;
             color: #333;
            padding: 10px 20px;
            border-radius: 0;
         }
         }


         .poly-dropdown__content a {
         .poly-dropdown__content a:hover { background: #e8f4fd; color: #0a5c8a; }
            font-size: 0.95rem;
 
             padding: 10px 16px;
        .poly-dropdown:hover .poly-dropdown__content,
        .poly-dropdown:focus-within .poly-dropdown__content {
             display: block;
         }
         }


         /* دکمه ثبت نام سریع */
         /* ===== دکمه ثبت نام سریع ===== */
         .poly-btn--register {
         .poly-btn--register {
             background: #f59e0b;             /* رنگ نارنجی برای جلب توجه */
             background: #f59e0b;
             color: #1a1a1a;
             color: #1a1a1a;
             font-weight: 700;
             font-weight: 700;
خط ۱۲۵: خط ۱۰۶:
             padding: 10px 20px;
             padding: 10px 20px;
             border-radius: 8px;
             border-radius: 8px;
            transition: background 0.3s, transform 0.2s;
             white-space: nowrap;
             white-space: nowrap;
             font-size: 0.95rem;
             transition: background 0.3s;
         }
         }


         .poly-btn--register:hover,
         .poly-btn--register:hover { background: #fbbf24; }
        .poly-btn--register:focus-visible {
            background: #fbbf24;
            transform: translateY(-2px);
        }


         /* ========================================
         /* ========================================
           مرحله ۲: تبلت — 768px به بالا
           موبایل: منو مخفی + همبرگر ظاهر
           ======================================== */
           ======================================== */
         @media (min-width: 768px) {
         @media (max-width: 767px) {
            /* همبرگر مخفی شود */
             .poly-nav__toggle {
             .poly-nav__toggle {
                 display: none;
                 display: flex;
             }
             }


            /* منو به حالت افقی دربیاید */
             .poly-nav__list {
             .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;
                 display: none;
                flex-direction: column;
                 position: absolute;
                 position: absolute;
                 top: 100%;
                 top: 100%;
                 right: 0;
                 right: 0;
                 background: #fff;
                 left: 0;
                 min-width: 220px;
                 background: #0a5c8a;
                 border-radius: 8px;
                 padding: 12px;
                 box-shadow: 0 8px 16px rgba(0,0,0,0.2);
                 box-shadow: 0 8px 16px rgba(0,0,0,0.2);
                padding: 8px 0;
                margin: 0;
             }
             }


             .poly-dropdown__content a {
             .poly-nav__list.is-open {
                 color: #333;
                 display: flex;
                padding: 10px 20px;
                border-radius: 0;
             }
             }


             .poly-dropdown__content a:hover {
             .poly-nav__list a {
                 background: #e8f4fd;
                 width: 100%;
                 color: #0a5c8a;
                 text-align: right;
             }
             }


            /* باز شدن با hover در دسکتاپ */
             .poly-dropdown__content {
             .poly-dropdown:hover .poly-dropdown__content,
                position: static;
            .poly-dropdown:focus-within .poly-dropdown__content {
                background: rgba(0,0,0,0.15);
                 display: block;
                 margin: 4px 16px;
             }
             }
        }


        /* ========================================
             .poly-dropdown__content a { color: #fff; }
          مرحله ۳: دسکتاپ بزرگ — 1200px به بالا
          ======================================== */
        @media (min-width: 1200px) {
             .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;
            }
         }
         }
     </style>
     </style>
خط ۲۱۶: خط ۱۵۳:
<body>
<body>


<!-- ===== هدر + منوی ناوبری ===== -->
<header class="poly-header">
<header class="poly-header">
     <div class="poly-menu-container">
     <div class="poly-menu-container">
         <nav class="poly-nav" aria-label="منوی محصولات مخزن پلی اتیلن">
         <nav class="poly-nav" aria-label="منوی محصولات مخزن پلی اتیلن">


             <!-- دکمه همبرگر (موبایل) -->
             <!-- همبرگر -->
             <button class="poly-nav__toggle" aria-label="باز کردن منو" aria-expanded="false" aria-controls="poly-nav-menu">
             <button class="poly-nav__toggle" id="menuToggle" aria-label="باز کردن منو" aria-expanded="false">
                 <span class="poly-nav__bar"></span>
                 <span class="poly-nav__bar"></span>
                 <span class="poly-nav__bar"></span>
                 <span class="poly-nav__bar"></span>
خط ۲۲۸: خط ۱۶۴:
             </button>
             </button>


             <!-- لیست منو -->
             <!-- منو -->
             <ul class="poly-nav__list" id="poly-nav-menu">
             <ul class="poly-nav__list" id="navMenu">
                 <li><a href="/wiki/اصلی">اصلی</a></li>
                 <li><a href="/wiki/اصلی">اصلی</a></li>
                 <li><a href="/wiki/مخزن_پلی_اتیلن_آب_شرب">مخزن آب شرب</a></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="poly-dropdown">
                     <a href="/wiki/انواع_مخزن_پلی_اتیلن" class="poly-dropdown__link" aria-haspopup="true" aria-expanded="false">
                     <a href="/wiki/انواع_مخزن_پلی_اتیلن">انواع و ظرفیت‌ها ▾</a>
                        انواع و ظرفیت‌ها
                    </a>
                     <div class="poly-dropdown__content">
                     <div class="poly-dropdown__content">
                         <a href="/wiki/مخزن_یک_قسمتی">مخزن یک قسمتی</a>
                         <a href="/wiki/مخزن_یک_قسمتی">مخزن یک قسمتی</a>
خط ۲۵۱: خط ۱۸۴:
             </ul>
             </ul>


             <!-- دکمه ثبت نام سریع (سمت راست) -->
             <!-- دکمه ثبت نام -->
             <div class="poly-nav__actions">
             <a href="/wiki/ثبت_نام" class="poly-btn poly-btn--register">ثبت نام سریع</a>
                <a href="/wiki/ثبت_نام" class="poly-btn poly-btn--register">ثبت نام سریع</a>
            </div>


         </nav>
         </nav>
خط ۲۶۱: خط ۱۹۲:


<script>
<script>
    // ===== منوی همبرگر (موبایل) =====
     const toggleBtn = document.getElementById('menuToggle');
     const toggleBtn = document.querySelector('.poly-nav__toggle');
     const navMenu = document.getElementById('navMenu');
     const navList = document.querySelector('.poly-nav__list');


     toggleBtn.addEventListener('click', () => {
     toggleBtn.addEventListener('click', () => {
         const isOpen = navList.classList.toggle('is-open');
         const open = navMenu.classList.toggle('is-open');
         toggleBtn.setAttribute('aria-expanded', isOpen);
         toggleBtn.setAttribute('aria-expanded', open);
    });
 
    // ===== منوی کشویی (لمسی در موبایل) =====
    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();
            }
        });
     });
     });


     // ===== بستن منو با کلیک بیرون =====
     // بستن با کلیک بیرون
     document.addEventListener('click', (e) => {
     document.addEventListener('click', (e) => {
         if (!e.target.closest('.poly-nav')) {
         if (!e.target.closest('.poly-nav')) {
             navList.classList.remove('is-open');
             navMenu.classList.remove('is-open');
             toggleBtn.setAttribute('aria-expanded', 'false');
             toggleBtn.setAttribute('aria-expanded', 'false');
            dropdowns.forEach(d => d.classList.remove('is-open'));
         }
         }
     });
     });

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

مخزن پلی اتیلن

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