منوی Drop down واکنش گرا

سلام دوستان. در این مطلب یا میگیرید چطور با html و css یه منوی drop down واکنش گرا درست کنید درست کنید.

اول از همه باید یه سند html درست کنید و کد های زیر رو توش بریزید.

<html dir="rtl">
    <head>
        <link rel="stylesheet" href="style.css">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <nav>
            <ul>
                <li>
                    <a href="#">
                        خانه
                    </a>
                </li>
                <li>
                    <a href="#">
                        درباره ما
                    </a>
                </li>
                <li class="dropDown">
                    <a href="#Drop">
                        دانلود
                    </a>
                    <div class="dropDownItem">
                        <a href="#">Blog.ir</a>
                        <a href="#">Bayan.ir</a>
                        <a href="#">salam.ir</a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        تماس باما
                    </a>
                </li>
            </ul>
        </nav>
    </body>
</html>

نتیجه ی کد بالا »

حالا نوبت استایل دادن هست

* {
	margin: 0;
	padding: 0;
	font-family: "vazir";
}
@font-face {
	font-family: "vazir";
	src: url('//bayanbox.ir/download/7479136591499922598/Vazir.woff2') format('woff');
}
nav {
	width: 100%;
	float: right;
	display: block;
	background: #2196F3;
}
nav ul {
	width: 960px;
	display: block;
	margin: 0px auto;
}
nav ul li {
	display: inline-block;
	float: right;
	position: relative;
}
nav ul li a{
	display: block;
	color: #fff;
	text-align: center;
	text-decoration: none;
	padding: 10px 15px;
	border-left: 1px solid #1565C0;
	transition: all .4s ease;
}
nav ul li a:hover {
	background: #1565C0;
}
.dropDownItem {
	display: none;
	position: absolute;
	background: #2196F3;
	border-right: 1px solid #1565C0;
	transition: all .4s ease;
	min-width: 180px;
}
.dropDown:hover .dropDownItem {display: block;}

تا اینجا منوی Drop down ساخته شده برای واکنش گرا کردن کد های زیر را اضافه میکنیم

@media screen and (max-width: 960px)
{
	nav ul {
		width: 95%;
	}
}
@media screen and (max-width: 700px)
{
	nav ul {
		width: 100%;
	}
	nav ul li {
		display: block;
		float: none;
	}
	nav ul li a{
		border-width: 0px;
		position: static;
	}
	.dropDownItem {
		width: 100%;
		position: static;
	}
}

در نهایت موقع نمایش با مبایل نتیجه ی کار این در میاد »