منوی زیبا و کاملا ریسپانسیو جهت استفاده در وبلاگ
منو یک جز اصلی در هر سایتی می باشد و برای کاربران دسترسی ساده به تمام بخش های سایت را فراهم می کند ما امروز می خواهیم در این پست کد منوی ناوبری را در اختیار شما بگذاریم که از ویژگی های آن میتوان به واکنشگرا بودن , زیبایی و در عین حال سادگی آن اشاره کرد . ما نسخه غیر واکنشگرا مخصوص قالب هایی که واکنشگرا طراحی نشدند نیز برای شما آماده کرده ایم.
در ادامه پیشنمایش این منو را می بینید...
جهت استفاده از منوی بالا در وبلاگ یا سایت خود تمامی کد های مربوط به HTML منوی قالب خود را پاک کرده و کد های زیر را جایگزین کنید.سپس لینک هر یک از بخش ها را جایگزین (###LINK###) کنید. برای مثال به جای ###LINK### لینک تماس باما را قرار دهید تا کاربر با لمس دکمه مورد نظر به بخش مربوطه ارجاع داده شود.
کد منوی ریسپانسیو مخصوص استفاده در قالب ریسپانسیو (واکنشگرا)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0e4753;
}
ul.topnav li {float:right;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #000;}
ul.topnav li a.active {background-color: #e03151;}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {float: none;}
}
</style>
</head>
<body>
<ul class="topnav">
<li><a class="active" href="###LINK###">خانه</a></li>
<li><a href="###LINK###">تماس با من</a></li>
<li><a href="###LINK###">سراغاز</a></li>
<li><a href="###LINK###">درباره من</a></li>
</ul>
<div style="padding:0 16px;">
</div>
</body>
</html>
کد منو برای استفاده در قالب هایی که ریسپانسیو (واکنشگرا)نیستند
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0e4753;
}
ul.topnav li {float:right;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #000;}
ul.topnav li a.active {background-color: #e03151;}
ul.topnav li.right {float: right;}
</style>
</head>
<body>
<ul class="topnav">
<li><a class="active" href="###LINK###">خانه</a></li>
<li><a href="###LINK###">تماس با من</a></li>
<li><a href="###LINK###">سراغاز</a></li>
<li><a href="###LINK###">درباره من</a></li>
</ul>
<div style="padding:0 16px;">
</div>
</body>
</html>
