خواندن ۱ دقیقه·۳ سال پیش

ایجاد نوار منو بالایی در وب سایت

ایجاد نوار منو بالایی در وب سایت

در این مقاله می آموزیم که چطور یک نوار منوی بالایی با استفاده از دستور CSS ایجاد کنیم.

ساخت نوار منو بالایی در وب سایت

قدم اول : کد HTML را اضافه کنید.
مثال :

<div class=&quotTOPNAV&quot>

<a class=&quotACTIVE&quot href=&quot#HOME&quot>HOME</a>

<a href=&quot#NEWS&quot>NEWS</a>

<a href=&quot#CONTACT&quot>CONTACT</a>

<a href=&quot#ABOUT&quot>ABOUT</a>

</div>

قدم دوم : حال کد CSS زیر را وارد کنید تا نوار منو بالایی برای شما ساخته شود.

مثال ساخت نوار منو بالایی در وبسایت :

<!DOCTYPE html>
<html>
<head>
<meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1&quot>
<style>
body {
 margin: 0;
 font-family: Arial, Helvetica, sans-serif;
}
.topnav {
 overflow: hidden;
  background-color: #333;
}
.topnav a {
  float: left;
color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;
}
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
.topnav a.active {
  background-color: #4CAF50;
 color: white;
}
</style>
</head>
<body>
<div class=&quottopnav&quot>
 <a class=&quotactive&quot href=&quot#home&quot>Home</a>
  <a href=&quot#news&quot>News</a>
  <a href=&quot#contact&quot>Contact</a>
  <a href=&quot#about&quot>About</a>
</div>
<div style=&quotpadding-left:16px&quot>
  <h2>Top Navigation Example</h2>
  <p>Some content..</p>
</div>
</body>
</html>

توجه : برای ساخت منوهایی که ریسپانسیو باشند و تجربه کاربری خوشایندی را برای کاربر فراهم کنند، مقاله ایجاد منو ریسپانسیو در طراحی وب سایت را مطالعه کنید.

برای مشاهده نمونه مثال های بیشتر بروی دوره آموزش طراحی سایت کلیک نمایید.

آموزش طراحی سایتدوره آموزش طراحی سایتآموزش برنامه نویسیآموزش html

برلیانس

شاید از این پست‌ها خوشتان بیاید