پرش به محتوا

منو اصلی/دماوند پلیمر - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
برچسب: برگردانده‌شده
بدون خلاصۀ ویرایش
 
(۲ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html lang="fa" dir="rtl">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
<style>
    /* استایل‌های پایه برای دسکتاپ */
    .poly-menu-container {
        background-color: #f8f9fa;
        font-family: iransans, Arial, sans-serif;
        width: 100%;
        direction: rtl;
    }


    .poly-nav ul {
/* ===============================
        list-style: none;
  Reset & Mobile First
        margin: 0;
================================ */
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }


     .poly-nav li {
*,
        position: relative;
*::before,
    }
*::after {
     box-sizing: border-box;
}


    .poly-nav a {
.poly-menu-container {
        display: block;
    background-color: #f8f9fa;
        padding: 15px 20px;
    width: 100%;
        text-decoration: none;
    direction: rtl;
        color: #333;
    position: relative;
        font-size: 14px;
    font-family: IRANSans,  sans-serif;
        transition: background 0.3s;
    border-bottom: 1px solid #ddd;
    }
}


    .poly-nav a:hover {
        background-color: #e9ecef;
    }


    /* استایل منوی کشویی (Dropdown) در دسکتاپ */
/* ===============================
    .dropdown-content {
  Mobile Header
        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 {
.mobile-header {
        padding: 12px 16px;
        border-bottom: 1px solid #eee;
    }


     .dropdown:hover .dropdown-content {
     display: flex;
        display: block;
    height: 60px;
     }
    align-items: center;
     justify-content: flex-start;


     /* --- بخش ریسپانسیو (موبایل) --- */
     padding: 0 20px;
   
    /* ایجاد یک دکمه منو در موبایل (با استفاده از CSS Trick بدون تغییر HTML) */
    /* نکته: برای کنترل کامل روی موبایل، معمولاً یک checkbox یا دکمه اضافه می‌شود،
      اما طبق درخواست شما بدون تغییر ساختار، از اسکرول افقی هوشمند استفاده می‌کنیم
      که بهترین گزینه برای UX موبایل در منوهای طولانی است و صفحه را اشغال نمی‌کند. */


     @media screen and (max-width: 768px) {
     background:#fff;
        .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 */
        }


        /* مخفی کردن اسکرول‌بار برای زیبایی بیشتر در موبایل */
    box-shadow:
        .poly-nav ul::-webkit-scrollbar {
    0 2px 5px rgba(0,0,0,.05);
            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;
        }


        /* اصلاح منوی کشویی در موبایل */
#menu-toggle {
        .dropdown-content {
    display:none;
            position: static; /* در موبایل منو زیر آیتم باز شود نه شناور */
}
            display: none;
 
            box-shadow: none;
 
            background-color: #f1f1f1;
/* Hamburger */
            width: 100%;
 
        }
.hamburger-icon {
 
    width:30px;
    height:22px;
 
    cursor:pointer;
 
    display:flex;
 
    flex-direction:column;
 
    justify-content:space-between;
 
}
 
 
.hamburger-icon span {
 
    display:block;
 
    width:100%;
 
    height:3px;
 
    background:#333;
 
    border-radius:3px;
 
    transition:.3s;
 
}
 
 
 
/* ===============================
  Navigation Mobile
================================ */
 
 
.poly-nav {
 
    display:none;
 
    position:absolute;
 
    top:60px;
 
    right:0;
 
    left:0;
 
    width:100%;
 
    background:#f8f9fa;
 
    z-index:999;
 
    box-shadow:
    0 8px 20px rgba(0,0,0,.08);
 
}
 
 
#menu-toggle:checked ~ .poly-menu-container .poly-nav {
 
    display:block;
 
}
 
 
 
.poly-nav ul {
 
    list-style:none;
 
    margin:0;
 
    padding:0;
 
    display:flex;
 
    flex-direction:column;
 
}
 
 
 
.poly-nav li {
 
    width:100%;
 
    position:relative;
 
}
 
 
 
.poly-nav a {
 
    display:flex;
 
    align-items:center;
 
    justify-content:flex-start;
 
    width:100%;
 
    min-height:52px;
 
    padding:15px 20px;
 
    color:#333;
 
    text-decoration:none;
 
    font-size:14px;
 
    border-bottom:1px solid #eee;
 
    transition:.3s;
 
}
 
 
 
.poly-nav a:hover,
.poly-nav a:focus {
 
    background:#e9ecef;
 
}
 
 
 
/* ===============================
  Dropdown Mobile
================================ */
 
 
.dropdown-content {
 
    display:none;
 
    position:static;
 
    width:100%;
 
    background:#ededed;
 
}
 
 
 
.dropdown-content a {
 
    padding-right:35px;
 
    font-size:13px;
 
}
 
 
.dropdown:focus-within
.dropdown-content {
 
    display:block;
 
}
 
 
 
/* ===============================
  Hamburger Animation
================================ */
 
 
#menu-toggle:checked
~ .poly-menu-container
.mobile-header
.hamburger-icon span:nth-child(1){
 
    transform:
    translateY(9px)
    rotate(45deg);
 
}
 
 
#menu-toggle:checked
~ .poly-menu-container
.mobile-header
.hamburger-icon span:nth-child(2){
 
    opacity:0;
 
}
 
 
#menu-toggle:checked
~ .poly-menu-container
.mobile-header
.hamburger-icon span:nth-child(3){
 
    transform:
    translateY(-9px)
    rotate(-45deg);
 
}
 
 
 
 
/* ===============================
  Desktop Version
================================ */
 
 
@media(min-width:769px){
 
 
.mobile-header{
 
    display:none;
 
}
 
 
.poly-nav{
 
    display:block;
 
    position:static;
 
    box-shadow:none;
 
}
 
 
 
.poly-nav ul{
 
    flex-direction:row;
 
    justify-content:center;
 
    align-items:center;
 
}
 
 
 
.poly-nav li{
 
    width:auto;
 
}
 
 
 
.poly-nav a{
 
    width:auto;
 
    padding:15px 20px;
 
    border:none;
 
}
 
 
 
.dropdown-content{
 
    display:none;
 
    position:absolute;
 
    right:0;
 
    top:100%;
 
    min-width:190px;
 
    background:#fff;
 
    box-shadow:
    0 10px 25px rgba(0,0,0,.1);
 
}
 
 
 
.dropdown:hover
.dropdown-content,
.dropdown:focus-within
.dropdown-content{
 
    display:block;
 
}
 
 
.dropdown-content a{
 
    padding:12px 16px;
 
    border-bottom:1px solid #eee;
 
    white-space:nowrap;
 
}
 
 
}
 
 
/* ===============================
  Small Mobile Optimization
================================ */
 
 
@media(max-width:360px){
 
.poly-nav a{
 
    font-size:13px;
 
    padding-right:15px;
 
    padding-left:15px;
 
}
 
}
 


        /* نمایش منوی کشویی هنگام لمس در موبایل */
        .dropdown:active .dropdown-content,
        .dropdown:focus-within .dropdown-content {
            display: block;
        }
    }
</style>
</style>
</head>
 
<body>
 
<input
type="checkbox"
id="menu-toggle"
aria-label="باز کردن منوی سایت">
 


<div class="poly-menu-container">
<div class="poly-menu-container">
    <nav class="poly-nav" aria-label="منوی محصولات مخزن پلی اتیلن">
        <ul>
            <li><a href="/wiki/اصلی">اصلی</a></li>
            <li><a href="/wiki/مخزن_پلی_اتیلن_آب_شرب">مخزن آب شرب</a></li>
            <li><a href="/wiki/مخزن_پلی_اتیلن_صنعتی">مخزن صنعتی</a></li>
           
            <!-- بخش منوی کشویی -->
            <li class="dropdown">
                <a href="/wiki/انواع_مخزن_پلی_اتیلن">انواع و ظرفیت‌ها ▾</a>
                <div class="dropdown-content">
                    <a href="/wiki/مخزن_یک_قسمتی">مخزن یک قسمتی</a>
                    <a href="/wiki/مخزن_دو_قسمتی">مخزن دو قسمتی</a>
                    <a href="/wiki/مخزن_سه_قسمتی">مخزن سه قسمتی</a>
                    <a href="/wiki/مخزن_پلی_اتیلن_بزرگ">مخازن با ظرفیت بالا</a>
                </div>
            </li>


            <li><a href="/wiki/قیمت_مخزن_پلی_اتیلن">استعلام قیمت</a></li>
 
            <li><a href="/wiki/راهنمای_خرید_مخزن">راهنمای خرید</a></li>
<header class="mobile-header">
        </ul>
 
    </nav>
 
<label
for="menu-toggle"
class="hamburger-icon"
aria-label="منوی موبایل">
 
<span></span>
<span></span>
<span></span>
 
</label>
 
 
</header>
 
 
 
<nav
class="poly-nav"
aria-label="منوی محصولات مخزن پلی اتیلن">
 
 
<ul>
 
 
<li>
<a href="/wiki/اصلی">
اصلی
</a>
</li>
 
 
 
<li>
<a href="/wiki/مخزن_پلی_اتیلن_آب_شرب">
مخزن آب شرب
</a>
</li>
 
 
 
<li>
<a href="/wiki/مخزن_پلی_اتیلن_صنعتی">
مخزن صنعتی
</a>
</li>
 
 
 
<li class="dropdown">
 
 
<a href="/wiki/انواع_مخزن_پلی_اتیلن">
 
انواع و ظرفیت‌ها ▾
 
</a>
 
 
 
<div class="dropdown-content">
 
 
<a href="/wiki/مخزن_یک_قسمتی">
مخزن یک قسمتی
</a>
 
 
<a href="/wiki/مخزن_دو_قسمتی">
مخزن دو قسمتی
</a>
 
 
<a href="/wiki/مخزن_سه_قسمتی">
مخزن سه قسمتی
</a>
 
 
<a href="/wiki/مخزن_پلی_اتیلن_بزرگ">
مخازن با ظرفیت بالا
</a>
 
 
</div>
 
 
</li>
 
 
 
 
<li>
<a href="/wiki/قیمت_مخزن_پلی_اتیلن">
استعلام قیمت
</a>
</li>
 
 
 
<li>
<a href="/wiki/راهنمای_خرید_مخزن">
راهنمای خرید
</a>
</li>
 
 
</ul>
 
 
</nav>
 
 
</div>
</div>


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

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

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