Custom Header Mobile / Шапка мобильная

ver.1.0.0
от 31.07.2025 11:26

Особенности

  1. Открыть/закрыть меню по клику на "бургер"
  2. Закрыть меню по кнопке закрытия
  3. Закрыть меню по заднему фону
  4. Развернуть/свернуть пункты меню

Codes

Jade
JS
Шапка по умолчанию
от 31.07.2025 11:26
Код
      header.header-mobile
    .header-mobile__line.header-mobile__main
        .header-mobile__container.container
            .header-mobile__logo
                include header-mobile-logo/header-mobile-logo
            .header-mobile__buttons
                .header-mobile__phones
                    include header-mobile-phones/header-mobile-phones
                .header-mobile__mobile-menu
                    include header-mobile-menu/header-mobile-menu
    .header-mobile__line.header-mobile__bottom
        .header-mobile__container.container
            .header-mobile__search
                +search-static('type_compact')
    
Логотип
от 31.07.2025 11:26
Код
      .header-mobile-logo
    a.header-mobile-logo__link(href="/")
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540.3 88.7" width="2500" height="410">
        <path fill="#4a3866" d="M51.9 81.9s-2.4 4.3 1.3 5.3c5.4 1.4 7.3-7.5 7.3-7.5l-8.6 2.2z"/>
        <path fill="#4a3866" d="M52.8 82.1s-3.6 8-8.7 6.4c-5.1-1.6 1.4-7 1.4-7l7.3.6z"/>
        <path fill="#4a3866" d="M46.2 81S39 91.8 34.4 87.2c-2.6-2.6 1.9-8.7 1.9-8.7l9.9 2.5z"/>
        <path fill="#ff2753" d="M49.8 0C27.1 0 8.7 18.4 8.7 41.2c0 3.2.4 6.4 1.1 9.4-3 1.7-6.8 5-7 10.5h6.7s-8.1 4.6-8.4 11.6l6.1-1.4S.4 77.9.1 84.8l21-14.2c7.4 7.3 17.6 11.8 28.8 11.8C72.6 82.4 91 63.9 91 41.2 91 18.4 72.6 0 49.8 0z"/>
        <path fill="#fff" d="M41.7 72.1l31.3-54S55.7 3.8 41.7 15.6c-16 13.5-13.3 46.2 0 56.5z"/>
        <path fill="#4a3866" d="M60 28.1c0 5.2-4.2 9.5-9.5 9.5S41 33.4 41 28.1c0-5.2 4.2-9.5 9.5-9.5s9.5 4.3 9.5 9.5z"/>
        <path fill="#ffdd5a" d="M60 56.4l30.3 25.1s36.1-48.6-10-61.1L60 56.4z"/>
        <path fill="#fff" d="M94.3 37.6s8.5 6.6 1.8 15.4c.7-7.7-1.8-15.4-1.8-15.4z"/>
        <g>
        <path fill="#000" d="M142.8 26v48h-10.4V21h5.4c2.7-.1 5 2.3 5 5zM185.8 53.5c0 14.2-6.3 21.4-18.8 21.4s-18.7-7.2-18.7-21.4c0-14.4 6.2-21.4 18.7-21.4s18.8 7.1 18.8 21.4zm-27 0c.1 8 2.8 12.1 8.1 12.1s8-4.2 8-12.4c0-8-2.7-12-8-12s-8.1 4.1-8.1 12.3zM192 52.7c.3-13.3 7.4-20 21.2-20h1.5v10.8h-3.5c-5.8 0-8.7 3-8.7 9V74H192V52.7zM239.1 74.9c-12.5-.4-18.7-7.6-18.7-21.7 0-14 6.3-21.1 18.9-21.1 13.1 0 19.3 8 18.5 24.2h-26.7c.4 6.3 3.1 9.5 8.2 9.5 2.4 0 4.7-1 6.7-3 .9-1 2.1-1.5 3.5-1.5h7.6c-2.3 8.8-7.9 13.6-18 13.6zm-7.9-26h15.5c-.6-5.5-3.2-8.3-7.6-8.3s-7.1 2.8-7.9 8.3zM274.3 47.6V74h-10.5V49.7c0-11.8 5.9-17.6 17.7-17.6 5.3 0 9.4 1.2 12.3 3.5 3-2.3 7-3.4 12.3-3.4 11.8 0 17.6 5.8 17.5 17.6v24.3h-5.4c-3.4-.2-5.1-1.9-5.1-5.1V47.8c-.2-4.3-2.6-6.4-7.2-6.4s-6.9 2.1-7 6.4V74h-10.5V47.6c-.2-4.3-2.6-6.4-7.2-6.4-4.5 0-6.9 2.1-6.9 6.4zM359.5 26v48h-10.4V21h5.4c2.7-.1 5 2.3 5 5zM402.5 53.5c0 14.2-6.3 21.4-18.8 21.4S365 67.7 365 53.5c0-14.4 6.2-21.4 18.7-21.4s18.8 7.1 18.8 21.4zm-26.9 0c.1 8 2.8 12.1 8.1 12.1s8-4.2 8-12.4c0-8-2.7-12-8-12-5.4 0-8.1 4.1-8.1 12.3zM408.7 52.7c.3-13.3 7.4-20 21.2-20h1.5v10.8h-3.5c-5.8 0-8.7 3-8.7 9V74h-10.5V52.7zM455.8 74.9c-12.5-.4-18.7-7.6-18.7-21.7 0-14 6.3-21.1 18.9-21.1 13.1 0 19.3 8 18.5 24.2h-26.7c.4 6.3 3.1 9.5 8.2 9.5 2.4 0 4.7-1 6.7-3 .9-1 2.1-1.5 3.5-1.5h7.6c-2.2 8.8-7.9 13.6-18 13.6zm-7.9-26h15.5c-.6-5.5-3.2-8.3-7.6-8.3-4.4 0-7.1 2.8-7.9 8.3zM491 47.6V74h-10.5V49.7c0-11.8 5.9-17.6 17.7-17.6 5.3 0 9.4 1.2 12.3 3.5 3-2.3 7-3.4 12.3-3.4 11.8 0 17.6 5.8 17.5 17.6v24.3H535c-3.4-.2-5.1-1.9-5.1-5.1V47.8c-.2-4.3-2.6-6.4-7.2-6.4s-6.9 2.1-7 6.4V74h-10.5V47.6c-.2-4.3-2.6-6.4-7.2-6.4s-7 2.1-7 6.4z"/>
        </g>
        </svg>
    
Кнопка телефона
от 31.07.2025 11:26
Код
      .header-mobile-phones
    .header-mobile-phones__item
        a.header-mobile-phones__link(href="tel:+73517319999", rel="nofollow")
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7224 14.5539C16.0042 13.8436 15.1065 13.8436 14.392 14.5539C13.8475 15.0941 13.3025 15.6338 12.767 16.1831C12.6207 16.3341 12.4972 16.3668 12.3181 16.2654C11.9659 16.0732 11.5915 15.918 11.2514 15.7072C9.6724 14.7139 8.34901 13.4365 7.17717 11.999C6.59469 11.2845 6.07821 10.5198 5.71594 9.65954C5.64254 9.48527 5.65733 9.37067 5.79833 9.22914C6.34279 8.70264 6.87405 8.1624 7.41006 7.62216C8.15626 6.87121 8.15626 5.99194 7.40531 5.23677C6.97914 4.8069 6.55402 4.38496 6.12785 3.95404C5.68901 3.51467 5.25386 3.07054 4.81027 2.63592C4.09048 1.93514 3.19272 1.93515 2.47927 2.64068C1.93005 3.18091 1.40354 3.73541 0.844822 4.26561C0.32782 4.75621 0.0664089 5.35559 0.0109593 6.05584C0.000397462 6.19895 -0.00488281 6.33995 -0.00488281 6.48095C-0.00382663 7.46425 0.253353 8.40321 0.598197 9.31997C1.40354 11.4904 2.63136 13.418 4.11847 15.185C6.12838 17.5741 8.52803 19.4657 11.3333 20.8292C12.5975 21.4429 13.9066 21.9144 15.3304 21.9921C15.407 21.9974 15.4825 21.9995 15.5575 22H15.6029C16.4684 21.9968 17.2252 21.728 17.8436 21.0357C18.3109 20.5139 18.8374 20.0371 19.3317 19.5386C20.0637 18.7971 20.0689 17.8994 19.3407 17.1679C18.4709 16.2929 17.5969 15.4226 16.7224 14.5539Z" fill="#E83622" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.8447 10.9062L17.5337 10.6173C17.268 9.06563 16.536 7.65921 15.4232 6.54274C14.246 5.36554 12.7583 4.62351 11.1195 4.39536L10.8818 6.09436C12.1494 6.27287 13.3038 6.84536 14.2149 7.75586C15.0747 8.61671 15.6382 9.70625 15.8447 10.9062Z" fill="#E83622" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M18.4983 3.56171C16.5479 1.61132 14.0799 0.380255 11.3563 0L11.1182 1.69899C13.471 2.02801 15.6041 3.09537 17.2894 4.77483C18.8864 6.37295 19.9364 8.39254 20.3156 10.6128L22.0045 10.3244V10.3223C21.5598 7.74979 20.3473 5.41598 18.4983 3.56171Z" fill="#E83622" />
            </svg>
    
Меню
от 31.07.2025 11:26
Код
      .header-mobile-menu
    .header-mobile-menu__burger
        .header-mobile-menu__burger-icon
            <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M1.05263 0C0.773456 0 0.505715 0.135449 0.308309 0.37655C0.110902 0.617651 0 0.944654 0 1.28562C0 1.62659 0.110902 1.95359 0.308309 2.19469C0.505715 2.4358 0.773456 2.57124 1.05263 2.57124H18.9474C19.2265 2.57124 19.4943 2.4358 19.6917 2.19469C19.8891 1.95359 20 1.62659 20 1.28562C20 0.944654 19.8891 0.617651 19.6917 0.37655C19.4943 0.135449 19.2265 0 18.9474 0H1.05263ZM0 8.99936C0 8.65839 0.110902 8.33139 0.308309 8.09028C0.505715 7.84918 0.773456 7.71373 1.05263 7.71373H18.9474C19.2265 7.71373 19.4943 7.84918 19.6917 8.09028C19.8891 8.33139 20 8.65839 20 8.99936C20 9.34033 19.8891 9.66733 19.6917 9.90843C19.4943 10.1495 19.2265 10.285 18.9474 10.285H1.05263C0.773456 10.285 0.505715 10.1495 0.308309 9.90843C0.110902 9.66733 0 9.34033 0 8.99936ZM0 16.7144C0 16.3734 0.110902 16.0464 0.308309 15.8053C0.505715 15.5642 0.773456 15.4288 1.05263 15.4288H18.9474C19.2265 15.4288 19.4943 15.5642 19.6917 15.8053C19.8891 16.0464 20 16.3734 20 16.7144C20 17.0553 19.8891 17.3823 19.6917 17.6234C19.4943 17.8646 19.2265 18 18.9474 18H1.05263C0.773456 18 0.505715 17.8646 0.308309 17.6234C0.110902 17.3823 0 17.0553 0 16.7144Z" fill="gray" />
            </svg>
    .header-mobile-menu__menu
        .header-mobile-menu__overflow
        .header-mobile-menu__wrapper
            .header-mobile-menu__header
                .header-mobile-menu__title Меню
                .header-mobile-menu__close
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.8576 1.03729C2.6602 0.839885 2.3751 0.746341 2.06503 0.777237C1.75496 0.808134 1.44531 0.96094 1.20421 1.20204C0.963108 1.44314 0.810302 1.75279 0.779405 2.06286C0.748508 2.37293 0.842053 2.65803 1.03946 2.85544L15.1444 16.9604C15.3418 17.1578 15.6269 17.2513 15.937 17.2204C16.247 17.1895 16.5567 17.0367 16.7978 16.7956C17.0389 16.5545 17.1917 16.2449 17.2226 15.9348C17.2535 15.6247 17.1599 15.3396 16.9625 15.1422L2.8576 1.03729Z" fill="#242727" />
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.03729 15.1443C0.839885 15.3418 0.746341 15.6269 0.777237 15.9369C0.808134 16.247 0.96094 16.5566 1.20204 16.7977C1.44314 17.0388 1.75279 17.1917 2.06286 17.2225C2.37293 17.2534 2.65803 17.1599 2.85544 16.9625L16.9604 2.85757C17.1578 2.66017 17.2513 2.37507 17.2204 2.065C17.1895 1.75492 17.0367 1.44528 16.7956 1.20418C16.5545 0.963077 16.2449 0.81027 15.9348 0.779373C15.6247 0.748477 15.3396 0.842022 15.1422 1.03943L1.03729 15.1443Z" fill="#242727" />
                    </svg>
            .header-mobile-menu__center
                .header-mobile-menu__content
                    .header-mobile-menu__search
                        +search-static('type_compact')
                    .header-mobile-menu__menus
                        .header-mobile-menu__menu-primary
                            include ../../menus/menu-primary-mobile/menu-primary-mobile
                        .header-mobile-menu__menu-secondary
                            include ../../menus/menu-secondary-mobile/menu-secondary-mobile
                    .header-mobile-menu__buttons
                        .header-mobile-menu__button.header-mobile-menu__button-submit-your-application
                            a.header-mobile-menu__button-submit-your-application-link.button.button-primary.button-m(href="#", data-modal-popup="submit-your-application") Оставить заявку
                        .header-mobile-menu__button.header-mobile-menu__button-callback
                            a.header-mobile-menu__button-callback-link.button.button-primary.button-m(href="#", data-modal-popup="callback") Заказать звонок
                    .header-mobile-menu__contacts
                        include ../../footer/footer-contacts/footer-phone/footer-phone
                        include ../../footer/footer-contacts/footer-email/footer-email
    
Menu Primary
от 31.07.2025 11:26
Код
      .menu-primary-mobile
    ul.menu-primary-mobile__list.menu-primary-mobile__list-level-1
        li.menu-primary-mobile__item.menu-primary-mobile__expanded
            a.menu-primary-mobile__link(href="#")
                span.menu-primary-mobile__name Пункт 1
                span.menu-primary-mobile__arrow
                    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.3535 1.35352L7 7.70703L0.646484 1.35352L1.35352 0.646484L7 6.29297L12.6465 0.646484L13.3535 1.35352Z" fill="#A1A1A1" />
                    </svg>
            ul.menu-primary-mobile__list.menu-primary-mobile__list-level-2
                li.menu-primary-mobile__item
                    a.menu-primary-mobile__link(href="#")
                        span.menu-primary-mobile__name Пункт 1
                li.menu-primary-mobile__item
                    a.menu-primary-mobile__link(href="#")
                        span.menu-primary-mobile__name Пункт 2
        li.menu-primary-mobile__item
            a.menu-primary-mobile__link(href="#")
                span.menu-primary-mobile__name Пункт 2
        li.menu-primary-mobile__item
            a.menu-primary-mobile__link(href="#")
                span.menu-primary-mobile__name Пункт 3
        li.menu-primary-mobile__item
            a.menu-primary-mobile__link(href="#")
                span.menu-primary-mobile__name Пункт 4
    
Menu Secondary
от 31.07.2025 11:26
Код
      .menu-secondary-mobile
    ul.menu-secondary-mobile__list.menu-secondary-mobile__level-1
        li.menu-secondary-mobile__item.menu-secondary-mobile__expanded
            a.menu-secondary-mobile__link(href="#")
                span.menu-secondary-mobile__name Пункт 1
                span.menu-secondary-mobile__arrow
                    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.3535 1.35352L7 7.70703L0.646484 1.35352L1.35352 0.646484L7 6.29297L12.6465 0.646484L13.3535 1.35352Z" fill="#A1A1A1" />
                    </svg>
            ul.menu-secondary-mobile__list.menu-secondary-mobile__level-2
                li.menu-secondary-mobile__item
                    a.menu-secondary-mobile__link(href="#")
                        span.menu-secondary-mobile__name Подпункт 1
                li.menu-secondary-mobile__item
                    a.menu-secondary-mobile__link(href="#")
                        span.menu-secondary-mobile__name Подпункт 2
        li.menu-secondary-mobile__item
            a.menu-secondary-mobile__link(href="#")
                span.menu-secondary-mobile__name Пункт 2
        li.menu-secondary-mobile__item
            a.menu-secondary-mobile__link(href="#")
                span.menu-secondary-mobile__name Пункт 3
        li.menu-secondary-mobile__item
            a.menu-secondary-mobile__link(href="#")
                span.menu-secondary-mobile__name Пункт 4
    
Телефоны в меню
от 31.07.2025 11:26
Код
      .footer-phone
    .footer-phone__items
        .footer-phone__item
            .footer-phone__title Многоканальный телефон:
            a.footer-phone__link(href="tel:+70000000000")
                span.footer-phone__value +7 (000) 000-00-00
    
Почта в меню
от 31.07.2025 11:26
Код
      .footer-email
    .footer-email__items
        .footer-email__item
            a.footer-email__link(href="mailto:example@example.ru")
                span.footer-email__value example@example.ru
    

Changelogs

v1.0.0
latest
от 31.07.2025
  • Открыть/закрыть меню по клику на "бургер"
  • Закрыть меню по кнопке закрытия
  • Закрыть меню по заднему фону
  • Развернуть/свернуть пункты меню