پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
برچسب: برگردانده‌شده
بدون خلاصۀ ویرایش
 
(۶ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<style>
/* جلوگیری از رفتن محتوا زیر منوی ثابت */


body{
<html lang="fa" dir="rtl">
    padding-top:64px;
<head>
}
    <meta charset="UTF-8">
    <title>منوی دسکتاپ واکنش‌گرا</title>
    <style>
        /* تعریف فونت ایران سنس */
        @font-face {
            font-family: 'Iransans';
            font-weight: normal;
            font-style: normal;
        }


/* منوی تمام عرض */
        /* تنظیمات کلی منو */
        body { margin: 0; padding: 0; } /* اطمینان از نبود padding/margin پیش‌فرض */


header{
        .desktop-nav {
    width:100%;
            font-family: 'Iransans', Tahoma, Arial, sans-serif; /* اولویت با ایران سنس */
    top:0;
            background: #fff;
    left:0;
            padding: 10px 50px;
    right:0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
            display: block; /* همیشه نمایش داده شود تا Media Query آن را کنترل کند */
        }


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


@media (min-width:768px){
        .menu-item { position: relative; cursor: pointer; }
        .menu-item > a { text-decoration: none; color: #444; font-size: 14px; font-weight: 600; }


    header{
        /* استایل زیرمنوها */
        display:block;
        .submenu {
    }
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background: #fff;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            padding: 10px 0;
            width: 180px;
            border-radius: 5px;
            z-index: 1000;
        }


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


/* مخفی شدن کامل در موبایل */
        /* استایل دکمه ثبت‌نام */
        .btn-signup {
            background-color: #e91e63;
            color: #fff !important;
            padding: 10px 25px;
            border-radius: 30px;
            transition: all 0.3s;
        }
        .btn-signup:hover { background-color: #c2185b; }


@media (max-width:767px){
        /* --- تغییرات برای موبایل --- */
 
        /* Media Query برای موبایل و تبلت: منو را مخفی می‌کند */
    header{
        @media (max-width: 1024px) {
        display:none;
            .desktop-nav {
    }
                display: none !important; /* منو را کاملاً مخفی می‌کند */
            }
            /* اگر بخواهید در موبایل المان دیگری نمایش داده شود، اینجا اضافه کنید */
        }


    body{
        /* Media Query برای دسکتاپ: منو را نمایش می‌دهد */
        padding-top:0;
        @media (min-width: 1024px) {
     }
            .desktop-nav {
                display: block !important; /* اطمینان از نمایش در دسکتاپ */
            }
        }
     </style>
</head>
<body>


}
<!-- منوی ناوبری دسکتاپ -->
<nav class="desktop-nav">
    <ul class="menu-wrapper">
        <li><a href="#">اصلی</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>
            </ul>
        </li>


nav ul{
        <!-- شرایط و ضوابط -->
    list-style:none;
        <li class="menu-item" onmouseover="showSub(this)" onmouseout="hideSub(this)">
    margin:0;
            <a>شرایط و ضوابط ▾</a>
    padding:0;
            <ul class="submenu">
}
                <li><a href="#">شرایط سن و جسمانی</a></li>
                <li><a href="#">ممنوعیت‌های پزشکی</a></li>
                <li><a href="#">سوالات متداول</a></li>
                <li><a href="#">ضوابط شرعی</a></li>
            </ul>
        </li>


nav a{
        <li><a href="#">استعلام هزینه</a></li>
    text-decoration:none;
        <li><a href="#">مناطق و شهرها</a></li>
     white-space:nowrap;
        <li><a href="#" class="btn-signup">ثبت‌نام سریع</a></li>
}
     </ul>
</nav>


.dropdown-menu{
<script>
     min-width:220px;
     // تابع ساده برای نمایش زیرمنو
}
     function showSub(el) {
</style>
         // اطمینان از اینکه زیرمنو فقط در صورتی نمایش داده شود که صفحه به اندازه کافی بزرگ باشد
 
         if (window.innerWidth > 1024) {
<!-- =========================
             el.querySelector('.submenu').style.display = 'block';
    HEADER / MAIN MENU
        }
========================= -->
    }
<header
    // تابع برای مخفی کردن زیرمنو
     class="fixed top-0 left-0 right-0 z-50 bg-white shadow-md border-b border-gray-100">
    function hideSub(el) {
 
        el.querySelector('.submenu').style.display = 'none';
    <nav
    }
         class="w-full"
         aria-label="منوی اصلی">
 
        <div class="max-w-7xl mx-auto px-5">
 
             <div class="hidden md:flex items-center justify-between h-16">
 
                <!-- لوگو -->
                <div class="font-bold text-pink-600 text-xl whitespace-nowrap">
                    اهدای مثبت بخشنده
                </div>
 
                <!-- منو -->
                <ul class="flex items-center gap-7 h-full">
 
                    <li>
                        <a href="#"
                          class="text-gray-700 hover:text-pink-600 transition-colors duration-200">
                            اصلی
                        </a>
                    </li>
 
                    <!-- انواع خدمات -->
                    <li class="relative group">
 
                        <a href="#"
                          class="flex items-center text-gray-700 hover:text-pink-600 transition-colors">
 
                            انواع خدمات اهدایی
 
                            <svg
                                class="w-4 h-4 mr-1"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24">
 
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M19 9l-7 7-7-7"/>
                            </svg>
 
                        </a>
 
                        <ul class="dropdown-menu py-2">
 
                            <li><a href="/wiki/اهدای_تخمک" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">اهدای تخمک</a></li>
 
                            <li><a href="/wiki/رحم_جایگزین" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">رحم جایگزین</a></li>
 
                            <li><a href="/wiki/اهدای_جنین" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">اهدای جنین</a></li>
 
                        </ul>
 
                    </li>
 
                    <!-- شرایط -->
                    <li class="relative group">
 
                        <a href="#"
                          class="flex items-center text-gray-700 hover:text-pink-600 transition-colors">
 
                            شرایط و ضوابط
 
                            <svg
                                class="w-4 h-4 mr-1"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24">
 
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M19 9l-7 7-7-7"/>
 
                            </svg>
 
                        </a>
 
                        <ul class="dropdown-menu py-2">
 
                            <li><a href="/wiki/شرایط_سن_و_جسمانی" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">شرایط سن و جسمانی</a></li>
 
                            <li><a href="/wiki/ممنوعیت‌های_پزشکی" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">ممنوعیت‌های پزشکی</a></li>
 
                            <li><a href="/wiki/سوالات_متداول" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">سوالات متداول</a></li>
 
                            <li><a href="/wiki/ضوابط_شرعی" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">ضوابط شرعی</a></li>
 
                        </ul>
 
                    </li>
 
                    <li>
                        <a href="/wiki/استعلام_هزینه"
                          class="text-gray-700 hover:text-pink-600 transition-colors">
                            استعلام هزینه
                        </a>
                    </li>
 
                    <li>
                        <a href="/wiki/مناطق_خدماتی"
                          class="text-gray-700 hover:text-pink-600 transition-colors">
                            مناطق و شهرها
                        </a>
                    </li>
 
                </ul>
 
                <!-- دکمه -->
 
                <button
                    onclick="openModal()"
                    class="bg-pink-600 hover:bg-pink-700 text-white px-5 py-2 rounded-full font-bold shadow transition">
 
                    ثبت‌نام سریع
 
                </button>
 
            </div>
 
        </div>


     </nav>
     // یک رویداد listener اضافه می‌کنیم که اگر اندازه صفحه تغییر کرد، وضعیت نمایش زیرمنو را بررسی کند
    window.addEventListener('resize', () => {
        // اگر اندازه صفحه کوچکتر از ۱۰۲۴ پیکسل شد، اطمینان حاصل کنیم که هیچ زیرمنویی باز نماند
        if (window.innerWidth <= 1024) {
            document.querySelectorAll('.submenu').forEach(sub => sub.style.display = 'none');
        }
    });
</script>


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

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

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

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