« Фиксированное верхнее меню (Header) с использованием CSS, HTML и JS »

Описание материала:

В данном материале мы научимся создавать фиксированное меню (header). В основном, есть заголовок с текстом и навигационный тег с некоторыми элементами навигации. При прокрутке вниз текст заголовка будет скрыт с эффектом анимации, а панель навигации будет закреплена в верхней части веб-страницы. И когда вы прокрутите страницу вверх, раздел заголовка снова откроется. Там мы использовали HTML для создания макета, CSS для стилей и анимации, jQuery для работы. Если вы хотите создать одностраничный веб-сайт, то вы можете создать эту программу, изменив ее. Также вы можете применить этот эффект на своем сайте, используя CSS-коды.

Если вы сейчас думаете о том, как на самом деле выглядит это меню, посмотрите предварительный просмотр, перейдя по ссылке демонстрация после описания к материалу.

Прежде чем делиться исходным кодом, давайте поговорим об этом. Сначала мы создали раздел заголовка с использованием class - ufive-header и внутри него поместили заголовочный текст и тег. Раздел nav содержит 4 элемента для ссылок navbar. Теперь, используя CSS, мы разместили все элементы в нужном месте, как вы можете видеть на превью. Сначала CSS дал всем базовые значения, такие как размер, положение, поля, отступы и т.д., для всех элементов. Для создания эффекта анимации скрытия текста, мы использовали команду CSS transform, а для плавной анимации - команду перехода.

Установка:

Подключаем библиотеку JQuery и шрифт Cuprum:

Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cuprum&display=swap">


HTML код:
Код
<div class="ufive-header">
  <h1>Пролистайте страницу вниз!</h1>
  <nav>
  <a href="#">Главная</a>
  <a href="#">Форум</a>
  <a href="#">Материалы</a>
  <a href="#">Контакты</a>
  </nav>
</div>


CSS код:
Код
.ufive-header {
  width: 100%;
  height: 300px;
  font-family: "Cuprum";
  background-color: #f3be81;
  text-align: center;
  position: relative;
  position: fixed;
  top: 0;
  overflow: hidden;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.ufive-header h1 {
  font-size: 42px;
  color: #fff;
  line-height: 230px;
  text-transform: uppercase;
  font-weight: 100;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.ufive-header nav {
  position: absolute;
  bottom: 0;
  height: 60px;
  line-height: 60px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
}
.ufive-header nav a {
  color: #fff;
  display: inline-block;
  padding: 10px 15px;
  line-height: 1;
  text-decoration: none;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.ufive-header nav a:hover {
  -moz-box-shadow: 0 0 0 1px #fff;
  -webkit-box-shadow: 0 0 0 1px #fff;
  box-shadow: 0 0 0 1px #fff;
}
.ufive-menu {
  padding-top: 100px;
}
.ufive-menu .ufive-header {
  height: 60px;
  background-color: #f3be81;
}
.ufive-menu .ufive-header h1 {
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
}


JS код:
Код
$(function () {
  $(window).scroll(function () {
  var winTop = $(window).scrollTop();
  if (winTop >= 30) {
  $("body").addClass("ufive-menu");
  } else {
  $("body").removeClass("ufive-menu");
  }
  });
});


Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Меню и навигация | Просмотров: 136


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
avatar