ساخت منو افقی به همراه ریسپانسیو با CSS3 , HTML5 [بایگانی]

poriab

سه شنبه 23 دی 1393, 19:55 عصر

سلام
همان طور که در پست قبلی (http://hilearning.ir/post/59-%D8%B3%D8%A7%D8%AE%D8%AA-%D9%85%D9%86%D9%88-%D8%B4%DB%8C%DA%A9-%D8%A8%D8%A7-html5-css3) قول داده بودیم می خواهیم منو ساخته شده را با کمی تغییرات زیباتر کنیم و در سایز ۴۸۰px واکنش دار کنیم . با فهمیدن این بخش می توانید در مابقی سایزها ریسپانسیو را انجام بدهید ( در منو تا همین مقدار کافی است )
خب می رویم سراغ کد ها :

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Menu</title>
<link rel="stylesheet" href="style.css">

</head>
<body dir = "rtl">

<nav>

<ul class = "menu">
<div class = "image-menu"> </div>
<li><a href = "#">صفحه اصلی</a></li>
<li><a href = "#">فروشگاه سایت</a></li>
<li><a href = "#">درباره ما</a></li>
<li><a href = "#">خدمات ارائه شده</a></li>
<li><a href = "#">تماس با ما</a></li>
</ul>
</nav>
</body>
</html>

و کدهای CSS :

* {
padding : 0px;
margin : 0px;

}
nav ul li {
display: inline-block;
height : 25px;
line-height: 20px;
padding : 15px;

}
nav ul li a {
color : #fff;
font : 12px tahoma;
text-decoration: none;

}
nav {
background : #AD0076;
}
nav ul li:hover {
background : #1F00AD;
cursor: pointer;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}

.image-menu {
width : 40px;
height : 40px;
background : url(menu.png);
display : none;
}

@media screen and (max-width: 480px) {
.image-menu {
display: block;
}
nav ul li {
border: 1px solid rgba(255,255,255,.1);
}
nav ul li {
display: block;
}
}

برای توضیحات کد ها می توانید به اینجا مراجعه کنید :
http://hilearning.ir/post/82-%D8%B3%D8%A7%D8%AE%D8%AA-%D9%85%D9%86%D9%88-%D8%A7%D9%81%D9%82%DB%8C-%D8%B4%DB%8C%DA%A9-%D8%A8%D9%87-%D9%87%D9%85%D8%B1%D8%A7%D9%87-%D8%B1%DB%8C%D8%B3%D9%BE%D8%A7%D9%86%D8%B3%DB%8C%D 9%88-%D8%A8%D8%A7