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

Просмотров: 15728 | Комментариев: 32

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

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

Качаем архив: "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 день назад?

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

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

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

Дмитрий 21.01.2016
Во первых сверх спасибо за все уроки а вопрос одни отцентровка этого меню оно прилипает к левому можно отступом но тогда на разных разрешениях по разному за ранее спасибо

Максим Иванов 14.04.2016
Добрый день. Благодарю за урок. А трехуровое меню такое как сделать, чтобы сбоку например если у раздела есть подразделы они тоже отображались?

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

Цитата
Максим Иванов написал: Добрый день. Благодарю за урок. А трехуровое меню такое как сделать, чтобы сбоку например если у раздела есть подразделы они тоже отображались?

А должны бы сами, там в стилях на 4 уровня прописано- если не ошибаюсь

Сергей Кононов 05.06.2016
Михаил, подскажите пожалуйста каким параметром и где регулируется высота выпадающего меню? Т.е. в частности в типовом решении меню выпадает до определенного предела вниз, потом позиции, которые не влезли формируются вторым рядом. Вот предел высоты где регулируется? Спасибо.

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

Цитата

Сергей Кононов написал:
Михаил, подскажите пожалуйста каким параметром и где регулируется высота выпадающего меню?
Т.е. в частности в типовом решении меню выпадает до определенного предела вниз, потом позиции, которые не влезли формируются вторым рядом. Вот предел высоты где регулируется? Спасибо.

По идее предела там нет, должно выпадать в бесконечность. Во всяком случае, проверил на одном из сайтов где это меню стоит (у меня на сайте уже давно не оно). Смотрите где-то в стилях своего сайта- может быть какой-то конфликт с другими стилями, с похожими названиями селекторов

Сергей Кононов 05.06.2016
В типовом магазине от битрикса реализовано так: https://cloud.mail.ru/public/A81M/FDeabUZYe Какой параметр в стилях может за это отвечать?

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

Цитата
Сергей Кононов написал: В типовом магазине от битрикса реализовано так: https://cloud.mail.ru/public/A81M/FDeabUZYe Какой параметр в стилях может за это отвечать?

Смотрите в js это где-то там. Я стараюсь не усложнять на пустом месте, там где можно без js делаю без него- типовые шаблоны думают иначе

Олег Колчугин 12.11.2016
Огромное спасибо за проделанную работу. Выручил.

derherbst 27.12.2016
Михаил, здравствуйте! Спасибо за шаблон. Только у меня есть вопрос. В моем проекте пункты меню сопровождаются еще и картинками. То есть в выпадающем меню есть еще три пункта которые располагаются горизонтально под основным меню и над каждым названием пункта подменю есть картинка размером 250 на 100. Как это можно осуществить? Картинки размещены не через css, а через тег <img> в html. Есть ли возможность прописать эти кратинки в самом шаблоне template.php? Заранее спасибо!

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

Цитата

derherbst написал:
Михаил, здравствуйте!

Спасибо за шаблон. Только у меня есть вопрос. В моем проекте пункты меню сопровождаются еще и картинками. То есть в выпадающем меню есть еще три пункта которые располагаются горизонтально под основным меню и над каждым названием пункта подменю есть картинка размером 250 на 100. Как это можно осуществить? Картинки размещены не через css, а через тег <img> в html. Есть ли возможность прописать эти кратинки в самом шаблоне template.php?

Заранее спасибо!

Технически да, вам нужно найти DEPTH_LEVEL правильный (тот где должны быть картинки) и просто их туда вставить в template.php

Мой youtube канал.

На нем, уже много видеоуроков по 1С-Битрикс. Как одиночные видео так и серии видеоуроков Перейти на канал

Совсем скоро выйдет видеокурс по разработке доски объявлений с мобильным приложением. Подписывайтесь и будьте в курсе:

Поделиться заметкой: Спасибо, это помогает развивать сайт:

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

Авторизация