الگو:منو اصلی/دماوند پلیمر: تفاوت میان نسخه‌ها

تفاوت با ویرایش جدیدتر ←

دیداریویکی‌متن

@@ خط ۱: / خط ۱: @@
-<html>
+<html lang="fa" dir="rtl">
+<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>
+</body>
 </html>