Блоки

Шапка

Прилипающая шапка с меню и мобильной кнопкой: чёрная с оранжевой линией.

Примеры

<header class="hdr">
  <div class="hdr__in">
    <a href="https://bukatchuk.ru" class="hdr__logo"><img class="hdr__mark" src="logo.png" alt="" width="22" height="22">bukatchuk</a>
    <span class="hdr__sep"></span>
    <a class="hdr__sub" href="/">Видеоконференции</a>
    <nav class="hdr__nav" id="nav-main">
      <a class="hdr__nav-home" href="/">Видеоконференции</a>
      <a href="#" class="is-active">Главная</a>
      <a href="#">Статьи</a>
      <a href="#">Теги</a>
      <a href="#">Винил</a>
      <a href="#">Об авторе</a>
    </nav>
    <div class="hdr__right"><a class="hdr__btn" href="#">Войти</a></div>
    <button class="burger" type="button" data-ui-toggle="#nav-main" aria-controls="nav-main" aria-label="Меню" aria-expanded="false"><span></span><span></span><span></span></button>
  </div>
</header>

Установка

bukatchuk-ui add header

Файлы

Клавиши

Вставка для Jekyll

{%- comment -%}
  Шапка. Данные из _config.yml: site.brand, site.header_sub, site.nav (text, href).
  Параметры: home — адрес стартовой страницы сайта: название рядом
  со знаком становится ссылкой, а на узком экране эта ссылка стоит первым пунктом меню.
{%- endcomment -%}
{%- assign sub = page.header_sub | default: site.header_sub -%}
<header class="hdr">
  <div class="hdr__in">
    <a href="https://bukatchuk.ru" class="hdr__logo">
      <img class="hdr__mark" src="{{ '/assets/logo.png' | relative_url }}" alt="" width="22" height="22">{{ site.brand | default: 'bukatchuk' }}
    </a>
    <span class="hdr__sep"></span>
    {%- if include.home %}
    <a class="hdr__sub" href="{{ include.home }}">{{ sub }}</a>
    {%- else %}
    <span class="hdr__sub">{{ sub }}</span>
    {%- endif %}
    <nav class="hdr__nav" id="nav">
      {%- if include.home %}
      <a class="hdr__nav-home" href="{{ include.home }}">{{ sub }}</a>
      {%- endif %}
      {%- for l in site.nav %}
      <a href="{{ l.href | relative_url }}"{% if page.url == l.href or page.nav_active == l.href %} class="is-active"{% endif %}>{{ l.text }}</a>
      {%- endfor %}
    </nav>
    {%- if include.right %}
    <div class="hdr__right">{{ include.right }}</div>
    {%- endif %}
    <button class="burger" type="button" data-ui-toggle="#nav" aria-controls="nav" aria-label="Меню" aria-expanded="false"><span></span><span></span><span></span></button>
  </div>
</header>

Макрос для Jinja

{#- Шапка. nav — список (text, href); active — href текущего раздела; home — адрес стартовой
    страницы сервиса; блок caller() попадает в правую часть (вход, выход, имя пользователя). -#}
{% macro header(sub, nav, home='/', active=None, logo='/static/logo.png', brand='bukatchuk') -%}
<header class="hdr">
  <div class="hdr__in">
    <a href="https://bukatchuk.ru" class="hdr__logo"><img class="hdr__mark" src="{{ logo }}" alt="" width="22" height="22">{{ brand }}</a>
    <span class="hdr__sep"></span>
    <a class="hdr__sub" href="{{ home }}">{{ sub }}</a>
    <nav class="hdr__nav" id="nav">
      <a class="hdr__nav-home" href="{{ home }}">{{ sub }}</a>
      {%- for item in nav %}
      <a href="{{ item.href }}"{% if item.href == active %} class="is-active"{% endif %}>{{ item.text }}</a>
      {%- endfor %}
    </nav>
    {%- if caller %}
    <div class="hdr__right">{{ caller() }}</div>
    {%- endif %}
    <button class="burger" type="button" data-ui-toggle="#nav" aria-controls="nav" aria-label="Меню" aria-expanded="false"><span></span><span></span><span></span></button>
  </div>
</header>
{%- endmacro %}