logo
logo
تبلیغ کلیکی تاپ سایت 98

آموزش ساخت منو ریسپانسیو زیبا با css

آموزش ساخت منو ریسپانسیو زیبا با css
هدایت عباسی آموزش CSS

آموزش ویدئویی ساخت منوی ریسپانسیو

در این ویدیو قصد داریم روش ساخت منوی ریسپانسیو یا واکنشگرا را با استفاده از html,css به شما عزیزان آموزش دهیم. کد ویدئو در قسمت پایین قابل مشاهده است

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش css به سراغ آموزش ساخت منو ریسپانسیو با css می رویم. در تاپ سایت 98 می توانید آموزش ساخت منوهای مختلف با html , css را مشاهده فرمایید.  در این آموزش دو مثال زیبا را خواهیم داشت.

ساخت منو با HTML , CSS

در بخش پایین یک مثال ساخت منو با HTML , CSS را خواهید دید. این کد را می توانید در یک فایل html ذخیره کده و اجرا کنید تا نتیجه را ببینید.

یک منو افقی را مشاهده خواهید کرد.

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

در این قسمت می خواهیم با تغییر کد آن را ریسپانسیو یا واکنشگرا کنیم.

یک منو واکنشگرا یا ریسپانسیو با تغییر سایز پنجره مرورگر تغییر می کند.

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

 

کد بالا شامل دو بلاک یا div میباشد. بلاک اول برای منو ریسپانسیو و بلاک دوم برای متنی که زیر منو قرار بگیرد.

کد css ساخت منو ریسپانسیو با css

در بخش پایین کد css ساخت منو ریسپانسیو با css را مشاهده می کنید.

کد کامل منو را در پایین قرار خواهیم داد و می توانید از آن استفاده نمایید.

یکی از کارهایی که باید در منوی ریسپانسیو یا واکنشگرا انجام داد این است که دکمه منو ابتدا مخفی شود و سپس با کوچک شدن پنجره ظاهر شود.

در کد media screen مشخص می کنیم که در سایزهای مختلف پنجره چه اتفاقی بیفتد.

با بزرگ شدن پنجره ، دکمه منو مخفی شده و با کوچک شدن پنجره مرورگر نمایش داده شود.

مثلا وقتی با موبایل سایت ریسپانسیوی را باز می کنید منو مخفی شده و با کلیک روی دکمه ظاهر می شود.

 

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

کد کامل ساخت منو ریسپانسیو زیبا با css

در این قسمت کد کامل ساخت منو ریسپانسیو زیبا با css را می بینید .

می توانید این کد را در یک فایل html ذخیره کنید و اجرا نمایید. همچنین می توانید این کد را در پروژه های خود استفاده کنید.

 

<!DOCTYPE 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 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

دوره ارز دیجیتال تاپ سایت 98
دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.