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

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

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

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

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

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


Добрый день, хочу выразить благодарность за отличные уроки.
Не подскажите как правильно сделать, чтоб выпадающие пункты меню, отображались как линию ( как второе горизонтальное меню), и чтоб оно не исчезало, если убрать курсор, тоесть чтоб все подпункты были видны, до тех пор пока не открыть другой родительский пункт меню?
Заранее спасибо.
Михаил
Цитата
Гость сайта пишет:
Добрый день, хочу выразить благодарность за отличные уроки.
Не подскажите как правильно сделать, чтоб выпадающие пункты меню, отображались как линию ( как второе горизонтальное меню), и чтоб оно не исчезало, если убрать курсор, тоесть чтоб все подпункты были видны, до тех пор пока не открыть другой родительский пункт меню?
Заранее спасибо.
Думаю с помощью js- по идее можно сначала сделать такое меню (как вариант, найти готовое) на HTML/CSS а потом просто интегрировать в битрикс.
Подскажите а каким образом мне пременить  для меню?
Михаил
Цитата
berdnik пишет:
Подскажите а каким образом мне пременить для меню?
Распаковать архив, кинуть в папку с Вашим шаблоном битрикс, из публичной части зайти в настройки компонента меню и выбрать этот шаблон (совпадет с названием папки)
Ну вот хот один адекватный пользователь Битрикса появился, вот сам бы хрен додумался что выбирать шаблон меню надо именно из публичной части, всю админку перерыл!!

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

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

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

Добрый день, Михаил!
Спасибо за уроки!
Возникла проблема, после подключения меню в битрикс на главной странице все отображается замечательно, но при переходе на любую другую страницу не работает скрипт меню, отображаются только пункты меню верхнего уровня, из-за чего такое может быть?


ВИДИМО ТА ЖЕ ПРОБЛЕМА- пройдите сюда http://camouf.ru/blog-note/bx_site_created/5.html
Здравствуйте. Подскажите пожалуйста как добавить картинки для подкатегорий в выпадающего горизонтального меню, которую вы выложили в данной статье. При наведении курсора на подкотегорию  показывалась  картинка. как на сайте http://www.porsche.com/russia/
Михаил
Цитата
Евгений пишет:
Здравствуйте. Подскажите пожалуйста как добавить картинки для подкатегорий в выпадающего горизонтального меню, которую вы выложили в данной статье. При наведении курсора на подкотегорию показывалась картинка. как на сайте http://www.porsche.com/russia/
Подсмотрите в типовом магазине, что идет в комплекте с битрикс- там это реализовано
Здравствуйте, Михаил.

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

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

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

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

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

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

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

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

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

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

 
Миша, спасибо большое!
Хорошие Уроки! Лучшего пока не встретил!
Но все таки можно ли создать урок как создать в этом меню, выпадающие подменю?
Если данный урок есть, подскажите его расположение!
Спасибо! ))  
Добре!!
Вот сегодня попалось!!
Кажется это твое!!!
http://www.miditator.ru/blog/1c-bitrix/vypadayushchee-menyu-dlya-bitriks/
Михаил
Цитата
Алексей пишет:
http://www.miditator.ru/blog/1c-bitrix/vypadayushchee-menyu-dlya-bitriks/
Это сайт моего партнера, над многими проектами работаем вместе) Ну да многое забрано у меня.
Михаил здравствуйте. Можно еще немного подробнее объяснить как применить данный шаблон для меню, а то как то совсем не получается ((( :cry:
Заранее спасибо за ваш труд.
Цитата
Илья пишет:
Михаил здравствуйте. Можно еще немного подробнее объяснить как применить данный шаблон для меню, а то как то совсем не получается (((
Заранее спасибо за ваш труд.
Стоило подолбаться еще и все получилось) :)
Добрый вечер!
Спасибо за Ваши уроки!
Актуальная статья про выпадающее меню.
Но интересно было бы прикрутить его к каталогу! При чём к активному каталогу, который постоянно обновляется разделами из 1с! А то у меня сейчас перед списком товаров большое пространство съедает каталожное дерево. Не хорошо(
Вот для примера https://lineofdance.ru/magazin/katalog/obuv/
В инете много кода с выпадающим меню. Но прикрутить его к каталожному дереву я не смог. Мозгов не хватает.
Скажите, на сколько сложно Ваш код адаптировать к каталогу, что бы сделать его с выпадающими разделами и тем самым спрятать второй уровень?
Полностью убирать не хочу. Нужна наглядность при наведении.
Спасибо!
К стати мой сайт сделан самостоятельно благодаря Вашим урокам!
Михаил
Цитата
Максим пишет:
https://lineofdance.ru/magazin/katalog/obuv/
Сделать совсем не сложно, через ext меню, а так тот же самый шаблон
Добрый день!
Пытался добавить пункт в верхнем меню, удалил его, и все меню пропало. Но когда нажимаешь на раздел "О школе" все меню появляются слева, но как будто в старом виде (месячной давности).
Можно как-то переместить это левое меню в верхнее? Просто там куча подменю и т.д. уже не вспомнишь как оно должно быть...
Или есть некий откат, скажем на 1 день назад?

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

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

А так: разбирайтесь с файлами меню в структуре, или удалите все и создайте по новой (не разделы а именно файлы меню)
Во первых сверх спасибо за все уроки
а вопрос одни отцентровка этого меню оно прилипает к левому можно отступом но тогда на разных разрешениях по разному за ранее спасибо  
Добрый день. Благодарю за урок. А трехуровое меню такое как сделать, чтобы сбоку например если у раздела есть подразделы они тоже отображались?
Михаил
Цитата
Максим Иванов написал:
Добрый день. Благодарю за урок. А трехуровое меню такое как сделать, чтобы сбоку например если у раздела есть подразделы они тоже отображались?
А должны бы сами, там в стилях на 4 уровня прописано- если не ошибаюсь
Михаил, подскажите пожалуйста каким параметром и где регулируется высота выпадающего меню?
Т.е. в частности в типовом решении меню выпадает до определенного предела вниз, потом позиции, которые не влезли формируются вторым рядом. Вот предел высоты где регулируется? Спасибо.
Михаил
Цитата
Сергей Кононов написал:
Михаил, подскажите пожалуйста каким параметром и где регулируется высота выпадающего меню?
Т.е. в частности в типовом решении меню выпадает до определенного предела вниз, потом позиции, которые не влезли формируются вторым рядом. Вот предел высоты где регулируется? Спасибо.
По идее предела там нет, должно выпадать в бесконечность. Во всяком случае, проверил на одном из сайтов где это меню стоит (у меня на сайте уже давно не оно). Смотрите где-то в стилях своего сайта- может быть какой-то конфликт с другими стилями, с похожими названиями селекторов
В типовом магазине от битрикса реализовано так:
https://cloud.mail.ru/public/A81M/FDeabUZYe
Какой параметр в стилях может за это отвечать?
Михаил
Цитата
Сергей Кононов написал:
В типовом магазине от битрикса реализовано так:
https://cloud.mail.ru/public/A81M/FDeabUZYe
Какой параметр в стилях может за это отвечать?
Смотрите в js это где-то там. Я стараюсь не усложнять на пустом месте, там где можно без js делаю без него- типовые шаблоны думают иначе  :D
Олег
Огромное спасибо за проделанную работу. Выручил.  :)
Михаил, здравствуйте!

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

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

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

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

Кроме создания сайтов, я так же веду блог с заметками о вебразработке, записываю бесплатные видеоуроки и содержу форум, на котором можно задавать вопросы и просто общаться. Заметки, преимущественно - это короткие или подробные рецепты, по реализации часто требуемого функционала- в рамках разработки сайтов на 1С-Битрикс

Показать еще