پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۱۵ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۳: خط ۳:
<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>
         /* تنظیمات فونت و پایه */
         /* تعریف فونت ایران سنس */
         :root {
         @font-face {
             --primary-color: #db2777; /* رنگ صورتی متناسب با حوزه سلامت بانوان */
             font-family: 'Iransans';
            --secondary-color: #f472b6;
             font-weight: normal;
             --text-color: #374151;
             font-style: normal;
             --bg-color: #ffffff;
            --hover-bg: #fdf2f8;
         }
         }


         body {
        /* تنظیمات کلی منو */
            margin: 0;
         body { margin: 0; padding: 0; } /* اطمینان از نبود padding/margin پیش‌فرض */
            font-family: 'Tahoma', sans-serif; /* در پروژه واقعی از فونت Vazir یا Yekan استفاده کنید */
            background-color: #f3f4f6;
        }


         /* کانتینر اصلی منو */
         .desktop-nav {
        .poly-menu-container {
            font-family: 'Iransans', Tahoma, Arial, sans-serif; /* اولویت با ایران سنس */
             background-color: var(--bg-color);
            background: #fff;
             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
             padding: 10px 50px;
             width: 100%;
             box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            position: sticky;
             display: block; /* همیشه نمایش داده شود تا Media Query آن را کنترل کند */
            top: 0;
            z-index: 1000;
         }
         }


         .poly-nav {
         .menu-wrapper {
             max-width: 1200px;
             display: flex;
             margin: 0 auto;
            align-items: center;
        }
             justify-content: flex-end; /* چیدمان از راست */
 
        /* لیست اصلی */
        .poly-nav ul {
             list-style: none;
             list-style: none;
             margin: 0;
             margin: 0;
             padding: 0;
             padding: 0;
             display: flex;
             gap: 30px;
            justify-content: center;
            align-items: center;
        }
 
        .poly-nav li {
            position: relative;
         }
         }


         .poly-nav a {
         .menu-item { position: relative; cursor: pointer; }
            display: block;
        .menu-item > a { text-decoration: none; color: #444; font-size: 14px; font-weight: 600; }
            padding: 1rem 1.5rem;
            text-decoration: none;
            color: var(--text-color);
            font-weight: 500;
            font-size: 0.95rem;
            transition: all 0.3s ease;
        }


        .poly-nav a:hover {
         /* استایل زیرمنوها */
            color: var(--primary-color);
         .submenu {
            background-color: var(--hover-bg);
        }
 
         /* استایل منوی کشویی (Dropdown) */
         .dropdown:hover .dropdown-content {
            display: block;
            animation: fadeIn 0.3s ease;
        }
 
        .dropdown-content {
             display: none;
             display: none;
             position: absolute;
             position: absolute;
             right: 0; /* تراز کردن با راست به دلیل RTL */
             top: 100%;
             background-color: var(--bg-color);
             right: 0;
             min-width: 220px;
             background: #fff;
             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
             box-shadow: 0 8px 16px rgba(0,0,0,0.1);
             border-radius: 0 0 8px 8px;
             padding: 10px 0;
             border-top: 3px solid var(--primary-color);
            width: 180px;
             overflow: hidden;
             border-radius: 5px;
             z-index: 1000;
         }
         }


         .dropdown-content a {
         .submenu li { list-style: none; padding: 8px 15px; }
            padding: 0.75rem 1rem;
        .submenu li a { text-decoration: none; color: #555; font-size: 13px; }
            font-size: 0.85rem;
        .submenu li:hover { background: #f9f9f9; }
            border-bottom: 1px solid #f3f4f6;
        }


         .dropdown-content a:last-child {
        /* استایل دکمه ثبت‌نام */
             border-bottom: none;
         .btn-signup {
            background-color: #e91e63;
            color: #fff !important;
            padding: 10px 25px;
             border-radius: 30px;
            transition: all 0.3s;
         }
         }
        .btn-signup:hover { background-color: #c2185b; }


         /* فلش کوچک کنار منوهای کشویی */
         /* --- تغییرات برای موبایل --- */
         .has-arrow::after {
         /* Media Query برای موبایل و تبلت: منو را مخفی می‌کند */
             content: ' ▾';
        @media (max-width: 1024px) {
             font-size: 0.8rem;
             .desktop-nav {
             vertical-align: middle;
                display: none !important; /* منو را کاملاً مخفی می‌کند */
             }
             /* اگر بخواهید در موبایل المان دیگری نمایش داده شود، اینجا اضافه کنید */
         }
         }


         /* انیمیشن نمایش */
         /* Media Query برای دسکتاپ: منو را نمایش می‌دهد */
        @keyframes fadeIn {
         @media (min-width: 1024px) {
            from { opacity: 0; transform: translateY(10px); }
             .desktop-nav {
            to { opacity: 1; transform: translateY(0); }
                 display: block !important; /* اطمینان از نمایش در دسکتاپ */
        }
 
        /* ریسپانسیو برای موبایل */
         @media (max-width: 768px) {
             .poly-nav ul {
                 flex-direction: column;
                padding: 10px 0;
            }
            .poly-nav li {
                width: 100%;
                text-align: center;
            }
            .dropdown-content {
                position: static;
                width: 100%;
                box-shadow: none;
                background-color: #f9fafb;
            }
            .dropdown-content a {
                padding: 0.5rem 0;
             }
             }
         }
         }
خط ۱۳۰: خط ۸۳:
<body>
<body>


<div class="poly-menu-container">
<!-- منوی ناوبری دسکتاپ -->
    <nav class="poly-nav" aria-label="منوی اصلی خدمات اهدایی">
<nav class="desktop-nav">
         <ul>
    <ul class="menu-wrapper">
            <li><a href="/wiki/اصلی">اصلی</a></li>
         <li><a href="#">اصلی</a></li>
           
 
            <!-- بخش خدمات اصلی (Dropdown) -->
        <!-- خدمات اهدایی -->
            <li class="dropdown">
        <li class="menu-item" onmouseover="showSub(this)" onmouseout="hideSub(this)">
                <a href="#" class="has-arrow">انواع خدمات اهدایی</a>
            <a>انواع خدمات اهدایی ▾</a>
                <div class="dropdown-content">
            <ul class="submenu">
                    <a href="/wiki/اهدای_تخمک">اهدای تخمک</a>
                <li><a href="#">اهدای تخمک</a></li>
                    <a href="/wiki/رحم_جایگزین">رحم جایگزین (Surrogacy)</a>
                <li><a href="#">رحم جایگزین</a></li>
                    <a href="/wiki/اهدای_جنین">اهدای جنین</a>
                <li><a href="#">اهدای جنین</a></li>
                </div>
            </ul>
            </li>
        </li>


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


            <li><a href="/wiki/استعلام_هزینه">استعلام هزینه</a></li>
        <li><a href="#">استعلام هزینه</a></li>
            <li><a href="/wiki/مناطق_خدماتی">مناطق و شهرها</a></li>
        <li><a href="#">مناطق و شهرها</a></li>
            <li><a href="/wiki/الگو:فرم_ثبت_نام" style="color: var(--primary-color); font-weight: bold;">ثبت‌نام سریع</a></li>
        <li><a href="#" class="btn-signup">ثبت‌نام سریع</a></li>
        </ul>
    </ul>
    </nav>
</nav>
</div>
 
<script>
    // تابع ساده برای نمایش زیرمنو
    function showSub(el) {
        // اطمینان از اینکه زیرمنو فقط در صورتی نمایش داده شود که صفحه به اندازه کافی بزرگ باشد
        if (window.innerWidth > 1024) {
            el.querySelector('.submenu').style.display = 'block';
        }
    }
    // تابع برای مخفی کردن زیرمنو
    function hideSub(el) {
        el.querySelector('.submenu').style.display = 'none';
    }
 
    // یک رویداد listener اضافه می‌کنیم که اگر اندازه صفحه تغییر کرد، وضعیت نمایش زیرمنو را بررسی کند
    window.addEventListener('resize', () => {
        // اگر اندازه صفحه کوچکتر از ۱۰۲۴ پیکسل شد، اطمینان حاصل کنیم که هیچ زیرمنویی باز نماند
        if (window.innerWidth <= 1024) {
            document.querySelectorAll('.submenu').forEach(sub => sub.style.display = 'none');
        }
    });
</script>


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

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

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

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