Základní layout hlavičky

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>

Jak například vypadá header top?

 <div class="header__top --flex-centre-y">

            {* Header | Logo *}
            <div class="header__logo --flex-inline header__desktop-part">
                <a class="header__logo-link" href="/{$lang}">
                    <img class="header__logo-img" src="/img/logo.svg"
                         alt="{$web['DEFAULT_TITLE']}">
                </a>
            </div>

           {* Header | Menu *}

            <div class="header__menu">
                {include 'menu.latte', nav => $nav}
            </div>

			{* Header | Call *}

            <div class="header__call --flex-centre-y">
                <div class="header__call-content --flex --flex-nowrap">
                    <a class="header__call-link --flex --flex-centre icon icon--phone"
                       href="tel:{$web['PER_PHONE']}{$web['PHONE']}">
                        {$web['PER_PHONE']}
                        <b>{$web['PHONE']}</b>
                    </a>

                    <span class="header__call-text">
						{$web['OPEN_HOURS']|noescape}
					</span>
                </div>
            </div>

		    {* Header | Language *}

            <div class="header__lang --flex-inline --flex-centre-y" n:if="count($activeLangs) > 1">
                {include 'lang.latte'}
            </div>

        </div>

Jak například vypadá header bottom?

{* Header | Bottom *}
        <div class="header__bottom --flex-inline --flex-centre-y">
            <div class="--w-12 --w-l-3 header__column header__column--left header__desktop-part">

                <a href="#" class="header__button button button--brand">

                    <div class="header__button-bar-wrap">
                        <span class="header__button-bar"></span>
                        <span class="header__button-bar"></span>
                        <span class="header__button-bar"></span>
                    </div>
                    {$web['HEADER_CHOOSE_CATEGORY']}
                </a>

                {* Header | Menu *}
                <div class="header__menu">
                    {include 'menu.latte', nav => $categories}
                </div>
            </div>

            <div class="--w-12 --w-l-9 --flex
            header__column header__column--right">

                {* Header | Search *}

                <div class="header__search header__desktop-part --flex-inline --flex-centre-y icon icon--search">
                    {form search class => "header__search-form"}
                        <input n:name="search_text"
                                data-use="typeahead"
                                placeholder="{$web['SEARCH_PLACEHOLDER']}"
                                class="header__search-input"
                                type="text">
                        <button class="button header__search-button js--header-search">
                            {$web['HEADER_SEARCH']}
                        </button>
                    {/form}
                </div>


                {* Header | Logo *}
                 <div class="header__logo --flex-inline header__mobile-part">
                    <a class="header__logo-link" href="/{$lang}">
                        <img class="header__logo-img" src="/img/logo.svg"
                             alt="{$web['DEFAULT_TITLE']}">
                    </a>
                </div>


			    {* Header | Search *}

                <div class="header__search-toggle --flex-inline --flex-centre-y header__desktop-part">
                    <button class="header__search-toggle-button icon icon--search --hide-text js--header-search-toggle">
                        {$web['HEADER_SEARCH']}
                    </button>
                </div>


			    {* Header | Login *}

                <a href="#" class="header__login icon icon--user"></a>

                {* Header | Basket *}
                <a class="header__basket" href="#">
                    <div class="header__basket-icon icon icon--cart">
                        <span class="header__basket-count">1500</span>
                    </div>
                    <span class="header__basket-price">1 565 Kč</span>
                </a>


                <div class="header__mobile-part">
                    <a href="#" class="header__button button button--brand">

                        <div class="header__button-bar-wrap">
                            <span class="header__button-bar"></span>
                            <span class="header__button-bar"></span>
                            <span class="header__button-bar"></span>
                        </div>

                        Menu
                    </a>

                    {* Header | Menu *}
                    <div class="header__menu">
                        {include 'menu.latte', nav => $categories}
                        {include 'menu.latte', nav => $nav}
                    </div>
                </div>


            </div>

            <div class="--w-12 header__mobile-part">
                <div class="header__search --flex-inline --flex-centre-y icon icon--search">
                    {form search class => "header__search-form"}
                        <input n:name="search_text"
                                data-use="typeahead"
                                placeholder="{$web['SEARCH_PLACEHOLDER']}"
                                class="header__search-input"
                                type="text">
                        <button class="button header__search-button js--header-search">
                            {$web['HEADER_SEARCH']}
                        </button>
                    {/form}
                </div>
            </div>
        </div>

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

*
*