0.0.9 • Published 6 years ago
@megalabs/ml-topbar v0.0.9
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
Для установки пакета
- npm i @megalabs/ml-topbar
- затем в папке @megalabs/ml-topbar запускаем npm install
- npm start