Responzivní navigační panel využívající HTML, CSS a Javascript

U každého projektu CSS, který vytváříme, je responzivní navigační panel nutností.

Dnes tedy vytvoříme responzivní navigační panel pomocí HTML CSS a vanilkového javascriptu.

Poznámka:Jedná se o design určený především pro mobilní zařízení

Pokud dáváte přednost videu. Vytvořil jsem i video. Podívat se na něj můžete zde

Začínáme 🎉🎉

Část 1:HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>responsive navbar</title>
  </head>
  <body>
    <header>
      <nav class="nav">
        <a href="/" class="logo">logo</a>

        <div class="hamburger">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </div>

        <div class="nav__link hide">
          <a href="#">home</a>
          <a href="#">about</a>
          <a href="#">contact</a>
          <a href="#">blog</a>
        </div>
      </nav>
    </header>
  </body>

  <script src="./script.js"></script>
</html>

Nahoře máme značku navbaru s hamburgerem.

Propojil jsem také soubory CSS a javascript.

Podívejme se, jak můžeme stylizovat toto označení pomocí CSS

Část:2 CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: black;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
}

Zde jsme odstranili některé výchozí styly a přidali některé styly do a štítek.

/* nav styles */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}

.logo {
  font-size: 1.8rem;
  color: rgb(5, 5, 116);
  padding-left: 20px;
}

.hamburger {
  padding-right: 20px;
  cursor: pointer;
}

.hamburger .line {
  display: block;
  width: 40px;
  height: 5px;
  margin-bottom: 10px;
  background-color: black;
}

.nav__link {
  position: fixed;
  width: 94%;
  top: 5rem;
  left: 18px;
  background-color: lightblue;
}

.nav__link a {
  display: block;
  text-align: center;
  padding: 10px 0;
}

.nav__link a:hover {
  background-color: lightcoral;
}

.hide {
  display: none;
}

Toto je hlavní design. Zde jsme stylizovali náš navigační panel hamburger a logo.

Mobilní design je hotový.

Nyní se podíváme na design desktopu.

@media screen and (min-width: 600px) {
  .nav__link {
    display: block;
    position: static;
    width: auto;
    margin-right: 20px;
    background: none;
  }

  .nav__link a {
    display: inline-block;
    padding: 15px 20px;
  }

  .hamburger {
    display: none;
  }
}

V designu desktopu jsme odstranili absolutní polohu a udělali z ní zobrazovací blok.
A k nav__link's jsme přidali display inline-block, aby odkazy zůstaly vedle sebe.
Nakonec jsme do .hamburger

přidali display none

Zbývá poslední věc. Nyní potřebujeme, aby byl náš hamburger klikací.

Část 3:Javascript

const hamburger = document.querySelector('.hamburger');
const navLink = document.querySelector('.nav__link');

hamburger.addEventListener('click', () => {
  navLink.classList.toggle('hide');
});

Zde jsme přidali událost click do hamburgeru a přidali classList.toggle do navLink.

Funkce classList.toggle je, že odebere třídu, pokud je daná třída dostupná, a přidá, pokud není dostupná.

zdrojový kód:https://github.com/Coderamrin/responsive-navbar-css-js

Živý náhled:https://coderamrin.github.io/responsive-navbar-css-js/

Závěr

Děkuji za přečtení.

Pokud se vám to líbilo, nezapomeňte mě sledovat @coderamrin

také jsem založil kanál YouTube, kde sdílím programovací tutoriály a videa. Pokud to zní skvěle, podívejte se na:https://www.youtube.com/channel/UCiHUi4wJ6rkPSQ5n4bxKU1A

Mějte se fajn :D