Выпадающее меню для Joomla (модуль). Joomla меню выпадающее при наведении
Выпадающее меню, при наведении на пункт выводиться
Попробовал потыкаться с tooltips-om занятная штука, дошел до того в название пункта меню если вставить тэг articles anythere то вместе с названием выходит статья, правда если так подумать то тултипс в этом случае не нужен, но штука все ровно интересная (впринципе я думаю можно ее как то применить и в моем случае, но пока не придумал как).
Если развивать по этому направлению тему, т.е. articles закидывать в название подпункта, то остается два вопроса, 1. как вывести вместе с описанием еще картинку, 2. и как сверстать и довести до ума саму выпадающию менюшку, дабы она сразу была большой и широкой, чтобы сбоку было место для вывода предпросмтра, и собственно сверстать расположение картинки текста и ссылки, т.к. сайт формируется динамически основываясь на пхп запросах, как воздействовать именно на сам предпросмотр и как ему задать свои ид, или классы, чтобы можно было ими управлять
По поводу разработчик/пользователь, можно сказать и то и другое, лукавить не буду, данная тема нужна для коммерческих целей, а именно для создание демонстрационного сайта в портфолио, не на продажу, а для рекламы. Сам сайт проектировал не я, а мой напарник который специализируется на этом, ну а моя роль выполнить и воплотить в жизнь нарисованный макет, и это мой так сказать челендж который нужно выполнить, т.к. если этого не сделать, смысла заниматься этим делом вообще нет, т.к. я считаю если человек разрабатывает сайты, он должен уметь все в этом направлении, т.к. если он чего то не может, то клиент просто пойдет к тому кто может, все просто. Если честно, уже помышляю начать изучение пхп и написание своего шаблона, т.к. чувствую некую беспомощность (в планах естественно было изучение и прокачки скиллов по разным направлениям, но параллельно с разработкой простых и средних сайтов на джумле, а тут просто тупо встал над этим макетом и хз как же эту фишку реализовать), как то так.
Сейчас еще раз все обдумал, вспомнив как на шаблоне от RocketTheme реализована была одна менюшка, там в один из подпунктов было встроенное место под модуль (имеется ввиду место, как на шаблоне вывод разных модулей и меню), и предпросмотр был реализован созданием модуля типа html-код в который легко можно вставить картинку, текст и ссылку. Позиция у модуля ставилась соответственна та которая встраивалась в подпункт меню. Получается наводим на меню выпадают пункты меню, наводим на то что со встроенным местом под модуль, и сбоку появляется модуль html-код со сверстаным вручную предпросмотром. Все клево, но есть 2 проблемы, на том шаблоне, я не знаю как но эта фишка была встроенная именно в определенный тип меню, при чем встроенная не в настройках и где то а на уровня верстки шаблона, т.е. внутри, и я не знаю как повторить создание модулей для других подпунктов, и не знаю как сверстать окно предпросмотра, т.к. она имеет фиксированные размеры, где и как на него повлиять я тоже не знаю. Может таким способом кто нить подскажет, как можно сделать, или где начинать копать, способ не самый простой (и скорее всего не самый правильный), но в плане работоспособности он пока самый рабочий из всех. Еще раз благодарю всех неравнодушных к чужим проблемам людей, спасибо
joomla-support.ru
Slide-Down – Box Menu – анимированное выпадающее меню
Когда обзаводишься новым шаблоном, периодически хочется дополнить его каким-то необычным элементом, ведь все разделы с красочной анимацией, и каждого есть своя «фишка», а вот меню – самая скучная часть. Но, используя разработку JExtensions, можно очень здорово переработать данный блок, просто используя удобный модуль. Такое необычное Joomla выпадающее меню, обладает невероятно красивой анимацией, может использовать отдельные картинки для каждого пункта, к тому же, поддерживает разработку меню в 2 уровня. Само собой, у столь продвинутого решения есть свои особенности, которые нужно уметь настраивать, а потому здесь вы сможете узнать все необходимое, поскольку обзавестись таким решениям было бы очень неплохо.
Процесс настройки
С непосредственной загрузкой и установкой, у львиной доли пользователей, на сегодня проблем уже не возникает. Не спешите публиковать модуль, пока вы полностью не разберетесь с настройками. Обязательно обратите внимание на то, стоит ли активировать (загружать) JQuery, поскольку этот пункт мог быть выполнен, во время установки другого дополнения. Второй момент – это выбор ширины модуля, ведь шаблоны сейчас используют разные параметры, так что вы сможете без проблем подогнать ширину будущего меню, какой бы размер вам не был нужен. Следующий шаг самый важный – это определение количества пунктов, которые вы будете использовать в качестве элементов первого уровня. То есть, если ваше стандартное меню имеет 5 пунктов, нужно будет внедрить их сюда, и чтобы это смотрелось идеально. Стоит отметить, что наиболее подходящий вариант, который имеет шансы красиво смотреться, должен иметь 5-7 пунктов меню первого уровня, при другом раскладе, все может быть не столь хорошо в плане внешнего вида. Хотя это решение уже исключительно ваше.
«Далее настройка уже переходит в дизайнерскую область. Переходя в менеджер меню, можно будет создавать новые пункты, прикреплять к ним изображения и прочее. Все это находится в «Link Type Options», где вы еще сможете давать имя новому пункту. После этого, просто сохраните его, и можете повторять операция снова – называем, прикрепляем картинку, и выполняем сохранение для следующего пункта. Таким образом, сделать меню Joomla будет очень просто, а его конечный вид приятно порадует абсолютно каждого. Как и говорилось выше, в каждом пункте могут появиться подпункты, но более чем 2-х уровневое меню этот модуль не поддерживает. Тем не менее, и без того это идеальный вариант для яркого сайта».
Итоговый вид меню
После полноценной настройки, вы сможете увидеть широкое, если вы задали правильный параметр ширины, меню. При наведении на пункт, вверх будет взмывать картинка, используя плавную анимацию, и открываться сам пункт и все подпункты. Кстати, если убрать курсор с него, но картинка резко уменьшится и уйдет «вглубь» самого пункта, хотя это лучше увидеть самостоятельно. Работает модуль очень живо, а потому не смотря на его особый формат, вы не будете испытывать замедлений в навигации. Это необычное меню сайта Joomla уж точно сможет заинтересовать посетителей, даже если они никогда не обращали внимания на эту часть проектов, им захочется слегка поиграть с интересным элементом. Как видите, настройка в данном случае не такая уж и сложная, а дальнейшая эксплуатация реально принесет вам удовольствие. В планах у разработчика сделать более тонкую настройку, избавиться от небольшой привязки к количеству пунктов, чтобы в любом формате это меню смотрелось идеальном, а также, будет обязательно повышено количество поддерживаемых уровней. Хотелось бы отметить еще и то, что уже сейчас данная разработка может использовать вами, если вы имеете проект на основе Joomla 2.5.
joomru.com
Выпадающее меню для Joomla (модуль) | ЯcReated's blog
После установки модуля заходим в настройки модуля и что мы видим (для увеличения жмем на картнку):
В этом модуле обширные настройки, то есть все что нужно для нормальной работе. Этот модуль подходит как для Joomla 1.0.х, так и для Joomla 1.5.х. Также у модуля есть автоопредиление версии вашей Джумлы, но почему то всеравно нужно включить совместимость Legacy. Может это только у меня, если ДА отпишитесь в коментариях. Для того что б придать внешнему виду ваше выпадающее меню, вам нужно поправить css файл который находится по адресу <joomla root>/modules/mod_sbdrollmenu/mod_sbd_rollmenu.css В этом файлике немного строчек и я в нем ну очень быстро разобрался.
Также занятной настройкой мне показалось выбор на что будет реагировать выпадающее меню на наведение на родительский пункт или нажатие. Эта настойка називается «Use Mouse Over» .
Хочу показать Вам пример того что у меня получилось:
Вот такое меню у меня получилось, а при наведении на родительский пункт выпадает под меню (смотрим следующую картинку) 
На сегодня Все. Ах да чуть не забыл ссылка на скачивание модуля sbd_accordion_menu088.
Если же вы хотите создать свое неотразимое меню, вам обязательно нужны знание php. Сегодня есть множество книг по изучению php языка, но все же видео уроки легче воспринимаются, вот нашел видеокурс php за 2 недели, конечно он платный.
Всем приятный выходных и до скорого.
Читайте также:
rcreated.com
Выпадающее меню для Joomla 2.5
Для CMS Joomla существует масса решений для создания красивых выпадающих меню, сегодня я расскажу вам об одном из них, это компонент от RocketTheme который называется RokNavMenu. Этот модуль имеет массу настроек, с помощью которых вы сможете реализовать такое меню какое нужно будет вам.
Приступим к установке модуля RokNavMenu. Первым делом нужно скачать его с сайта разработчика по этой ссылке. Далее его нужно установить через менеджер расширений.
После того как модуль будет установлен нужно будет создать меню к которому нужно добавить эффект. О том как создавать меню я писал в этой статье. Для того чтобы получился эффект выпадения нужно к заглавному пункту меню добавить дочерние пункты, то есть должна получится примерно такая иерархия ссылок.
Далее нужно создать модуль для нашего меню, для этого пройдите в «Расширения – Менеджер модулей», затем нажмите на кнопку создать, и из всего списка выберите модуль RokNavMenu
Рассмотрим какие настройки предлагает нам данный модуль.
Поднобно
Заголовок. В поле заголовок нужно указать заголовок который будет показываться на сайте, но в большинстве случаев его нужно скрыть, для этого нужно установить чекбокс в соответствующее положение.
Позиция. Здесь нужно выбрать позицию модуля в которой он будет показываться на сайте. В данном уроке я использую стандартную тему Beez 20 и выбрал позицию position-1, так как она подходит для горизонтального меню.
Основные параметры
Теперь рассмотрим некоторые настройки из правой части экрана.
Select Menu. Здесь нам необходимо выбрать меню к которому мы хотим привязать данный модуль.
Show Sub-menu Items. Установите чекбокс в положение «да», собственно этот пункт и активирует выпадающее меню.
Themes. Нужно выбрать пункт Default Fusion, при этом у нас появится еще много дополнительных настроек.
Enable JavaScript. Нужно установить чекбокс в положение «yes».
Вот так выглядят основные настройки у меня.
Все основные параметры мы рассмотрели, дальше вы можете сами настроить модуль под свои нужды.
Горизонтальное выпадающее меню в CSS
Когда-то устанавливал на локальный хостинг CMS Joomla. Я в ней проработал недолго по разным обстоятельствам. Забросил. Прошло некоторое время, как я начал создавать свой очередной интернет проект. Меню я хотел сделать там всплывающим – само меню располагается горизонтально, а все подпункты каждого из пунктов меню должны высвечиваться при наведении курсора мыши (для наглядности пример здесь). Я решил разобраться в этом, «разложив» компоненты html «джумлы». Нашёл в CSS идентификаторы всплывающего меню, скопировал их, перенёс в новый документ и начал экспериментировать.Прежде всего необходимо сделать «скелет» меню в html-документе
<ul>
<li><a href="link_1.htm">Пункт 1</a></li><li><a href="link_2.htm">Пункт 2</a><li><a href="link_2_1.htm">Пункт 2.1</a></li><li><a href="link_2_2.htm">Пункт 2.2</a></li><li><a href="link_2_3.htm">Пункт 2.3</a></li></li>
<li><a href="link_3.htm>Пункт 3</a><ul>
<li><a href="link_3_1.htm">Пункт 3.1</a></li><li><a href="link_3_2.htm">Пункт 3.2</a></li><li><a href="link_3_3.htm">Пункт 3.3</a></li><li><a href="link_3_4.htm">пункт 3.4</a></li></ul>
</li>
<li><a href="link_4.htm>Пункт 4</a><ul>
<li><a href="link_4_1.htm">Пункт 4.1</a></li><li><a href="link_4_2.htm">Пункт 4.2</a></li></ul>
</li>
</ul>
Далее в CSS-файле необходимо будет записать следующее
Данная запись задаёт параметры отображения информации внутри контейнеров, принадлежащих тегу основного списка с идентификатором «menu». В данном примере заданы отступы самого меню от краёв страницы, и задаются параметры текстового содержимого всего меню. После переходим к параметрам ячеек основных пунктов меню.
#menu li
border-left: 1px solid #8F8E8E;border-right: 1px solid #8F8E8E;border-top: 1px solid #8F8E8E;}
Данная запись задаёт размеры ячеек основных пунктов меню, их расположение относительно друг друга, положение содержимого ячеек и границы самих ячеек.
}
Задание этой записи необходимо для того, чтобы пункты меню второго уровня не отображались до тех пор, пока не будет наведён курсор мыши на соответствующий пункт меню первого уровня. Здесь указывается ширина ячеек, позиции в расположении. Параметры left и top задают отступ блоков меню второго уровня слева и сверху соответственно.
}
Данная запись отвечает за пункты меню второго уровня. В данном случае заданы размеры ячеек, параметр float:none указывает на то, что пункты меню из выпадающего списка будут расположены один под другим, а background задаёт цвет фона пунктов меню второго уровня. Далее переходим к декору ссылок.
}
Данные примеры указывают параметры текстовых ссылок – первый случай указывает на отображение ссылок, второй на то, как измениться ссылка, если навести на неё курсор мыши.
#menu li:hover ul, #menu li.dont_look ul}
Данная запись предназначается для того, чтобы отображать выпадающий список меню при наведении курсора мыши на пункты меню первого уровня.
#menu li:hover, #menu li.dont_look border-left : 1px solid #00FF3C;border-right : 1px solid #00FF3C;
Результатом данной записи является то, что когда наводится курсор мыши на пункт меню первого уровня (например на Пункт 2), то он подсвечивается указанным цветом в параметре background, а границы пунктов меню второго уровня (например Пункт 2.1), при наведении на них курсора мыши подсвечиваются, благодаря параметрам border. В моём случае я сделал, чтобы подсвечивались левая и правая границы ячеек, на которые наводится курсор мыши. Подобная запись border-left : 1px solid #00FF3C; говорит о том, что левая граница ячейки будет иметь размер в 1 пиксель, будет представлена сплошной тонкой линией (solid) с указанным цветом.
В целом, можно менять различные параметры стилей в зависимости от того, какой результат хотите получить. Однако, сам «скелет» и в html-документе и в файле css, должен соответствовать вышеприведённому.
gw-design-dum4uk.blogspot.com
