Как создать: фиксированное меню

Как создать фиксированное верхнее меню

Шаг 1 - Добавьте HTML:

<div class="navbar">
  <a href="#home">Дом</a>
  <a href="#news">Новости</a>
  <a href="#contact">Контакт</a>
</div>
<div class="main">
  <p>Некоторый текст некий текст некий текст некий текст..</p>
</div>

Шаг 2 - Добавьте 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 {
  margin-bottom: 30px; /* Добавление внешней нижней отступа для предотвращения наложения содержимого */
}

Попробуйте сами

Связанные страницы

Урок:CSS навигационная панель