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

<html>
<style>

/* ===============================
   Reset & Mobile First
================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

.poly-menu-container {
    background-color: #f8f9fa;
    width: 100%;
    direction: rtl;
    position: relative;
    font-family: IRANSans,  sans-serif;
    border-bottom: 1px solid #ddd;
}


/* ===============================
   Mobile Header
================================ */

.mobile-header {

    display: flex;
    height: 60px;
    align-items: center;
    justify-content: flex-start;

    padding: 0 20px;

    background:#fff;

    box-shadow:
    0 2px 5px rgba(0,0,0,.05);

}


#menu-toggle {
    display:none;
}


/* Hamburger */

.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;

}

}


</style>


<input 
type="checkbox" 
id="menu-toggle"
aria-label="باز کردن منوی سایت">


<div class="poly-menu-container">


<header class="mobile-header">


<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>

</html>