Hlavička (header)

Rozdělení hlavičky na vrchní a spodní část (header__top, header__bottom) podle potřeby (většinou na e-shopech).

Komponenty pojmenováváme stylem grandparent__child, parent__child. Použítí "__" vícekrát je podle zápisu BEM špatně.

Skrytí určítých částí na telefonu se dá snadno udělat přes 2 třídy - header__mobile-part, header__desktop-part.

Základní rozvržení hlavičky

{* Header - Simple *}

<header class="header js--header">
    <div class="header__content --content --flex">

    </div>
</header>
{* Header - Advanced *}

<header class="header js--header">
    <div class="header__top">
        <div class="header__content --content --flex">

        </div>
    </div>


    <div class="header__bottom">
        <div class="header__content --content --flex">

        </div>
    </div>
</header>

Příklad v praxi

<header class="header js--header">
    <div class="header__content --content --flex --flex-centre-y">
        <a href="/{$lang}" class="header__figure">
            <img class="header__logo" src="/img/logo.svg" alt="Logo">
        </a>
        <div class="header__text --flex-column">
            <a href="tel:+420 555 555 555" class="header__link icon icon--phone">
                +420 555 555 555
                <span class="header__span">
                    (Po-Pá: 9-17 hod.)
                </span>
            </a>
        </div>


        <div class="header__menu js--header-menu">
            <ul class="header__menu-nav menu">
                <li class="menu__item">
                    <a class="menu__link" href="#">Položka menu</a>
                </li>
            
                <li class="menu__item menu__item--dropdown">
                    <a  href="#"
                        class="menu__link">
                        Název položky s dropdownem
                    </a>
                    <div class="menu__dropdown" id="dropdown_1">
                        <a href="#" class="menu__link menu__dropdown-item">
                                Podpoložka
                        </a>
                    </div>
                </li>
            </ul>

            <a class="header__button button button--brand" href="/cs/m-2-kontakt#contact-form">
                Objednávka
            </a>

            <div class="header__text --flex-column">
                <a href="tel:+420 555 555 555" class="header__link icon icon--phone">
                    +420 555 555 555
                    <span class="header__span">
                        (Po-Pá: 9-17 hod.)
                    </span>
                </a>
            </div>

        </div>

        <a href="#" class="header__toggler js--header-toggler js--skip-anim">
            <span class="header__toggler-bar"></span>
            <span class="header__toggler-bar"></span>
            <span class="header__toggler-bar"></span>
        </a>
    </div>

</header>

Header

.header {
  padding: 10px 0;
  z-index: 1000;
  position: relative;

  @include media($large) {
    display: flex;
    flex-flow: column wrap;
    padding: 15px 0;
  }
}

.header__content {
  position: static;
}

.header__figure {
  max-width: 200px;

  margin: 0 30px 0 0;
  @include media($xlarge) {
    margin: 0 60px 0 0;
  }
}


.header__logo {
  @include media($xlarge) {
    width: 100%;
  }

}

.header__text{
  display: none;

  @include media($large){
    display: inline-flex;
  }


  .header__menu &{
    display: inline-flex;
    margin: 10px 0 15px 0;

    @include media($large){
      display: none;
    }
  }
}



.header__span {
  font-size: 1.2rem;
  color: #717171;
}

.header__menu {
  margin-left: auto;
  display: none;
  font-family: $font__title;
  font-size: 2rem;
  box-shadow: 0 17px 17px rgb(0 0 0 / 9%);

  @include media($large) {
    display: flex;
    align-items: center;
    box-shadow: none;
    border-bottom: none;
  }
}

.header__menu--active {
  position: absolute;
  left: 0;
  align-items: center;
  right: 0;
  top: 100%;
  background: white;
  display: flex;
  flex-direction: column;
}

.header__button {
  @include media($large) {
    background: $color__primary;
    padding: 15px 30px;
    margin-left: 15px;
    color: white;
  }
}

.header__toggler {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  width: 30px;

  @include media($large) {
    display: none;
  }
}

.header__toggler-bar {
  width: 100%;
  height: 4px;
  background: $color__primary;
  transition: $ease;

  &:not(:last-of-type) {
    margin-bottom: 3px;
  }
  
  .header__toggler--active & {
    position: relative;
    overflow: visible;
  
    &:first-of-type, &:last-of-type {
      margin: auto;
      position: relative;
      top: 0;
      bottom: 0;
    }
  
    &:first-of-type {
      transform: rotate(45deg);
      top: 4px;
    }
  
    &:last-of-type {
      transform: rotate(-45deg);
      bottom: 2px;
    }
  
    &:nth-of-type(2) {
      display: none;
    }
  }
}



Menu


.menu{
  display: flex;
  align-items: center;
  flex-direction: column;


  @include media($large){
    flex-direction: row;
  }

}


.menu__item{
  padding: 0 10px;
  position: relative;

  @include media($xlarge){
    padding: 0 30px;
  }

  &:hover > .menu__dropdown {
    display: block;
  }
}

.menu__item--dropdown {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu__link{
  font-size: 1.5rem;
  color: $color__text-dark;
  display: flex;
  padding: 5px;


  &:before {
    color: $color__primary;
  }

  &:hover, &:focus{
    color: $color__primary;
  }


  @include media($large){
    font-size: 2rem;
  }

  .menu__item--dropdown > & {
    position: relative;
    display: flex;
    align-items: center;

    &::after {
      @include pseudo(block, relative);
      line-height: inherit;
      width: 1.2rem;
      height: 1.2rem;
      border: 2px solid transparent;
      border-bottom-color: $color__primary;
      border-right-color: $color__primary;
      transform: rotate(45deg);
      margin-left: 8px;
      margin-bottom: 5px;
    }
  }
}

.menu__dropdown {
  position: relative;
  display: none;
  padding: 1rem;
  background-color: white;

  @include media($large) {
    position: absolute;
    top: 100%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  }
}

Potřebný javascript

const headerButton = document.querySelector(".js--header-toggler");
const headerMenu = document.querySelector(".js--header-menu");
headerButton.addEventListener("click", function (){
    headerMenu.classList.toggle("header__menu--active");
    headerButton.classList.toggle("header__toggler--active");
});

Nevíte si rady?
Neváhejte se zeptat

Nevíte si rady nebo potřebujete něco konzultovat? Nápovědu stále zdokonalujeme na základě vašich požadavků a postřehů. Uvádíme co nejvíce možných variant, které používáme na řešení jednotlivých částí webu, mějte ale na paměti, že projekty řešíme individuálně na základě konkrétních potřeb.

Nádražní 876
560 02 Česká Třebová

honza.cech@czechgroup.cz

+420 774 201 483

*
*