پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۳: خط ۳:
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مخزن پلی اتیلن</title>
     <style>
     <style>
         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
         /* تنظیمات کلی منو */
 
         .desktop-nav {
         body { font-family: 'Vazirmatn', Tahoma, sans-serif; }
            font-family: Tahoma, Arial, sans-serif;
 
        .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: 10px 16px;
        }
 
        .poly-nav {
            display: flex;
            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);
         }
         }


        /* ===== لیست منو (پیش‌فرض: دیده شود) ===== */
         .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 {
         .menu-item { position: relative; cursor: pointer; }
            color: #fff;
        .menu-item > a { text-decoration: none; color: #444; font-size: 14px; font-weight: 600; }
            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); }
 
        /* ===== منوی کشویی ===== */
        .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 {
         .submenu li { list-style: none; padding: 8px 15px; }
            color: #333;
        .submenu li a { text-decoration: none; color: #555; font-size: 13px; }
            padding: 10px 20px;
        .submenu li:hover { background: #f9f9f9; }
            border-radius: 0;
        }


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


         /* ===== دکمه ثبت نام سریع ===== */
         /* مخفی‌سازی در موبایل (ریسپانسیو) */
        .poly-btn--register {
         @media (max-width: 1024px) {
            background: #f59e0b;
             .desktop-nav { display: none !important; }
            color: #1a1a1a;
            font-weight: 700;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 8px;
            white-space: nowrap;
            transition: background 0.3s;
        }
 
        .poly-btn--register:hover { background: #fbbf24; }
 
        /* ========================================
          موبایل: منو مخفی + همبرگر ظاهر
          ======================================== */
         @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">
<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" 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) { el.querySelector('.submenu').style.display = 'block'; }
 
     function hideSub(el) { el.querySelector('.submenu').style.display = 'none'; }
    toggleBtn.addEventListener('click', () => {
        const open = navMenu.classList.toggle('is-open');
        toggleBtn.setAttribute('aria-expanded', open);
    });
 
     // بستن با کلیک بیرون
    document.addEventListener('click', (e) => {
        if (!e.target.closest('.poly-nav')) {
            navMenu.classList.remove('is-open');
            toggleBtn.setAttribute('aria-expanded', 'false');
        }
    });
</script>
</script>


</body>
</body>
</html>
</html>

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

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