Navigazione

Mentre i pulsanti consentono l'interazione con le pagine, gli elementi di navigazione permettono di navigare e quindi di spostarti tra più pagine. Questa operazione può essere ottenuta in tanti modi: tramite link di collegamento, navbar, sidebar e così via.

---

Navbar

La navbar è uno degli elementi di navigazione più diffusi nei siti web. È posta nella parte superiore dello schermo e generalmente comprende le sezioni principali di un sito sotto forma di link. La navbar può essere altrettanto personalizzata in modi diversi.

Nell'esempio riportato di seguito abbiamo la classica navbar, costituita dal logo e da alcuni link di collegamento allineati a destra. In responsive, i link spariscono lasciando spazio al logo.

<!-- HTML -->
<div id="nav">
  <div class="container-nav logo-flex">
    <div class="logo-navbar">
      <img src="cartella_logo" class="logo-nav" alt="" height="70px">
    </div>
  <ul class="menu">
    <li class="itemnav-side">
      <a tabindex="0" class="link">HOME</a>
    </li>
    <li class="itemnav-side">
      <a tabindex="0" class="link">LINK</a>
    </li>
    <li class="itemnav-side">
      <a tabindex="0" class="link">LINK</a>
    </li>
  </ul>
  </div>
</div>

Se preferiamo allineare i link di collegamento a sinistra, semplicemente inseriamo il div del logo all'interno del tag ul.

<!-- HTML -->
<div id="nav">
  <div class="container-nav logo-flex">
    <ul class="menu">
      <li>
        <div class="logo-navbar">
          <img src="cartella_logo" class="logo-nav" alt="" height="70px">
        </div>
      </li>
      <li class="itemnav-side">...</li>
      <li class="itemnav-side">...</li>
      <li class="itemnav-side">...</li>
    </ul>
  </div>
</div>

Se vogliamo aggiungere ulteriori elementi o semplicemente preferiamo che essi siano disposti in modo uniforme lungo tutta la navbar, bisogna inserire il codice sottostante. Questa volta è stato aggiunto un menù a tendina (Dropdown) che racchiude più link di navigazione, ed un pulsante. In responsive, il menù sarà racchiuso all'interno dell'icon-menu.

È necessario aggiungere anche il codice in Javascript sottostante per far sì che al click si aprano sia il menù a tendina e sia il toggle dell'icon-menu.

<!-- HTML -->
<div id="nav">
  <div class="container-nav">
    <ul class="menu">
      <li>
        <div class="logo-navbar">
          <img src="cartella_logo" class="logo-nav" alt="" height="70px">
        </div>
      </li>
      <li class="itemnav">...</li>
      <li class="itemnav">...</li>
      <li class="itemnav">
        <a tabindex="0" class="link">DROPDOWN</a>
        <ul class="submenu">
          <li class="subitem"><a class="link">Submenu item</a></li>
          <li class="subitem"><a class="link">Submenu item</a></li>
        </ul>
      </li>
      <li class="itemnav"><button class="btn btnPrimaryOutline">PULSANTE</button></li>
      <li class="toggle"><a class="link">
        <svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg></a>
      </li>
    </ul>
  </div>
</div>

// JAVASCRIPT
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
const items = document.querySelectorAll(".itemnav");

// Toggle mobile menu
function toggleMenu() {
  if (menu.classList.contains("active")) {
      menu.classList.remove("active");
      toggle.querySelector("a").innerHTML = "<svg class='icon icon-menu'><use xlink:href='#icon-menu'></use></svg>";
  } else {
      menu.classList.add("active");
      toggle.querySelector("a").innerHTML = "<svg class='icon icon-close'><use xlink:href='#icon-close'></use></svg>";
  }
}

// Activate Submenu
function toggleItem() {
  if (this.classList.contains("submenu-active")) {
      this.classList.remove("submenu-active");
  } else if (menu.querySelector(".submenu-active")) {
      menu.querySelector(".submenu-active").classList.remove("submenu-active");
      this.classList.add("submenu-active");
  } else {
      this.classList.add("submenu-active");
  }
}

// Close Submenu From Anywhere
function closeSubmenu(e) {
  let isClickInside = menu.contains(e.target);

  if (!isClickInside && menu.querySelector(".submenu-active")) {
      menu.querySelector(".submenu-active").classList.remove("submenu-active");
  }
}

// Event Listeners
toggle.addEventListener("click", toggleMenu, false);
for (let itemnav of items) {
    if (itemnav.querySelector(".submenu")) {
        itemnav.addEventListener("click", toggleItem, false);
    }
    itemnav.addEventListener("keypress", toggleItem, false);
  }
  document.addEventListener("click", closeSubmenu, false);

---

Link di collegamento

I link permettono anch'essi di navigare in modo rapido tra le pagine. Sono stilizzati in base all'importanza che devono assumere: in primary-blue i link principali, in basic i link secondari. Come i pulsanti, anche i link possono essere temporaneamente disabilitati.

---

© 2021 Alessia Saviano per ABANA