MMenu 1.2.3 - выдвижное multi-level sliding меню для uCoz

3287 просмотров Alan_Writer 02.04.2016

Скачать 📥 Демо ▶️

Так, ну вот и очередное выдвижное меню, сразу скажу - будет еще несколько, т.к каждое имеет какие-то свои фишки, поэтому самые интересные которые я нашел и смог адаптировать - буду выкладывать. Конкретно это, плагин MMenu - выдвижное multi-level sliding меню, то есть многоуровневое меню в виде слайдера. Его новая версия (v5.6.0) - это вообще одно из первых что я нашел, вот только именно новую версию - поставить на uCoz не получилось. Но потом случайно наткнулся аж на версию 1.2.3 - трехлетней давности, и хоть она значительно проще - но самые основные функции у нее уже есть, а главное она без проблем установилась на uCoz.

Главные достоинства плагина в том, что в качестве исходного каркаса для меню - используется обычный список ul, как с одним, так и с несколькими уровнями, когда у одного пункта - может быть свой подпункт, а у того свой и тд. То есть такой же каркас - как и у стандартного меню uCoz, с которым этот плагин легко удалось соединить. Поэтому вам нужно лишь установить скрипт, а пункты меню - добавлять, удалять или сортировать через ПУ. И это для многих важно, т.к редактировать даже самый простой html-код не все умеют.

Основные функции и достоинства меню - компактность, плавная анимация смены уровней, счетчик количества подпунктов. Плюс ко всему, я еще и сильно изменил его внешний вид, т.к это старая версия еще из тех времен где flat был не в теме, а главное - сделал его адаптивным.

Установка

1. Скачайте архив и все содержимое залейте в корень сайта.

2. В верхнюю часть сайта вставьте кнопку, по нажатию на которую будет открываться меню:
Код
<a href="#uNMenuDiv1" class="onmenu" title="Открыть меню"></a>

Я сильно оформлять ее не стал, можете сделать как вам нужно.

3. Ну и сам блок меню, со скриптами и стилями. Это все нужно устанавливать именно перед закрывающим тегом body и нигде иначе:
Код
<!-- < Блок меню > -->
$NMENU_1$
<!-- </ Блок меню > -->
<link type="text/css" rel="stylesheet" href="/css/mmenu.css"/>
<script src="/js/mmenu.js"></script>
<script>
$("#uNMenuDiv1").mmenu({
addCounters: true, // счетчики, вкл или выкл
position: "left", // позиция, слева или справа
});
</script>

Ну и все, а дальше идете в ПУ, заполняете меню нужными пунктами и подпунктами - и оцениваете новое крутое меню на сайте. Ставь лайк и подписывайся на канал - если понравилось это видео!

Теги: flat, MMenu, скользящее, выдвижное, адаптивное, Sliding, multi-level
4 Комментария
avatar
3
как его установить? не получается по инструкции sad
avatar
4
Значит ты ставишь не так, там все правильно описано.
avatar
2
Кто та мразь что влепила диз, покажись!
avatar
1
Допилил анимацию открытия/закрытия меню - теперь вообще конфетка!