1. Komponenty

Menu

angl. Menu

Jedná se o horní část stránky, která obsahuje primární navigaci na webu nebo v aplikaci (klientské zóně).

Menu webové stránky s rozbaleným megamenu.


<div class="header header--hp header--message" role="banner">
    <div class="container">
        <div class="header__inner">
            <div class="header__extended">
                <div class="header__logo-holder mr-xl-2">
                    <a href="/" class="header__logo" title="PORTÁL VEŘEJNÉ SPRÁVY - úvodní strana">PORTÁL VEŘEJNÉ SPRÁVY</a>
                    <img src="/images/layout/pvs-logo-black.svg" alt="logo" class="header__logo--print">
                </div>
                <div class="nav-section">
                    <div id="toggleNavBtn" class="nav-section__toggle-btn d-lg-none">
                        <span></span>
                        <span></span>
                        <div>
                            MENU
                        </div>
                    </div>
                    <div class="nav-section__wrapper">
                        <div class="d-flex flex-wrap">
                            <div class="header__top-row order-2 order-lg-1">
                                <div class="infoline">
                                    Infolinka: 270 005 200
                                </div>
                                <div class="header__toolbox">
                                    <a href="#" class="btn-login" title="Přihlášení">
                                        <span class="login-text">Přihlášení</span>
                                    </a>
                                    <div class="form-group lang-change">
                                        <label for="change-language" class="sr-only">Změna jazyka</label>
                                        <select class="form-control lang-change__select form-control--not-empty" id="change-language">
                                            <option selected="">CZ</option>
                                            <option>EN</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="navigation order-1 order-lg-2">
                                <ul class="nav nav--primary">
                                    <li class="nav__item has-submenu">
                                        <a href="#" class="nav__link active">Životní situace</a>
                                        <div class="nav--sub">
                                            <div class="nav--sub__inner">
                                                <h2 class="nav--sub__title">
                                                    <strong>Životní</strong><br>situace
                                                </h2>
                                                <ul class="nav--sub__links">
                                                    <li class="nav__item--sub"><a href="#" class="nav__link nav__link--sub">Občan</a></li>
                                                    <li class="nav__item--sub"><a href="#" class="nav__link nav__link--sub active">Podnikatel</a></li>
                                                    <li class="nav__item--sub"><a href="#" class="nav__link nav__link--sub">Cizinec</a></li>
                                                    <li class="nav__item--sub"><a href="#" class="nav__link nav__link--sub">Úředník</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="nav__item"><a href="#" class="nav__link">Formuláře</a></li>
                                    <li class="nav__item"><a href="#" class="nav__link">Otevřená data</a></li>
                                    <li class="nav__item"><a href="#" class="nav__link">Věstníky</a></li>
                                    <li class="nav__item"><a href="#" class="nav__link">Zveřejněné informace</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="header--title hidden-tablet">
                        <h2>Na úřad přes internet</h2>
                    </div>
                </div>
                <div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3">
                    <div class="search-holder">
                        <div class="search">
                            <form action="#">
                                <fieldset>
                                    <legend>Hledání</legend>
                                    <div class="search__input-holder">
                                        <label class="sr-only" for="global-search">Vyhledávat</label>
                                        <input type="text" id="global-search" class="form-control search__input" placeholder="Zajímá mě ...">
                                        <button class="btn btn-primary search__button" type="button">
                                            <span class="pvs-theme-icon-search search__button--icon"></span>
                                            <span class="search__button--text">Hledat</span>
                                        </button>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Menu klientské zóny.


<div class="header header--zone" role="banner">
    <div class="header__inner">
        <div class="header__extended">
            <div class="header__logo-holder mr-xl-2">
                <a href="/" class="header__logo" title="PORTÁL OBČANA">PORTÁL OBČANA</a>
                <img src="/images/layout/po-logo.svg" alt="logo" class="header__logo--print">
            </div>
            <div class="nav-section">
                <div id="toggleNavBtn" class="nav-section__toggle-btn d-lg-none">
                    <span></span>
                    <span></span>
                    <div>
                        MENU
                    </div>
                </div>
                <div class="nav-section__wrapper">
                    <div class="d-flex flex-wrap">
                        <div class="header__top-row">
                            <div class="infoline">
                                <a href="#direct-normal" title="Portál veřejné správy" class="inverse with-icon with-icon--left dark direct">Portál veřejné správy</a>
                            </div>
                            <div class="header__toolbox">
                                <div class="profile__image"></div>
                                <button class="button button-profile">
                                    Jan Novák
                                </button>
                                <button class="button button-logout" title="Odhlásit se">
                                    <i class="icon"></i>
                                    <span>Odhlásit se</span>
                                </button>
                            </div>
                        </div>
                        <div class="navigation clearfix">
                            <ul class="nav nav--primary float-lg-left">
                                <li class="nav__item"><a href="#" class="nav__link">Profil</a></li>
                                <li class="nav__item"><a href="#" class="nav__link">Údaje</a></li>
                                <li class="nav__item"><a href="#" class="nav__link">Datová schránka</a></li>
                                <li class="nav__item"><a href="#" class="nav__link">Kalendář</a></li>
                                <li class="nav__item"><a href="#" class="nav__link">Dokumenty</a></li>
                                <li class="nav__item"><a href="#" class="nav__link">Podání</a></li>
                            </ul>
                            <div class="float-lg-right d-none d-lg-block">
                                <ul class="nav nav--primary d-flex">
                                    <li class="nav__item mr-0"><a href="#" class="nav__link"><span class="pvs-theme-icon-settings"></span></a></li>
                                    <li class="nav__sepparator-vertical"></li>
                                    <li class="nav__item">
                                        <a href="#" class="nav__link">
                                            <span class="pvs-theme-icon-notification"></span>
                                            <span class="badge-notification">2</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <ul class="nav nav--primary d-lg-none">
                                <li class="nav__sepparator"></li>
                                <li class="nav__item"><a href="#" class="nav__link">Portál veřejné správy</a></li>
                                <li class="nav__sepparator"></li>
                                <li class="nav__item"><a href="#" class="nav__link">Nastavení</a></li>
                                <li class="nav__item"><a href="#" class="nav__link">Notifikace</a></li>
                                <li class="nav__item"><a href="#" class="nav__link">Odhlásit se</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Úvod

Menu je základní prvek webu nebo aplikace (klientské zóny), který slouží k navigaci v rámci struktury (informační architektury). Položky v menu odpovídají první úrovni. Více informací o informační architektuře najdete v sekci Jak na informační architekturu. Menu je součástí hlavičky.

Obecné rozložení webové stránky nebo aplikace (klientské zóny).

Obecné rozložení stránky

Webová stránka

Příkladem je menu Portálu veřejné správy, které je možné modifikovat. Příkladem modifikace je použití tzv. megamenu, které je uvedeno v ukázce. V megamenu se nachází další úrovně informační architektury (IA). Použití megamenu není povinné, odvíjí se od potřeb daného projektu.

Primární navigace

Menu primární úroveň

Menu s primární úrovní je společné pro všechny stránky webu.

  • Samotné položky primární navigace
  • Doporučený počet je 4-6 položek
  • Maximální počet položek v primární navigaci je 8
  • Názvy položek by měly být co nejkratší a ideálně jednoslovné (vyvarujte se zkratkám)
  • Je možné přepisovat nebo měnit jejich počet dle aktuálních potřeb webové stránky
  <div class="navigation">
    <ul class="nav nav--primary">
        <li class="nav__item">
            <a href="#" class="nav__link active">Životní situace</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">Formuláře</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">Otevřená data</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">Věstníky</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">Zveřejněné informace</a>
        </li>
      </ul>
  </div>

Menu může, kromě položek primární úrovně, obsahovat také následující části:

  • Odkaz na přihlášení do klientské zóny
  • Přepínač jazyků
  • Logo (po kliknutí se uživatel dostane vždy na úvodní stránku)
  • Infolinku

Sekundární úroveň

Menu se sekundární úrovní může být obsaženo v megamenu. Megamenu se používá pouze v případě webové stránky, nikoliv pro klientskou zónu. Zároveň však musí být zobrazeno vždy na stránkách nižší úrovně. Nižší úrovní jsou ty stránky, které jsou zanořeny pod Úvodní stránku (Homepage).

Menu sekundární úroveň

  • Nadpis - označení nadřazené úrovně (primární úroveň)
  • Aktivní položka - vybraná (zobrazená) stránka
  • Položka menu - další položka menu, kterou lze vybrat

Klientská zóna

Klientská zóna je přístupná až po přihlášení. Typickou ukázkou klientské zóny je Portál občana. Menu klientské zóny vychází z menu webové stránky.

Primární navigace

Menu klientské zóny

Menu s primární úrovní je společné pro všechny stránky klientské zóny.

  • Samotné položky primární navigace
  • Doporučený počet je 4-6 položek
  • Maximální počet položek v primární navigaci je 8
  • Názvy položek by měly být co nejkratší a ideálně jednoslovné (vyvarujte se zkratkám)
  • Je možné přepisovat nebo měnit jejich počet dle aktuálních potřeb klientské zóny

Menu může, kromě položek primární úrovně, obsahovat také následující části:

  • Odkaz na odhlášení z klientské zóny
  • Odkaz do veřejné části (uživatel po kliknutí zůstane přihlášen)
  • Logo (po kliknutí se uživatel dostane vždy na úvodní stránku)
  • Odkaz do nastavení klientské zóny
  • Notifikační centrum (s počtem nepřečtených zpráv)
  • Stejně jako u webu je možné přepisovat nebo měnit jejich počet dle aktuálních potřeb klientské zóny

Sekundární navigace

V případě klientské zóny se nepoužívá megamenu. Sekundární navigace musí být vždy na podstránkách klientské zóny.

Příkladem je navigace datové schránky na Portálu občana, která je společná pro více účtů:

Ukázka navigace vč. akordeonu

  • Nadpis - označení nadřazené úrovně (primární úroveň)
  • Tlačítko - primární tlačítko pro vyvolání nejdůležitější akce na dané stránce (např. Napsat zprávu)
  • Rozkliknutý akordeon - slouží pro přepínání mezi účty
  • Popisek sekce - obsahuje doplňující informace o účtu
  • Notifikace - označuje počet nepřečtených zpráv
  • Aktivní položka - označuje právě zobrazenou podstránku
  • Položka menu - další položka menu, kterou lze vybrat
  • Schovaný akordeon - výchozí stav akordeonu, opakem je rozkliknutý akordeon
  • Tlačítko - outline tlačítko pro vyvolání méně důležitých akcí (např. přidání účtu)

Responzivní (RWD) menu

Slouží pro zobrazení na menších zařízeních.

Standartní menu se zobrazuje pro tyto typy zařízení:

  • Large - ≥992px
  • Extra large - ≥1200px

RWD menu pak používáme pro tyto typy zařízení:

  • Medium - ≥768px
  • Small - ≥576px
  • Extra small - <576px

Více o typech zařízení najdete na stránce Mřížka.

Primární navigace

V případě RWD menu je primární navigace schována pod tzv. hamburger menu. Nepoužívejte nikdy ikonu bez označení MENU.

Zabalené RWD Menu

Výchozí stav RWD menu.

Zabalené RWD Menu

Jakmile uživatel klikne na hamburger menu rozbalí se nabídka s primární navigací.

Rozbalené RWD Menu

Rozbalené RWD Menu

Po kliknutí na ikonu close nebo ZAVŘÍT, dojde k zabalení menu do jeho výchozího stavu.

Užitečné odkazy