آموزش ساخت منو ریسپانسیو زیبا با css
آموزش ویدئویی ساخت منوی ریسپانسیو
در این ویدیو قصد داریم روش ساخت منوی ریسپانسیو یا واکنشگرا را با استفاده از html,css به شما عزیزان آموزش دهیم. کد ویدئو در قسمت پایین قابل مشاهده است
چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.
مشاهده یا دانلود فیلم بالادر این بخش از آموزش css به سراغ آموزش ساخت منو ریسپانسیو با css می رویم. در تاپ سایت 98 می توانید آموزش ساخت منوهای مختلف با html , css را مشاهده فرمایید. در این آموزش دو مثال زیبا را خواهیم داشت.
ساخت منو با HTML , CSS
در بخش پایین یک مثال ساخت منو با HTML , CSS را خواهید دید. این کد را می توانید در یک فایل html ذخیره کده و اجرا کنید تا نتیجه را ببینید.
یک منو افقی را مشاهده خواهید کرد.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="https://topsite98.com/" class="active">TopSite98</a>
<a href="https://topsite98.com/">HTML</a>
<a href="https://topsite98.com/">CSS</a>
<a href="https://topsite98.com/">JQUERY</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>TopSite98.com</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive"
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
کد html ساخت منو ریسپانسیو با css
در این قسمت می خواهیم با تغییر کد آن را ریسپانسیو یا واکنشگرا کنیم.
یک منو واکنشگرا یا ریسپانسیو با تغییر سایز پنجره مرورگر تغییر می کند.
<a href="https://topsite98.com/" class="active">TopSite98</a>
<a href="https://topsite98.com/">HTML</a>
<a href="https://topsite98.com/">CSS</a>
<a href="https://topsite98.com/">JQUERY</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>TopSite98.com</h2>
<p>Resize the browser window to see how it works.</p>
</div>
کد بالا شامل دو بلاک یا div میباشد. بلاک اول برای منو ریسپانسیو و بلاک دوم برای متنی که زیر منو قرار بگیرد.
کد css ساخت منو ریسپانسیو با css
در بخش پایین کد css ساخت منو ریسپانسیو با css را مشاهده می کنید.
کد کامل منو را در پایین قرار خواهیم داد و می توانید از آن استفاده نمایید.
یکی از کارهایی که باید در منوی ریسپانسیو یا واکنشگرا انجام داد این است که دکمه منو ابتدا مخفی شود و سپس با کوچک شدن پنجره ظاهر شود.
در کد media screen مشخص می کنیم که در سایزهای مختلف پنجره چه اتفاقی بیفتد.
با بزرگ شدن پنجره ، دکمه منو مخفی شده و با کوچک شدن پنجره مرورگر نمایش داده شود.
مثلا وقتی با موبایل سایت ریسپانسیوی را باز می کنید منو مخفی شده و با کلیک روی دکمه ظاهر می شود.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
کد کامل ساخت منو ریسپانسیو زیبا با css
در این قسمت کد کامل ساخت منو ریسپانسیو زیبا با css را می بینید .
می توانید این کد را در یک فایل html ذخیره کنید و اجرا نمایید. همچنین می توانید این کد را در پروژه های خود استفاده کنید.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="https://topsite98.com/" class="active">TopSite98</a>
<a href="https://topsite98.com/">HTML</a>
<a href="https://topsite98.com/">CSS</a>
<a href="https://topsite98.com/">JQUERY</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>TopSite98.com</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive"
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
امیدواریم این آموزش برای شما موثر باشد.
منبع: تاپ سایت 98
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید