Выпадающее меню с анимацией для Битрикс

 11168 |  31

Ни когда особо не заморачивался с меню в битрикс, как правило просто модифицировал встроенные шаблоны под дизайн. Но вчера решил заморочиться и сделать себе выпадающее меню с легким эффектом анимации (собственно живой образец можете наблюдать на этом сайте). Решил поделиться, малоли кому понадобится.

Выпадающее меню для Битрикс

Качаем архив: "amimate_menu", распаковывем в папку со своим Битрикс шаблоном и пременяем для меню, не забывайте настроить уровень вложенности.

Черной подложки под меню нет- то есть меню предназначено не для белого фона, однако вы легко сможете изменить цвет букв в настройках css меню.

Расскажи друзьям-то:

 Предыдущая запись Следующая запись 

Еще в записках:

Вывести новости из конкретного раздела инфоблока Битрикс Следующая/предыдущая новость/статья при просмотре подробной в Битрикс Спойлер в списке новостей Битрикс Табы из свойств инфоблока в Битрикс

Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей

Зарегистрироваться Войти Напомнить пароль

Гость сайта 20.11.2013
Добрый день, хочу выразить благодарность за отличные уроки. Не подскажите как правильно сделать, чтоб выпадающие пункты меню, отображались как линию ( как второе горизонтальное меню), и чтоб оно не исчезало, если убрать курсор, тоесть чтоб все подпункты были видны, до тех пор пока не открыть другой родительский пункт меню? Заранее спасибо.

Михаил Базаров 20.11.2013

Цитата

Гость сайта пишет:
Добрый день, хочу выразить благодарность за отличные уроки.
Не подскажите как правильно сделать, чтоб выпадающие пункты меню, отображались как линию ( как второе горизонтальное меню), и чтоб оно не исчезало, если убрать курсор, тоесть чтоб все подпункты были видны, до тех пор пока не открыть другой родительский пункт меню?
Заранее спасибо.

Думаю с помощью js- по идее можно сначала сделать такое меню (как вариант, найти готовое) на HTML/CSS а потом просто интегрировать в битрикс.

berdnik 21.12.2013
Подскажите а каким образом мне пременить для меню?

Михаил Базаров 22.12.2013

Цитата
berdnik пишет: Подскажите а каким образом мне пременить для меню?

Распаковать архив, кинуть в папку с Вашим шаблоном битрикс, из публичной части зайти в настройки компонента меню и выбрать этот шаблон (совпадет с названием папки)

berdnik 18.01.2014
Ну вот хот один адекватный пользователь Битрикса появился, вот сам бы хрен додумался что выбирать шаблон меню надо именно из публичной части, всю админку перерыл!! Друг а расскажи еще пожалуйста как добавить разделы в выпадающее меню!

Михаил Базаров 19.01.2014

Цитата

berdnik пишет:
Ну вот хот один адекватный пользователь Битрикса появился, вот сам бы хрен додумался что выбирать шаблон меню надо именно из публичной части, всю админку перерыл!!

Друг а расскажи еще пожалуйста как добавить разделы в выпадающее меню!

Создай тип меню для выпадающего (например левое или меню раздела, не принципиально как его обозвать). И в настройках компонента подключи его указав как "Тип меню для остальных уровней"

Примерно так:

Алексей 20.05.2014
Добрый день, Михаил! Спасибо за уроки! Возникла проблема, после подключения меню в битрикс на главной странице все отображается замечательно, но при переходе на любую другую страницу не работает скрипт меню, отображаются только пункты меню верхнего уровня, из-за чего такое может быть? ВИДИМО ТА ЖЕ ПРОБЛЕМА- пройдите сюда http://camouf.ru/blog-note/bx_site_created/5.html

Евгений 04.06.2014
Здравствуйте. Подскажите пожалуйста как добавить картинки для подкатегорий в выпадающего горизонтального меню, которую вы выложили в данной статье. При наведении курсора на подкотегорию показывалась картинка. как на сайте http://www.porsche.com/russia/

Михаил Базаров 04.06.2014

Цитата

Евгений пишет:
Здравствуйте. Подскажите пожалуйста как добавить картинки для подкатегорий в выпадающего горизонтального меню, которую вы выложили в данной статье. При наведении курсора на подкотегорию показывалась картинка. как на сайте http://www.porsche.com/russia/

Подсмотрите в типовом магазине, что идет в комплекте с битрикс- там это реализовано

Сергей 09.06.2014
Здравствуйте, Михаил. Спасибо за Ваши уроки, очень познавательно. Подскажите пожалуйста. Добавил в основном динамическом left меню (где меню каталога Ремни, Платья и т.д.) новый статический раздел (Инфо) с выпадающим меню подразделов (Видео, Статьи и т.д.) для статей. Получилось так, Ремни, Платья, Инфо. Но когда нажимаешь на выпадающий подраздел (Видео) новго раздела (Инфо), то в основном меню на месте нового раздела (Инфо) появляется вложенные подразделы (Видео, Статьи и т.д.). Как сделать так, чтобы нажимая на выпадающий подраздел, главное меню не изменялось и оставалось как было (Ремни, Платья, Инфо)? Спасибо за ответ. Сергей.

Михаил Базаров 09.06.2014

Цитата

Сергей пишет:
Здравствуйте, Михаил.

Спасибо за Ваши уроки, очень познавательно.

Подскажите пожалуйста.

Добавил в основном динамическом left меню (где меню каталога Ремни, Платья и т.д.) новый статический раздел (Инфо) с выпадающим меню подразделов (Видео, Статьи и т.д.) для статей. Получилось так, Ремни, Платья, Инфо.
Но когда нажимаешь на выпадающий подраздел (Видео) новго раздела (Инфо), то в основном меню на месте нового раздела (Инфо) появляется вложенные подразделы (Видео, Статьи и т.д.). Как сделать так, чтобы нажимая на выпадающий подраздел, главное меню не изменялось и оставалось как было (Ремни, Платья, Инфо)?

Спасибо за ответ.

Сергей.

Первое что приходит в голову: в подразделе Видео раздела Инфо, физически, лежит файл left.menu или его ext. Поэтому в этом разделе вызывается именно оно
Посмотрите вот это видео http://camouf.ru/blog-note/bx_site_created/5.html во всяком случает этот момент прояснится.

Михаил 13.06.2014
Миша, спасибо большое! Хорошие Уроки! Лучшего пока не встретил! Но все таки можно ли создать урок как создать в этом меню, выпадающие подменю? Если данный урок есть, подскажите его расположение! Спасибо! ))

Алексей 18.03.2015
Добре!! Вот сегодня попалось!! Кажется это твое!!! http://www.miditator.ru/blog/1c-bitrix/vypadayushchee-menyu-dlya-bitriks/

Михаил Базаров 18.03.2015

Цитата
Алексей пишет: http://www.miditator.ru/blog/1c-bitrix/vypadayushchee-menyu-dlya-bitriks/

Это сайт моего партнера, над многими проектами работаем вместе) Ну да многое забрано у меня.

Илья 11.07.2015
Михаил здравствуйте. Можно еще немного подробнее объяснить как применить данный шаблон для меню, а то как то совсем не получается ((( Заранее спасибо за ваш труд.

Илья 17.07.2015

Цитата
Илья пишет: Михаил здравствуйте. Можно еще немного подробнее объяснить как применить данный шаблон для меню, а то как то совсем не получается ((( Заранее спасибо за ваш труд.

Стоило подолбаться еще и все получилось)

Максим 20.08.2015
Добрый вечер! Спасибо за Ваши уроки! Актуальная статья про выпадающее меню. Но интересно было бы прикрутить его к каталогу! При чём к активному каталогу, который постоянно обновляется разделами из 1с! А то у меня сейчас перед списком товаров большое пространство съедает каталожное дерево. Не хорошо( Вот для примера https://lineofdance.ru/magazin/katalog/obuv/ В инете много кода с выпадающим меню. Но прикрутить его к каталожному дереву я не смог. Мозгов не хватает. Скажите, на сколько сложно Ваш код адаптировать к каталогу, что бы сделать его с выпадающими разделами и тем самым спрятать второй уровень? Полностью убирать не хочу. Нужна наглядность при наведении. Спасибо! К стати мой сайт сделан самостоятельно благодаря Вашим урокам!

Михаил Базаров 20.08.2015

Цитата
Максим пишет: https://lineofdance.ru/magazin/katalog/obuv/

Сделать совсем не сложно, через ext меню, а так тот же самый шаблон

Mexxt 16.09.2015
Добрый день! Пытался добавить пункт в верхнем меню, удалил его, и все меню пропало. Но когда нажимаешь на раздел "О школе" все меню появляются слева, но как будто в старом виде (месячной давности). Можно как-то переместить это левое меню в верхнее? Просто там куча подменю и т.д. уже не вспомнишь как оно должно быть... Или есть некий откат, скажем на 1 день назад? Заранее благодарен.

Михаил Базаров 16.09.2015

Цитата

Mexxt пишет:
Добрый день!
Пытался добавить пункт в верхнем меню, удалил его, и все меню пропало. Но когда нажимаешь на раздел "О школе" все меню появляются слева, но как будто в старом виде (месячной давности).
Можно как-то переместить это левое меню в верхнее? Просто там куча подменю и т.д. уже не вспомнишь как оно должно быть...
Или есть некий откат, скажем на 1 день назад?

Заранее благодарен.

Если настроено резервное копирование раз в день- то можно откатиться на день назад.

А так: разбирайтесь с файлами меню в структуре, или удалите все и создайте по новой (не разделы а именно файлы меню)