Адаптивная липкая панель навигации для сайта | Responsive Sticky Navigation Bar For A Website

Всем привет! В этом видео вы узнаете, как создать адаптивную липкую панель навигации для веб-сайта с использованием HTML, CSS и ванильного Javascript. О возможностях адаптации: Когда размер экрана устройства становится меньше, панель навигации превращается в фиксированную боковую панель, которую можно разворачивать и сворачивать с помощью кнопок меню (кнопка menu и кнопка закрытия).

Эта панель навигации будет более полезной, потому что при прокрутке вниз в любом месте страницы панель навигации будет видна, поэтому вы можете перемещаться по ссылкам боковой панели (связанным страницам), не возвращаясь к началу страницы. Вы можете легко использовать эту панель навигации для любого веб-сайта, который вы разрабатываете. Давайте посмотрим, как создать эту адаптивную панель навигации на липучке.

Адаптивная липкая панель навигации для сайта | Responsive Sticky Navigation Bar For A Website

СКАЧАТЬ

Сначала создайте файл index.html и файл style.css. После создания этих двух файлов затем привяжите файл style.css между тегами <head></head> к файлу index.html. Затем запустите HTML-часть адаптивной липкой панели навигации в файле index.html как вы можете видеть на видео.

После завершения HTML-части перейдите к файлу style.css и выполните часть оформления адаптивной панели навигации с привязкой, как вы можете видеть на видео. После укладки часть завершена, то перейти к файлу index.html для JavaScript часть.

В файле index.html перед тегом закрытия тела откройте теги <script></script> и заполните Javascript-часть адаптивной липкой панели навигации, чтобы реализовать функцию прокрутки для эффектов на панели навигации при прокрутке. Между тегами script, как вы можете видеть на видео. Итак, это все, надеюсь, это видео будет полезно для создания потрясающей адаптивной липкой панели навигации для веб-сайта с использованием HTML, CSS и ванильного Javascript.

Все исходные коды и файлы доступны для скачивания здесь. Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.

HTML КОД:


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Sticky NavBar | For a Website</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  </head>
  <body>

    <header>
      <a href="#" class="brand">Brand</a>
      <div class="menu">
        <div class="btn">
          <i class="fas fa-times close-btn"></i>
        </div>
        <a href="#">Home</a>
        <a href="#">Services</a>
        <a href="#">About</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
      </div>
      <div class="btn">
        <i class="fas fa-bars menu-btn"></i>
      </div>
    </header>
    <section class="section-main">
      <h1>Sticky Navigation Bar</h1>
    </section>
    <section class="section-two">
      <h2>Protect Rainforests</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <h2>Protect Nature</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>

    <script type="text/javascript">
    //javascript for navigation bar effect on scroll
    window.addEventListener("scroll", function(){
      var header = document.querySelector("header");
      header.classList.toggle('sticky', window.scrollY > 0);
    });

    //javascript for responsive navigation sidebar menu
    var menu = document.querySelector('.menu');
    var menuBtn = document.querySelector('.menu-btn');
    var closeBtn = document.querySelector('.close-btn');

    menuBtn.addEventListener("click", () => {
      menu.classList.add('active');
    });

    closeBtn.addEventListener("click", () => {
      menu.classList.remove('active');
    });
    </script>

  </body>
</html>

CSS КОД:


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body{
  min-height: 100vh;
}

.section-main{
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: url(bg.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 100px;
}

.section-main h1{
  color: rgba(255, 255, 255, 0.5);
  font-size: 60px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 80px;
}

header{
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 100px;
  transition: 0.6s;
}

header.sticky{
  background: #1483D5;
  padding: 15px 100px;
}

header .brand{
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
}

header .menu{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

header .menu a{
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  margin: 0 30px;
  padding: 0 10px;
  border-radius: 20px;
  transition: 0.3s;
  transition-property: color, background;
}

header .menu a:hover{
  color: #000;
  background: #fff;
}

header .btn{
  color: #fff;
  font-size: 25px;
  cursor: pointer;
  display: none;
}

.section-two{
  min-height: 100vh;
  background: #001018;
  padding: 20px 100px;
}

.section-two h2{
  color: rgba(255, 255, 255, 0.5);
  font-size: 50px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 30px 0;
}

.section-two p{
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  margin: 30px 0;
}

@media (max-width: 1060px){
  header .btn{
    display: block;
  }

  header .menu{
    position: fixed;
    background: #1483D5;
    flex-direction: column;
    min-width: 400px;
    height: 100vh;
    top: 0;
    right: -100%;
    padding: 80px 50px;
    transition: 0.5s;
    transition-property: right;
  }

  header .menu.active{
    right: 0;
  }

  header .menu .close-btn{
    position: absolute;
    top: 0;
    left: 0;
    margin: 25px;
  }

  header .menu a{
    display: block;
    font-size: 20px;
    margin: 20px;
    padding: 0 15px;
  }
}

@media (max-width: 630px){
  .section-main h1{
    font-size: 50px;
    line-height: 60px;
  }
}

JAVASCRIPT КОД:


 //javascript for navigation bar effect on scroll
    window.addEventListener("scroll", function(){
      var header = document.querySelector("header");
      header.classList.toggle('sticky', window.scrollY > 0);
    });

    //javascript for responsive navigation sidebar menu
    var menu = document.querySelector('.menu');
    var menuBtn = document.querySelector('.menu-btn');
    var closeBtn = document.querySelector('.close-btn');

    menuBtn.addEventListener("click", () => {
      menu.classList.add('active');
    });

    closeBtn.addEventListener("click", () => {
      menu.classList.remove('active');
    });