منو اصلی/بخشنده - فراغیب
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۳: | خط ۳: | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<title>منوی دسکتاپ واکنشگرا</title> | |||
<style> | <style> | ||
/* تعریف فونت ایران سنس */ | |||
@font-face { | |||
font-family: 'Iran Sans'; | |||
src: url('assets/fonts/iransans/woff2/iransans.woff2') format('woff2'), | |||
url('assets/fonts/iransans/woff/iransans.woff') format('woff'); | |||
font-weight: normal; | |||
font-style: normal; | |||
} | |||
/* تنظیمات کلی منو */ | /* تنظیمات کلی منو */ | ||
body { margin: 0; padding: 0; } /* اطمینان از نبود padding/margin پیشفرض */ | |||
.desktop-nav { | .desktop-nav { | ||
font-family: Tahoma, Arial, sans-serif; | font-family: 'Iran Sans', Tahoma, Arial, sans-serif; /* اولویت با ایران سنس */ | ||
background: #fff; | background: #fff; | ||
padding: 10px 50px; | padding: 10px 50px; | ||
box-shadow: 0 2px 5px rgba(0,0,0,0.05); | box-shadow: 0 2px 5px rgba(0,0,0,0.05); | ||
display: block; /* همیشه نمایش داده شود تا Media Query آن را کنترل کند */ | |||
} | } | ||
| خط ۵۳: | خط ۶۶: | ||
.btn-signup:hover { background-color: #c2185b; } | .btn-signup:hover { background-color: #c2185b; } | ||
/* | /* --- تغییرات برای موبایل --- */ | ||
/* Media Query برای موبایل و تبلت: منو را مخفی میکند */ | |||
@media (max-width: 1024px) { | @media (max-width: 1024px) { | ||
.desktop-nav { display: none !important; } | .desktop-nav { | ||
display: none !important; /* منو را کاملاً مخفی میکند */ | |||
} | |||
/* اگر بخواهید در موبایل المان دیگری نمایش داده شود، اینجا اضافه کنید */ | |||
} | |||
/* Media Query برای دسکتاپ: منو را نمایش میدهد */ | |||
@media (min-width: 1024px) { | |||
.desktop-nav { | |||
display: block !important; /* اطمینان از نمایش در دسکتاپ */ | |||
} | |||
} | } | ||
</style> | </style> | ||
| خط ۶۱: | خط ۸۵: | ||
<body> | <body> | ||
<!-- منوی ناوبری دسکتاپ --> | |||
<nav class="desktop-nav"> | <nav class="desktop-nav"> | ||
<ul class="menu-wrapper"> | <ul class="menu-wrapper"> | ||
| خط ۹۴: | خط ۱۱۹: | ||
<script> | <script> | ||
// تابع ساده برای نمایش زیرمنو | // تابع ساده برای نمایش زیرمنو | ||
function showSub(el) { el.querySelector('.submenu').style.display = 'block'; } | function showSub(el) { | ||
function hideSub(el) { el.querySelector('.submenu').style.display = 'none'; } | // اطمینان از اینکه زیرمنو فقط در صورتی نمایش داده شود که صفحه به اندازه کافی بزرگ باشد | ||
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> | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
نسخهٔ ۱۶ اوت ۲۰۲۶، ساعت ۰۷:۲۳