Header

Der Header ist das erste Element, welches der User auf der Webseite findet. Es dient der Navigation auf der Webseite und beinhaltet die wichtigsten Seitenlinks. Der Header bietet sowohl einfache und direkte Links, als auch die Möglichkeit zusätzliche Links via Drop Down Element einzufügen. So bildet der Header strukturiert den Aufbau der Webseite ab. Der Header bleibt immer “sticky” oben an der Seite hängen, auch wenn der Nutzer auf der Seite scrollt.

Header
24/03/2021
TeamBank Markenportal 
<div class="module module--header module--header--markenportal">
  <div class="inner">
    <header class="header">
  <nav class="main-nav main-nav--desktop">
    <div class="inner inner--flex">
      <a class="main-nav__logo" href="http://localhost">
        <svg width="124" height="30" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <linearGradient x1="0%" y1="50%" x2="100.001%" y2="50%" id="a">
              <stop stop-color="#4DC6F4" offset="0%"></stop>
              <stop stop-color="#4DC6F4" offset="10%"></stop>
              <stop stop-color="#0F1F47" offset="90%"></stop>
              <stop stop-color="#0F1F47" offset="100%"></stop>
            </linearGradient>
          </defs>
          <g fill-rule="nonzero" fill="none">
            <path d="M8.62.484c-2.047 0-3.993 1.66-4.346 3.706L.539 25.81c-.353 2.046 1.02 3.706 3.067 3.706h112.281c2.048 0 3.993-1.66 4.347-3.706l3.734-21.62c.354-2.046-1.02-3.706-3.066-3.706H8.62z" fill="url(#a)"></path>
            <path d="M10.757 6.466l-.482 2.849h4.658L12.52 23.36h3.402l2.415-14.046h4.682l.506-2.849H10.757zm54.835 0L62.67 23.361h5.792c4.272 0 7.458-1.835 7.458-5.406 0-1.666-.7-2.752-2.51-3.477 2.076-.748 3.33-2.486 3.33-4.345 0-2.34-1.954-3.668-5.116-3.668h-6.034v.001zm38.734 0l-2.92 16.896h3.21l.555-3.21 2.197-2.077 1.69 5.286h3.282l-2.558-7.626 4.466-4.587h-3.573l-4.828 5.094 1.69-9.776h-3.21zM68.511 9.242h2.848c1.16 0 1.884.604 1.884 1.593 0 1.255-1.159 2.293-2.824 2.293h-2.584l.677-3.886zm-42.67 1.593c-3.21 0-5.358 2.245-6.01 5.793l-.047.266c-.773 4.223 1.037 6.66 4.85 6.66 2.294 0 3.814-.868 4.973-2.461l-1.835-1.713c-.893 1.013-1.664 1.544-2.896 1.544-1.713 0-2.583-1.062-2.269-2.993h7.459l.24-1.376c.7-4.03-1.665-5.72-4.464-5.72zm11.561 0c-2.558 0-4.2 1.158-4.851 1.858l1.737 1.786c.628-.7 1.425-1.182 2.631-1.182 1.304 0 2.076.555 1.883 1.641l-.097.555h-.797c-3.74 0-6.806 1.4-6.806 4.49 0 2.148 1.497 3.572 3.404 3.572.893 0 1.955-.315 3.113-1.014l-.145.82h2.969l1.424-8.278c.46-2.703-1.496-4.248-4.465-4.248zm12.188 0c-2.341.048-4.851 1.086-5.237 3.33l-1.593 9.196h3.21l1.568-8.954c.121-.652 1.135-.99 2.052-.965 1.013.024 1.738.506 1.569 1.64l-1.449 8.28h3.211l1.472-8.471c.193-1.015.893-1.473 2.148-1.45 1.038.025 1.762.532 1.569 1.69l-1.448 8.231h3.21l1.472-8.471c.507-2.97-2.245-4.104-4.803-4.055-1.206.023-2.437.312-3.427.892-.941-.652-2.246-.917-3.524-.893zm33.74 0c-2.558 0-4.2 1.158-4.852 1.858l1.74 1.786c.626-.7 1.422-1.182 2.63-1.182 1.303 0 2.074.555 1.882 1.641l-.097.555h-.797c-3.74 0-6.806 1.4-6.806 4.49 0 2.148 1.497 3.572 3.404 3.572.893 0 1.955-.315 3.113-1.014l-.145.82h2.969l1.424-8.278c.458-2.703-1.496-4.248-4.465-4.248zm12.309 0c-2.342.048-4.972 1.086-5.358 3.33l-1.593 9.196h3.21l1.568-8.954c.12-.652 1.255-.99 2.173-.965 1.037.024 1.882.531 1.689 1.69l-1.448 8.23h3.21l1.472-8.471c.507-2.97-2.365-4.104-4.923-4.055v-.001zm-69.99 2.439c1.351 0 2.075.722 1.954 2.026l-.048.507H22.97c.34-1.738 1.28-2.534 2.68-2.534zm41.706 2.629h2.63c1.545 0 2.438.579 2.438 1.955 0 1.616-1.255 2.727-3.258 2.727h-2.608l.797-4.682zm-29.807 1.689h.797l-.436 2.463c-.554.41-1.616.893-2.389.893-.724 0-1.351-.41-1.351-1.328 0-1.4 1.472-2.027 3.378-2.027l.001-.001zm45.927 0h.797l-.435 2.463c-.554.41-1.616.893-2.389.893-.724 0-1.352-.41-1.352-1.328 0-1.4 1.473-2.027 3.38-2.027v-.001z" fill="#FFF"></path>
          </g>
        </svg>
      </a>
      <nav class="main-nav__menu">
        <ul id="menu-header-menu" class="menu">
          <li class="menu-item"><a class="nav-link local" href="#">Markenmanagement</a>
          </li>
          <li class="menu-item"><a class="nav-link local" href="#">Marken</a>
          </li>
          <li class="menu-item"><a class="nav-link local" href="#">Downloads</a></li>
          <li class="menu-item"><a class="nav-link local" href="#">Ansprechpartner</a></li>
          </li>
        </ul>
      </nav>
      <nav class="main-nav__actions">
        <ul class="actions">
          <li class="action--download">
            <a href="#">
              <i class="icon-download"><i class="batch batch--hide"><span class="count">
                    0 </span></i></i>
            </a>
          </li>
          <li class="action--contact">
            <button open-popup="" data-template-id="1565" data-popup-layout="normal">
              <i class="icon-contact"></i>
            </button>
          </li>
          <li class="action--search"><button open-search=""><i class="icon-search"></i></button></li>
          <li class="action--mobile-menu-button"><button><i class="icon-menu"></i></button></li>
        </ul>
      </nav>
    </div>
  </nav>
</header>  </div>
</div>
(function () {
  function handleToggleMobileMenu() {
    const headerMenu = document.querySelector('.main-nav');
    if (headerMenu) {
      headerMenu.classList.toggle('main-nav--show-mobile');
      const header = document.querySelector('.header');
      if (header) {
        header.classList.toggle('header--mobile-menu-open');
      }
    }
  }

  function addEventListeners() {
    const mobileMenuButton =
      document.querySelector('.action--mobile-menu-button');
    if (mobileMenuButton) {
      mobileMenuButton.addEventListener('click', handleToggleMobileMenu);
    }
  }

  function init() {
    addEventListeners();
  }

  document.addEventListener('DOMContentLoaded', init);
})();