Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
MiniMenu: крошечное дополнение к меню
Дата добавления: 25.05.2017 - 00:34
Категория: Переключатели / Навигация
Добавил: Buger
Количество просмотров: 509
Количество комментариев: 0
Размер файла: 15.2Kb
Рейтинг материала: 5.0 / 1
БЕСПЛАТНО
рейтинг
5.0
/
голосов
1
Поделись с друзьями:
MiniMenu может добавить крошечную, но уникальную навигацию на ваш сайт. В зависимости от ваших потребностей оно может выполнять роль основного и вспомогательного меню и подходит для использования как на рабочем столе, так и на мобильном устройстве (где оно привязывается к полноэкранному режиму, чтобы в полной мере использовать пространство экрана).
С простыми знаниями кодирования вы, конечно, можете расширить и изменить его так, как сочтете нужным.
Работу данного MiniMenu вы сможете посмотреть в демонстрации
Установка:
Загрузить папку /minimenu/ в файловый менеджер сайта, включая папки /css/, /js/, /fonts/, вместе с их содержимым.
Подключить скрипты и стили
HTML разметка:
Источник: http://art-ucoz.ru/
С простыми знаниями кодирования вы, конечно, можете расширить и изменить его так, как сочтете нужным.
Работу данного MiniMenu вы сможете посмотреть в демонстрации
Установка:
Загрузить папку /minimenu/ в файловый менеджер сайта, включая папки /css/, /js/, /fonts/, вместе с их содержимым.
Подключить скрипты и стили
Код
<link rel="stylesheet" href="/minimenu/css/minimenu.css" type="text/css" media="all" />
<script src="/minimenu/js/jquery.scrollbar.min.js" type="text/javascript"></script>
<script src="/minimenu/js/minimenu.js" type="text/javascript"></script>
<script src="/minimenu/js/jquery.scrollbar.min.js" type="text/javascript"></script>
<script src="/minimenu/js/minimenu.js" type="text/javascript"></script>
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 -->
<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 -->
Источник: http://art-ucoz.ru/
