|
|
| خط ۱: |
خط ۱: |
| <html lang="fa" dir="rtl"> | | <html> |
| <head>
| |
| <meta charset="UTF-8">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| <style>
| |
| /* استایلهای پایه برای دسکتاپ */
| |
| .poly-menu-container {
| |
| background-color: #f8f9fa;
| |
| font-family: iransans, Arial, sans-serif;
| |
| width: 100%;
| |
| direction: rtl;
| |
| }
| |
| | |
| .poly-nav ul {
| |
| list-style: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| }
| |
| | |
| .poly-nav li {
| |
| position: relative;
| |
| }
| |
| | |
| .poly-nav a {
| |
| display: block;
| |
| padding: 15px 20px;
| |
| text-decoration: none;
| |
| color: #333;
| |
| font-size: 14px;
| |
| transition: background 0.3s;
| |
| }
| |
| | |
| .poly-nav a:hover {
| |
| background-color: #e9ecef;
| |
| }
| |
| | |
| /* استایل منوی کشویی (Dropdown) در دسکتاپ */
| |
| .dropdown-content {
| |
| display: none;
| |
| position: absolute;
| |
| background-color: #fff;
| |
| min-width: 160px;
| |
| box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
| |
| z-index: 1;
| |
| right: 0;
| |
| }
| |
| | |
| .dropdown-content a {
| |
| padding: 12px 16px;
| |
| border-bottom: 1px solid #eee;
| |
| }
| |
| | |
| .dropdown:hover .dropdown-content {
| |
| display: block;
| |
| }
| |
| | |
| /* --- بخش ریسپانسیو (موبایل) --- */
| |
|
| |
| /* ایجاد یک دکمه منو در موبایل (با استفاده از CSS Trick بدون تغییر HTML) */
| |
| /* نکته: برای کنترل کامل روی موبایل، معمولاً یک checkbox یا دکمه اضافه میشود،
| |
| اما طبق درخواست شما بدون تغییر ساختار، از اسکرول افقی هوشمند استفاده میکنیم
| |
| که بهترین گزینه برای UX موبایل در منوهای طولانی است و صفحه را اشغال نمیکند. */
| |
| | |
| @media screen and (max-width: 768px) {
| |
| .poly-nav ul {
| |
| display: flex;
| |
| flex-wrap: nowrap; /* جلوگیری از رفتن به خط بعد */
| |
| overflow-x: auto; /* فعال سازی اسکرول افقی */
| |
| overflow-y: hidden;
| |
| white-space: nowrap; /* جلوگیری از شکستن متن */
| |
| -webkit-overflow-scrolling: touch; /* اسکرول نرم در iOS */
| |
| padding: 10px 5px;
| |
| justify-content: flex-start; /* شروع از راست در حالت RTL */
| |
| }
| |
| | |
| /* مخفی کردن اسکرولبار برای زیبایی بیشتر در موبایل */
| |
| .poly-nav ul::-webkit-scrollbar {
| |
| display: none;
| |
| }
| |
| .poly-nav ul {
| |
| -ms-overflow-style: none; /* IE and Edge */
| |
| scrollbar-width: none; /* Firefox */
| |
| }
| |
| | |
| .poly-nav li {
| |
| display: inline-block;
| |
| }
| |
| | |
| .poly-nav a {
| |
| padding: 10px 15px;
| |
| font-size: 13px;
| |
| }
| |
| | |
| /* اصلاح منوی کشویی در موبایل */
| |
| .dropdown-content {
| |
| position: static; /* در موبایل منو زیر آیتم باز شود نه شناور */
| |
| display: none;
| |
| box-shadow: none;
| |
| background-color: #f1f1f1;
| |
| width: 100%;
| |
| }
| |
| | |
| /* نمایش منوی کشویی هنگام لمس در موبایل */
| |
| .dropdown:active .dropdown-content,
| |
| .dropdown:focus-within .dropdown-content {
| |
| display: block;
| |
| }
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
|
| |
|
| <div class="poly-menu-container"> | | <div class="poly-menu-container"> |
| خط ۱۳۸: |
خط ۲۵: |
| </div> | | </div> |
|
| |
|
| </body>
| | |
| </html> | | </html> |