Дата и время публикации : 03 Июня 17 в 02:42 | Раздел : Меню для uCoz
| Параметр | Значение |
|---|---|
| Дата публик. | 03 Июня 17, Суббота, 02:42 |
| Размер файла | 15.2 Kb |
| Адапт. дизайн | |
| Обновления | Не производились |
| Просмотрен | 646 |
| Загружен | 17 |
MiniMenu может добавить крошечную, но уникальную навигацию на ваш сайт. В зависимости от ваших потребностей оно может выполнять роль основного и вспомогательного меню и подходит для использования как на рабочем столе, так и на мобильном устройстве (где оно привязывается к полноэкранному режиму, чтобы в полной мере использовать пространство экрана).
С простыми знаниями кодирования вы, конечно, можете расширить и изменить его так, как сочтете нужным.
Установка:
1. Загрузить папку /minimenu/ в файловый менеджер сайта, включая папки /css/, /js/, /fonts/, вместе с их содержимым.
2. Подключить скрипты и стили :
3. HTML разметка:
<!-- BEGIN MENU BUTTON -->
<div class="minimenu-menu-button-wrapper">
<div class="minimenu-menu-tooltip"></div>
<div class="minimenu-menu-button-wrapper-inner">
<div class="minimenu-menu-button"></div>
<div class="minimenu-menu-button-middle"></div>
</div>
<div class="minimenu-menu-button-text-wrapper">
<div class="minimenu-menu-button-text">Browse</div>
</div>
</div>
<!-- END MENU BUTTON -->
<!-- BEGIN MENU + SOCIAL BAR -->
<div class="minimenu-by-bonfire-wrapper">
<!-- BEGIN MENU -->
<div class="minimenu-close-button"></div>
<div class="minimenu-by-bonfire">
<div class="minimenu-by-bonfire-inner">
<div class="menu-minimenu-menu-container">
<!-- BEGIN MENU ITEMS -->
<ul>
<li><a href="#">Purchase MiniMenu</a>
<div class="minimenu-menu-item-description">This is a menu item description.</div>
</li>
<li class="menu-item-has-children"><a href="#">PC Enthusiast</a>
<ul class="sub-menu">
<li><a href="#">Pre-built</a> | </li>
<li class="menu-item-has-children"><a href="#">By component:</a>
<ul class="sub-menu">
<li><a href="#">CPU</a>,</li>
<li><a href="#">GPU</a>,</li>
<li><a href="#">Motherboard</a> | </li>
</ul>
</li>
<li><a href="#">New tech</a></li>
</ul>
</li>
<li><a href="#">Solo menu item</a></li>
<li><a href="#">Another menu item</a></li>
</ul>
<!-- END MENU ITEMS -->
</div>
<img style="width:100%;" src="http://art-ucoz.ru/files/Navigation/3/lcgo.jpg">
</div>
</div>
<!-- END MENU -->
<!-- BEGIN SOCIAL -->
<div class="minimenu-social-bar-wrapper">
<div class="minimenu-social-bar-label">SOCIAL:</div>
<div class="minimenu-social-bar-icons">
<a href="#">
<span class="minimenu-icon-youtube"></span>
</a>
<a href="#">
<span class="minimenu-icon-twitter"></span>
</a>
<a href="#">
<span class="minimenu-icon-facebook"></span>
</a>
<a href="#">
<span class="minimenu-icon-instagram"></span>
</a>
<a href="#">
<span class="minimenu-icon-google-plus"></span>
</a>
</div>
</div>
<!-- END SOCIAL -->
</div>
<!-- BEGIN MENU + SOCIAL BAR -->
<!-- BEGIN BACKGROUND OVERLAY -->
<div class="minimenu-overlay"></div>
<!-- END BACKGROUND OVERLAY -->
Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.
Вход РегистрацияАдаптивная навигация бурно развивалась в веб — дизайне последние пару лет. Дизайнеры как могли упрощали её и делали интуитивно понятно и удоб...
