@megalabs/ml-topbar

v0.0.9

Published

3 years ago

*Простой Top Bar с одной кнопкой*

Downloads

0High
0Medium
0Low

Top Bar

Простой Top Bar с одной кнопкой

<div class="ml-topbar">
    <div class="ml-topbar__head">
        <div class="ml-topbar__left">
            <a href="#" class="ml-topbar__logo"></a>
            <span class="ml-topbar__service">Название услуги</span>
        </div>
        <div class="ml-topbar__right">
            <a href="#" class="ml-button-icon-text ml-topbar__item">
                <span class="ml-button-icon-text__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                        <g fill="#333">
                            <circle cx="9" cy="16" r="1.5"></circle>
                            <path d="M16.92 12c-1.8104-3.1357-5.5013-4.6646-8.9988-3.7274C4.4238 9.2097 
                                     1.9918 12.3792 1.9918 16s2.432 6.7903 5.9294 7.7274c3.4975.9372 
                                     7.1884-.5917 8.9988-3.7274H30v-4.41L26.41 12h-9.49zM28 18H15.69l-.27.57c-1.202
                                      2.5358-4.001 3.8997-6.7389 3.2836-2.7377-.616-4.6828-3.0474-4.6828-5.8536s1.945-5.2376 
                                      4.6828-5.8536c2.7378-.616 5.5369.7478 6.7389 3.2836l.27.57h9.9L28 16.41V18z">
                            </path>
                        </g>
                    </svg>
                </span>
                <span class="ml-button-icon-text__text">
                    Личный кабинет
                </span>
            </a>
        </div>
    </div>
</div>

Top Bar + short buttons

Top Bar с группой кнопок

<div class="ml-topbar">
    <div class="ml-topbar__head">
        <div class="ml-topbar__left">
            <a href="#" class="ml-topbar__logo"></a>
            <span class="ml-topbar__service">Название услуги</span>
        </div>
        <div class="ml-topbar__right">
            <a href="#" class="ml-button-icon-text ml-topbar__item">
                <span class="ml-button-icon-text__icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                            <g fill="#333">
                                <circle cx="9" cy="16" r="1.5"></circle>
                                <path d="M16.92 12c-1.8104-3.1357-5.5013-4.6646-8.9988-3.7274C4.4238 
                                         9.2097 1.9918 12.3792 1.9918 16s2.432 6.7903 5.9294 7.7274c3.4975.9372 
                                         7.1884-.5917 8.9988-3.7274H30v-4.41L26.41 12h-9.49zM28 18H15.69l-.27.57c-1.202 
                                         2.5358-4.001 3.8997-6.7389 3.2836-2.7377-.616-4.6828-3.0474-4.6828-5.8536s1.945-5.2376
                                          4.6828-5.8536c2.7378-.616 5.5369.7478 6.7389 3.2836l.27.57h9.9L28 16.41V18z">
                                </path>
                            </g>
                        </svg>
                    </span>
                <span class="ml-button-icon-text__text">
                    Личный кабинет
                </span>
            </a>
            <a href="#" class="ml-button-icon ml-topbar__item">
                <span class="ml-button-icon__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                        <path d="M20.54 8l-2-3h-5.08l-2 3H4v19h24V8h-7.46zm-6-1h2.93l.67 1h-4.27l.67-1zM6 
                                 10h20v4h-5.62l-2 4h-4.77l-2-4H6v-4zm0 15v-9h4.34l2 4h7.23l2-4H26v9H6z">
                        </path>
                    </svg>
                </span>
            </a>
            <a href="#" class="ml-button-icon ml-topbar__item">
                <span class="ml-button-icon__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                        <path fill="#333" d="M4 5h24v3H4V5zm0 9h24v3H4v-3zm0 9h24v3H4v-3z"></path>
                    </svg>
                </span>
            </a>
        </div>
    </div>
</div>

Top Bar + Navigation menu

Top Bar и меню навигации по LP

<div class="ml-topbar">
    <div class="ml-topbar__head">
        <div class="ml-topbar__left">
            <a href="#" class="ml-topbar__logo"></a>
            <span class="ml-topbar__service">Название услуги</span>
        </div>
        <div class="ml-topbar__right">
            <a href="#" class="ml-button-icon-text ml-topbar__item">
                <span class="ml-button-icon-text__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                        <g fill="#333">
                            <circle cx="9" cy="16" r="1.5"></circle>
                            <path d="M16.92 12c-1.8104-3.1357-5.5013-4.6646-8.9988-3.7274C4.4238 9.2097 
                                     1.9918 12.3792 1.9918 16s2.432 6.7903 5.9294 7.7274c3.4975.9372 7.1884-.5917 
                                     8.9988-3.7274H30v-4.41L26.41 12h-9.49zM28 18H15.69l-.27.57c-1.202 2.5358-4.001
                                      3.8997-6.7389 3.2836-2.7377-.616-4.6828-3.0474-4.6828-5.8536s1.945-5.2376
                                       4.6828-5.8536c2.7378-.616 5.5369.7478 6.7389 3.2836l.27.57h9.9L28 16.41V18z">
                            </path>
                        </g>
                    </svg>
                </span>
                <span class="ml-button-icon-text__text">
                        Личный кабинет
                </span>
            </a>
        </div>
    </div>
    <div class="ml-topbar-nav">
        <ul class="ml-topbar-nav__wrap">
            <li class="ml-topbar-nav__item"><a href="#">Рассчитайте стоимость</a></li>
            <li class="ml-topbar-nav__item"><a href="#">Тарифы и цены</a></li>
            <li class="ml-topbar-nav__item"><a href="#">Способы подключения</a></li>
            <li class="ml-topbar-nav__item"><a href="#">Интеграция с CRM</a></li>
            <li class="ml-topbar-nav__item"><a href="#">Вопросы и ответы</a></li>
        </ul>
    </div>
</div>

Top Bar MF

Top Bar переход с сайта МегаФона

<div class="ml-topbar">
    <div class="ml-topbar__head">
        <div class="ml-topbar__left">
            <a href="#" class="ml-topbar__logo"></a>
            <span class="ml-topbar__service">Название услуги</span>
        </div>
        <div class="ml-topbar__right">
            <a href="#" class="ml-button-icon-text ml-topbar__item">
                <span class="ml-button-icon-text__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                            <g fill="#333">
                                <circle cx="9" cy="16" r="1.5"></circle>
                                <path d="M16.92 12c-1.8104-3.1357-5.5013-4.6646-8.9988-3.7274C4.4238 9.2097
                                         1.9918 12.3792 1.9918 16s2.432 6.7903 5.9294 7.7274c3.4975.9372 7.1884-.5917
                                          8.9988-3.7274H30v-4.41L26.41 12h-9.49zM28 18H15.69l-.27.57c-1.202 2.5358-4.001
                                           3.8997-6.7389 3.2836-2.7377-.616-4.6828-3.0474-4.6828-5.8536s1.945-5.2376
                                           4.6828-5.8536c2.7378-.616 5.5369.7478 6.7389 3.2836l.27.57h9.9L28 16.41V18z">
                                </path>
                            </g>
                        </svg>
                </span>
                <span class="ml-button-icon-text__text">
                        Личный кабинет
                </span>
            </a>
        </div>
    </div>

    <div class="ml-topbar-nav">
        <ul class="ml-topbar-nav__wrap">
            <li class="ml-topbar-nav__item has-subnav"><a href="#">Рассчитайте стоимость</a>
                <div class="ml-topbar-nav__submenu">
                    <ul class="ml-topbar-nav__subitems">
                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>

                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>
                    </ul>
                    <ul class="ml-topbar-nav__subitems">
                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>

                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="ml-topbar-nav__item has-subnav">
                <a href="#">Тарифы и цены</a>
                <div class="ml-topbar-nav__submenu">
                    <ul class="ml-topbar-nav__subitems">
                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>

                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>
                    </ul>
                    <ul class="ml-topbar-nav__subitems">
                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>

                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="ml-topbar-nav__item has-subnav"><a href="#">Способы подключения</a>
                <div class="ml-topbar-nav__submenu">
                    <ul class="ml-topbar-nav__subitems">
                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>

                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>
                    </ul>
                    <ul class="ml-topbar-nav__subitems">
                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>

                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="ml-topbar-nav__item has-subnav"><a href="#">Интеграция с CRM</a>
                <div class="ml-topbar-nav__submenu ml-topbar-nav__submenu--right">
                    <ul class="ml-topbar-nav__subitems">
                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>

                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>
                    </ul>
                    <ul class="ml-topbar-nav__subitems">
                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>

                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="ml-topbar-nav__item has-subnav"><a href="#">Вопросы и ответы</a>
                <div class="ml-topbar-nav__submenu ml-topbar-nav__submenu--right">
                    <ul class="ml-topbar-nav__subitems">
                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>

                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>
                    </ul>
                    <ul class="ml-topbar-nav__subitems">
                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>

                        <li class="ml-topbar-nav__subitem ml-topbar-nav__subitem--title">
                            <a href="#">Заголовок подменю</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Пункт меню</a>
                        </li>
                        <li class="ml-topbar-nav__subitem">
                            <a href="#">Интеграция с CRM</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

Top Bar + search

Top Bar с поиском по сайту

<div class="ml-topbar" id="topBarSearch">
    <div class="ml-topbar__head">
        <div class="ml-topbar__left">
            <a href="#" class="ml-topbar__logo"></a>
            <span class="ml-topbar__service">Название услуги</span>
        </div>
        <div class="ml-topbar__right">
            <div class="ml-input-search ml-topbar__item ml-topbar__item--search">
                <input type="text" class="ml-input-search__input" placeholder="Найти" id="topBarInput">
                <a href="#" class="ml-input-search__button" id="topBarFind">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                        <path fill="#333" d="M16 24a9.94 9.94 0 0 0 5.7-1.8l4.83 5.8L28 26.72l-4.78-5.82c3.2775-3.438
                                             3.6842-8.7073.973-12.6076-2.711-3.9003-7.7918-5.3552-12.1564-3.4812-4.3647
                                              1.874-6.8088 6.5598-5.848 11.2116C7.1494 20.6746 11.25 24.0086 
                                              16 24zm0-18c4.4183 0 8 3.5817 8 8s-3.5817 8-8 8-8-3.5817-8-8 3.5817-8 8-8z">
                        </path>
                    </svg>
                </a>
            </div>
            <a href="#" class="ml-button-icon-text ml-topbar__item">
                <span class="ml-button-icon-text__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                            <g fill="#333">
                                <circle cx="9" cy="16" r="1.5"></circle>
                                <path d="M16.92 12c-1.8104-3.1357-5.5013-4.6646-8.9988-3.7274C4.4238
                                         9.2097 1.9918 12.3792 1.9918 16s2.432 6.7903 5.9294 7.7274c3.4975.9372 
                                         7.1884-.5917 8.9988-3.7274H30v-4.41L26.41 12h-9.49zM28 18H15.69l-.27.57c-1.202 
                                         2.5358-4.001 3.8997-6.7389 3.2836-2.7377-.616-4.6828-3.0474-4.6828-5.8536s1.945-5.2376
                                          4.6828-5.8536c2.7378-.616 5.5369.7478 6.7389 3.2836l.27.57h9.9L28 16.41V18z">
                                </path>
                            </g>
                        </svg>
                </span>
                <span class="ml-button-icon-text__text">
                    Личный кабинет
                </span>
            </a>
        </div>
    </div>
</div>

npm репозиторий - [https://www.npmjs.com/package/@megalabs/ml-topbar] (https://www.npmjs.com/package/@megalabs/ml-topbar)

Для установки пакета

npm i @megalabs/ml-topbar
затем в папке @megalabs/ml-topbar запускаем npm install
npm start

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Top Bar

Top Bar + short buttons

Top Bar + Navigation menu

Top Bar MF

Top Bar + search