چگونه ایجاد شود: منوی ثابت

چگونه منوی ثابت بالایی ایجاد کنیم

مرحله اول - اضافه کردن HTML:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>
<div class="main">
  <p>Some text some text some text some text..</p>
</div>

مرحله دوم - اضافه کردن CSS:

برای ایجاد منوی ثابت در بالای صفحه، از position:fixed و top:0لطفاً توجه داشته باشید که منوی ثابت ممکن است محتوای دیگر شما را پوشش دهد. برای حل این مشکل، لطفاً یک مارژین بالایی برابر یا بزرگتر از ارتفاع منو اضافه کنید (margin-top).

/* 导航栏 */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* 将导航栏设置为固定位置 */
  top: 0; /* 将导航栏置于页面顶部 */
  width: 100%; /* 全宽 */
}
/* 导航栏内的链接 */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 鼠标悬停时更改背景 */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* 主要内容 */
.main {
  margin-top: 30px; /* 添加上外边距以避免内容重叠 */
}

آزمایش کنید

چگونه منوی پایینی ثابت ایجاد کنیم

برای ایجاد منو پایینی ثابت، از position:fixed و bottom:0：

/* 导航栏 */
.navbar {
  position: fixed; /* 将导航栏设置为固定位置 */
  bottom: 0; /* 将导航栏置于页面底部 */
  width: 100%; /* 全宽 */
}
/* Main content */
.main {
  margin-bottom: 30px; /* 添加下外边距以避免内容重叠 */
}

آزمایش کنید

صفحات مرتبط

آموزش:نوار ناوبری CSS