мобильное меню drupal 7
Jesús Heredia’s personal website
In this article, I’m going to show you how to create a sticky (fixed to top), fluid, and responsive navigation menu with Bootstrap in Drupal 7.
The Goal
One of your clients is a chef who owns a website powered by Drupal 7. Since it is very old-fashioned, he asks you for a new and modern design so that his site is suitable for all types of devices. In this article, I’m going to cover just how to create the navigation menu for small and extra-small screens.
Watch the end result
Please, click here to open a modal window with a video showing the end result of this article.
Requirements
In order to achieve the goal, I’m going to use the following modules/themes in addition to the ones that are part of the core:
In addition, since the Bootstrap theme uses HTML5, you must replace the default doctype declaration (XHTML + RDFa is the default doctype declaration used by Drupal 7).
Learn how to install Bootstrap and how to create an HTML5 DTD here.
Getting Started with the Logo
Once you are done with all the previous requirements, this is how the navigation menu looks for extra-small and small screens:
And this how it looks for medium and large screens:
While the Home link is part of Drupal’s Main Menu, My account and Log out fall down under the User Menu. You will add new links to these menus later in this article.
Both Main Menu ($main_menu) and User Menu ($secondary_menu) are examples of hard-coded variables. They are printed in page.tpl.php.
With that said, let’s start by replacing the logo:
1. Go to admin / appearance / settings / masterchef (replace “masterchef” with the machine-readable name of your Bootstrap subtheme) and then click the Logo image settings link in the Override Global Settings section.
2. Because you do not want to use the default logo, uncheck the Use the default logo checkbox and then use the form to upload your logo to the server.
I’m going to upload a png image that’s 32 pixels height by 32 pixels width.
This is how the new logo looks:
Adding new links
Now that the Logo is in place, let’s add several links to the navigation menu.
1. Go to admin / structure / menu / manage / main-menu and then click the Add link link to add a new link to the Main Menu.
2. Fill out the form taking into account that the Main Menu value must be selected in the Parent Link drop-down menu. I have created five new links: Books, Blog, About, Contact, and Log in.
Since no content has been created yet, I have used dummy paths with the links to the Main Menu (with the exception of the Log in link). This link (user / login) will be automatically hidden from the Main Menu after the user logs into the system.
Click on the previous figure to open a modal window with an image of the whole form.
3. Go to admin / structure / menu / manage / user-menu and then click the Add link link to add a new link to the User Menu. Fill out the form like this and click the Save button:
Click on the previous figure to open a modal window with an image of the whole form.
4. Go to admin / structure / menu / manage / user-menu and then rearrange the links like this (don’t forget to click the Save configuration button):
5. Open the Home page in your favourite browser and check out the navigation menu. If everything is OK, it should look like this:
The Log in link is shown because the user hasn’t logged into the system yet.
If the user logs into the system, the navigation menu shows the links to the User Menu and hides the Log in link:
Making the navigation menu fluid and sticky
Now let’s make the navigation menu fluid and sticky, meaning that it will take up the whole width of the browser window (also known as viewport) and be placed fixed at the top of the page.
1. Go to admin / appearance / settings / (machine name of your theme) and then click the NAVBAR link in the Bootstrap Settings section.
2. Select Fixed Top from the Navbar Position drop-down menu and then click the Save configuration button.
Making the mobile navigation menu look good
Now that the navigation menu is finished, let’s make it look good by creating some custom CSS styles.
Let’s start with the CSS selectors for extra-small and small screens.
Edit the style.css file to add your custom CSS styles. This file is located in the CSS folder of your Bootstrap subtheme.
1. The logo’s padding-right property has a default value of 15 px. Replace 15px with 5px:
2. The site name’s color property has a default value of #777. Replace #777 with #000000 (black):
3. The header tag’s background-color property has a default value of #f8f8f8. Replace #f8f8f8 with #ffffff (white):
4. The three-line button’s background-color property has a default value of transparent. Replace transparent with #8dc63f.
5. The three-line button’s border-color property has a default value of #ddd. Replace #ddd with #8dc63f.
6. The three lines’ background-color property has a default value of #ccc. Replace #ccc with #ffffff (white):
7. When the three-line button is tapped, its background-color property has a default value of #ddd. Replace #ddd with #759549:
If everything is OK, this is how the three-line button should look when the navigation menu for extra-small and small screens is closed:
And this is how it should look when the navigation menu is open:
8. Add the background-color property to the div tag that contains the navigation menu and set its value to #f8f8f8:
If everything is OK, this is how the navigation menu should look:
Although the mobile navigation menu looks pretty good, there is still one more step to finish it. Please, look carefully at the following image:
9. As you can see in the previous figure, there is an issue with the administrative navigation bar: when an administrator user logs into the system, it is shown over the mobile navigation bar. Since the height of the administrative bar varies depending on the viewport (the width of the browser window), you cannot calculate the value to be set to the header tag’s top property, which contains the mobile navigation bar. How can you solve this issue? Well, what about if you put the administrative bar below the mobile navigation bar, like this:
Viewport (414 px)
Don’t worry about the mobile navigation menu, as it is shown over the administrative bar when you tap the three-line button.
Установка Responsive Menus на Друпал 7
Сегодня потратил уйму времени, чтобы сделать простое отзывчивое мобильное меню для вот этого самого блога!
Никогда бы не подумал, что нужную информацию буду искать на буржуазных сайтах! Может я и не понимаю о чём они там так быстро и красиво говорят, но всё достаточно понятно отображается на их мониторе. Речь идёт о видеоролике на ютуб. Вот, большое им Русское спасибо в таких случаях, так как много раз обращался в нашем сообществе и всегда слышал только звон «железных яиц»- все чайники и что то в этом роде! Ни в коем случае не хочу обвернуть под это всё сообщество, но многие меня поймут, кому приходилось искать маленькую помощь в казалось бы простом вот в таком начинании.
Ничего не может быть проще. Скачиваем модуль, устанавливаем его знакомым и удобным вам способом. Включаем!
Заходим в настройки меню с панели «Конфигурация» Выбираем «Main menu» Это тот стиль который идёт с модулем по умолчанию, для остальных нужно скачать дополнения. Так далеко я ещё не смотрю.
В поле CSS selectors for which menu to responsive прописываем ид блока меню, посмотреть можно как всегда «поюзав» через браузер.
Щёлкаем сохранить, проверяем что всё работает и далее «играемся» с настройками и стилями, что пока не могу сделать я, так как очень слабо знаю верстку. По моему мнению меню идеально подходит для небольшого блога или сайта визитки
Чайником быть не стрёмно, это просто очень трудно, а вот работать с чайниками гораздо тяжелее, и особенно если всё это обучение они проходят за ваш деревянный рубль.
Меню установлено, я получаю удовольствие, что это просто и работает, но разочарован тем, понимая, сколько же опасных специалистов работали на моих других сайта, больше нет удивления что появлялись и были серьезные проблемы, сайт просто висел и прочее. Напомню, создание этого блога как раз и подтолкнуло полное разочарование в вольных фрилансерах. И заметочку написал для себя первым делом, не собираясь никого учить и советовать, чтобы потом вдруг если пригодиться, не буду хоть рыскать по интернету.
Работаем с меню в drupal 7
В статье пойдет речь от системе меню в Drupal, некоторых полезных модулях и примерах программирования. Хоть речь пойдет о Drupal 7, и примеры подготовлены именно для этой версии, но многое будет актуально и для «шестерки».
Модуль меню — часть drupal. Подсистема меню хорошо интегрирована и продумана. Drupal содержит целую библиотеку функций для работы с деревом меню, целое API. Мы его немного затронем в примерах.
Как устроено меню в Drupal
Мы можем создавать объекты меню в виде дерева ссылок. Максимальная глубина дерева — 9.
Если мы откроем страницу администрирования (/admin/structure/menu), то в списке меню уже будут несколько созданных объектов.
Хлебные крошки, breadcrumbs в Drupal
Рассказывая о меню в друпал, нельзя обойти стороной такой элемент системы как хлебные крошки. Этот элемент обычно подключается в шаблон в виде следующей переменной:
Он представляет собой последовательность ссылок в текущей иерархии созданных меню. Т.е. если текущая страница сайта объявлена элементом какого то меню — то вы получите набор ссылок от корня дерева до элемента, ссылающегося на данную страницу. Корнем дерева меню является главная страница.
Админ меню в Drupal
В 7 версии в ядро добавлен модуль админ меню, для иерархии которого используется дерево меню managment. Его функционал похож на Administration menu, который я использую для проектов на Drupal 6. Этот сторонний модуль мне кажется более удобным и функциональным, но под 7кой я предпочитаю ему встроенный модуль, т.к. не люблю перегружать проекты 3d part модулями.
Пользователь с соответствующими правами получает меню администратора в виде черной горизонтальной полоски в верху экрана.
Полезные 3d part модули, связанные с системой меню
Nice menu
Модуль позволяет создавать блоки с выпадающими меню, привычными для нас в графическом интерфейсе операционной системы. Т.е. при наведении на элемент меню, содержащий подпункты, будет отображен слой с элементами следующего уровня меню и т.д.
Для любителей создавать меню по словарям (таксономии) также есть специальные модули — Taxonomy Menu, Nice Taxonomy Menus.
Pathauto
Модуль ядра path, тесно связан с меню, позволяя задавать синонимы страниц, так чтобы в результате публикацию с адресом node/100 можно было посмотреть по адресу, к примеру, poleznaya-informachiya-o-kompanii. Модуль path позволяет задать путь вручную, а автоматизировать создание синонима позволит модуль pathauto. Он может работать в связке с модулем транслитерации (Transliteration), тогда вы будете получать ЧПУ ноды на лету (при сохранении публикации), как в примере.
Если вам не нужна адова мощь pathauto (а у него куча настроек и возможностей), то можете почитать как обойтись парой собственных функций для генерации синонима пути ноды в Drupal.
Hook Menu — добавление элементов в навигацию Drupal
Зацепка к меню позволяет задать модулю собственные элементы в навигации сайта и их обработчики. Вот небольшой пример из модуля mymodule.
Drupal Русскоязычное сообщество
Стоит задача сделать выдвигающиеся меню. Большое меню с множеством ссылок. По умолчанию выводится несколько ссылок 10-15 и триггер «Все услуги» при нажатии выдвигается панель со всеми ссылками меню (оставшемся ссылками меню). Триггер перемещается вниз и меняется на «Закрыть» по клику выпадающая панель закрывается, остаются только первые пункты.
Пробовал menu-minipanels, но там эффект не тот- выводит все ссылки меню по ховер или клику во всплывайке. Попробовал DHTML меню. Тут эффект ближе всего получается, но поведение триггера не смог реализовать. Просто вывел пункт меню «Все услуги» как родителя всех остальных ссылок. По клику открывает пункты меню, но «Все услуги» остаются в составе списка ссылок и вниз переместить не знаю как.
Пример того, что хочется получить https://www.bspb.ru Здесь вот меню услуг такое какое нужно.
Собственно вопрос. Есть ли готовый модуль? Или нужно самописным творчеством заниматься?
Лучший ответ
Только клик не по менюшке должен быть, а по ссылке. Если брать сайт-пример.
Комментарии
Задачи 2:
1) определить контент который будет в этом «меню». Через views скорей всего.
2) сделать анимацию выезда. Скорей всего через https://jqueryui.com/accordion/
в этом то и вопрос. В аккордеоне тригер остается сверху, а не опускается в низ, т.е. панель открывается под триггер, а не сверху. А мне нужно что бы триггер был внизу, опускался в низ, а само меню открывалось наверх. Сложно объяснить на ссылке примера там видно.
Спасибо за хелп.
Или нужно самописным творчеством заниматься?
Автор, вам надо, то что «Частным клиентам» или что, что «Все услуги»?
jquery accordion для любого подходит.
Автор, вам надо, то что «Частным клиентам» или что, что «Все услуги»?
Показать-скрыть ul по клику
Только клик не по менюшке должен быть, а по ссылке. Если брать сайт-пример.
да этот код работает! Спасибо
Мед да еще и ложкой.. Не могу сообразить, как по повторному клику убрать теперь этот класс ‘focus’
Почитайте основы jQuery
или еще проще:
.toggleClass()
Огромное спасибо! Решил свою задачу. Все как обычно просто ) Когда знаешь. Учим мат.часть.
https://jsfiddle.net/PlayboyZP/wrvh72c0/ Код открыть/раскрыть такой.
В тему оформления js файл можете подключить?
Еще нужно подключить виджет аккоордеон и желательно убрать лишний CSS от jQuery
template.php:
Ваше решение имеет место быть и да же воспользуюсь наверное для кнопки закрыть.
Но как я говорю, что триггер в аккордеоне остается вверху, так и у меня и реализовано через DHTML menu Кнопка «Все услуги» остается вверху, а панель выпадает вниз под кнопку. А нужно, что бы триггер Закрыть появлялся внизу, как у Вас, панельки с меню, а сверху было пусто. http://prntscr.com/iaqgou
В Вашем примере http://prntscr.com/iaqhzs верхняя кнопка остается с ней нужно, что-то делать ))
Поэтому более верное решение предлагает Adano навешивать скрыть показать на кнопку Все услуги.
Спасибо за помощь. Кнопка закрыть мне понадобится ))
Кнопка закрыть к аккордеону привзяана. Adano вам по другому советует.
Чтобы «сверху было пусто»
когда аккордион открывается, у него соотв. CSS класс появляется
и display: none на заголовок
Да Ваше решение вполне рабочее. Но у меня уже было заведено меню выпадающее на dhtml menu переделывать под вывод аккордеоном было бы более по времени затратно.
Drupal Русскоязычное сообщество
Здравствуйте! Использую nice menu + responsive bartik + дополнительные файлы CSS для меню.
Пункт меню сужается в мобильной версии, 
чего не наблюдалось до добавления своего CSS файла.
(так выглядит при выключении дополнительного файла css) 
Что могло в CSS к этому привести?
Пробую менять % на размер в em, уменьшаю всякие paddings, но все равно.
На что еще смотреть?
Я предполагаю, что это где-то в этой части
#block-nice-menus-2 ul <
margin-bottom : 5px ;
width : 100% ;
>
#block-nice-menus-2 ul a <
padding : 12px ;
color : #000 ;
font-size : 18px ;
display : inline-block ;
width : 90%
>
#block-nice-menus-2 ul li <
margin-right : 7px ;
text-align : center ;
width : 19% ;
border-radius : 10px ;
>
Как это исправить?
Или придется все же в шаблоне править?
В самом nice menu такой код:
Лучший ответ
Посмотрел ваш сайт. Меню плющит вот этот стиль:
Принудительно задается ширина. Можно для малых экранов (до 768px) сделать width: 100%
Комментарии
Вряд ли придётся править шаблон. Но и так помочь тяжело будет. Нужно смотреть инспектор браузера и пробовать
Спасибо. Ну хотя бы в каком направлении смотреть?
Дайте ссылку на сайт. По другому мы вам помочь не сможем.
Алгоритм прост:
1.Убираете файл, который портит верстку.
2.Делаете 2 копии этого файла, к каждой из которых примерно ровно половина css-правил.
3.Поочереди подставляете эти файлы вместо оригинала.
4.Если файл не портит верстку, то удаляете его, а второй опять делите пополам и проверяете каждую часть (назад в п.3)
5.Пока в конечном файле не останется одно правило, оно-то все и портит-)
Если даже у Вас около 1000 «подозреваемых» правил, Вам достаточно будет повторить всего 10 (квадратный корень из 1000) итераций пп.3-4 алгоритма.
Спасибо. Очень интересный способ. Буду его использовать.
ага.. вот только с квадратным корнем я переборщил, на самом деле количество итераций равно двоичному логарифму из числа правил-)
Сайт закрыт от поисковиков паролем. Логин для просмотра сайта admin, пароль 123qwe. Или сами файлы тоже нужны?
> Что могло в CSS к этому привести?
Свойства селектора в css файлах, смотреть например в браузере F12
Посмотрел ваш сайт. Меню плющит вот этот стиль:
Принудительно задается ширина. Можно для малых экранов (до 768px) сделать width: 100%
Спасибо. Да, исправление этого стиля решило проблему.
1)Первый вариант:
Я использую немного упрощенный способ, который для меня оказался проще:
все оставляю в процентах, как было, и только для #block-nice-menus-2 ul li указываю в пикселях ширину для всех устройств. Вроде пока работает и на ПК, и на мобильном, и даже пункты меню выстраиваются один под одним при сужении.
2)Более правильно, я так понимаю, прописать отдельный стиль,
но у меня этот способ не работает (вероятно, неправильно указываю)
я пишу
3)Или отдельным файлом
Т.е. создаю файл mymobile.css
в нем пишу
И в head указываю
link rel = «stylesheet» media = «screen and (max-width: 600px)» href = «small.css» / >
Только в каком файле?
В какой файл нужно внутри нужно поместить указание на название файла с css для мобильных?
На развитие drupal.ru
Ваша финансовая помощь дает нам возможность оплачивать хостинг и поддерживать стабильную работу сайта. Благодарим за поддержку!
Трекер
docker4drupal как сделать экспорт и импорт БД без drush?
Карта от Google и pagespeed.
Подтверждение домена для изготовления SSL-сертификата
Одобрение регистрации пользователя
Поиск внутри списка Нод. Д7.
Выбор CMS для интернет-магазина
Views
Защита админки по ip
Как вставить изображение с сервера в TinyMCE на 9м Друпале?
Новые материалы
Одобрение регистрации пользователя
Подтверждение домена для изготовления SSL-сертификата
Поиск внутри списка Нод. Д7.
docker4drupal как сделать экспорт и импорт БД без drush?
Работа с сайтом (внедрение новых штук, правка багов и т.п.)
Защита админки по ip
Настройка descriptions в views в зависимости от фильтра.
Как вставить изображение с сервера в TinyMCE на 9м Друпале?
Доработка сайта
Выбор CMS для интернет-магазина
Содержимое сайта публикуется на условиях CreativeCommons Attribution-ShareAlike 3.0 или более поздней версии. Программные коды в тексте статей — на условиях GNU GPL v2 или более поздней версии.