wordpress бургер меню плагин
Code a Burger Menu for Mobile Users in WordPress
If you want your site to be responsive (and who doesn’t?), then it’s important to make sure that your main navigation menu works well on small screens.
Large navigation menus can take up too much space on a mobile phone, or if they don’t, they can be too small to read or to reliably tap the correct link.
A burger menu is one way to get around this. It’s a menu that’s hidden until the user taps on it. The reason it’s called a burger menu is because the symbol that represents it is three horizontal lines one above the other, which looks a bit like a hamburger.
There are plugins that will turn your main navigation menu into a burger menu in WordPress (including those on Code Canyon), but what if you want to code one into your own theme?
In this tutorial, you’ll learn how.
What You’ll Need
To follow along with this tutorial, you’ll need:
The Starting Menu
The code we’ll write will apply to the menu generated by WordPress using the navigation menu system. You don’t need to code a new or different menu for mobile. (It’s one of my pet peeves when sites have different navigation on desktop and mobile as it’s normally to the detriment of user experience on mobile.)
I’m going to demonstrate this technique with reference to the menu in my own site and add the code to the header.php file as well as the stylesheet and a new JavaScript file.
Here’s the menu on desktop:
It’s a horizontal menu beneath the banner image and header and above the content.
On mobile, the banner image isn’t visible. I want to remove the menu and replace it with a burger symbol. When the user clicks on that symbol, the menu will appear.
Here’s the code for the menu:
So let’s get started.
Adding the Burger Symbol
The first step is to code the burger symbol into the header.php file and style it so it’s only visible on mobile.
In your header.php file, add this code inside the header element (not inside the navigation):
In my case, it means the code for the header and navigation are like this (note that I’ve omitted the banner in the code below, although it is in my file):
So the burger symbol (which is shown using the ☰ HTML code) is in the header, and the navigation menu is below it.
Now to add some styling for the toggle-nav element.
Styling the Burger Symbol
First up, we need to hide the burger symbol on desktop.
In your stylesheet, add this to hide the burger symbol:
But you do need to ensure it displays on mobile. So add a media query, using whatever maximum width you’re using for your media query generally. Here’s mine:
Now let’s add some additional styling for it. Edit the media query so it looks like this:
This adds color and sizing to the icon and also overrides any styling for links, whatever state they’re in.
Here’s what the burger icon looks like on mobile now:
That’s the burger icon styled. Now for the navigation menu.
Styling the Navigation Menu
The navigation menu itself needs to be styled on mobile. Inside your media query, add this CSS:
Here are some key aspects of what that code does:
Note that the tweaks you’ll need to do to your menu may be different, and will depend on how it’s styled on desktop. The important bits are hiding the menu and the positioning.
Adding JavaScript
To get it all to work, we need to add some JavaScript. This will make the menu slide down when the user taps on the burger icon.
Add a new file called burger-menu.js to your theme (I like to put mine inside a scripts folder).
Add this script to it:
But it won’t work unless you enqueue the script. Open your theme’s functions.php file and add this:
This will enqueue your script, which will make it work. Save and close your functions file.
Now if you visit your site on mobile (or in a desktop browser with responsive mode enabled) and click on that burger, the menu will slide down.
It’s sitting on top of the content, and not pushing it down, and it appears with a nice JavaScript-powered sliding action. Just what we wanted.
A Burger Menu Will Enhance UX for Mobile Visitors
A bulky, desktop-first navigation menu will take up too much space on a small screen and keep people from reading the content they came to your site for.
But you don’t want to prevent mobile visitors from accessing the same navigation as desktop visitors have.
By adding a burger menu like this, you can get the best of both worlds: a clean mobile layout with access to the same navigation as on desktop.
Other Posts About WordPress Menus
To learn more about WordPress menus, check out some of our other posts:
Как сделать бургер-меню для мобильных пользователей сайта на WordPress
Дата публикации: 2019-05-21
От автора: перед тем как сделать бургер-меню для сайта, нужно понять, зачем оно вообще нужно. Если вы хотите, чтобы ваш сайт был адаптивным (а кто не хочет?), важно обеспечить, чтобы главное меню навигации работало на маленьких экранах.
Большие меню навигации могут занимать слишком много места на мобильном телефоне, или они могут быть слишком маленькими, чтобы их можно было прочитать или нажать на нужную ссылку.
Бургер-меню — один из способов решить эту проблему. Это меню скрыто, пока пользователь не нажмет на него. Причина, по которой оно называется бургер-меню, состоит в том, что символ, который обозначает его, представляет собой три горизонтальные линии, расположенные одна над другой, что немного напоминает гамбургер.
Существуют плагины, которые превращают ваше главное меню навигации в бургер-меню в WordPress (в том числе доступные на Code Canyon), но что, если вы захотите закодировать его в своей теме? В этом руководстве вы узнаете, как это сделать.
Чтобы следовать этому руководству, вам понадобится:
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
тема, которую вы можете редактировать (если вы используете стороннюю тему, вам нужно создать дочернюю тему)
Стартовое меню
Код, который мы напишем, будет применяться к меню, сгенерированному WordPress с использованием системы меню навигации. Вам не нужно кодировать новое меню для мобильных устройств. (Это одна из часто встречаемых мною проблем, когда сайты имеют разную навигацию на настольном и мобильном устройствах, поскольку это обычно делается в ущерб пользовательскому опыту на мобильном телефоне.)
Я собираюсь продемонстрировать эту технику на примере меню на моем собственном сайте и добавить код в файл header.php, а также в таблицу стилей и новый файл JavaScript. Вот меню для настольных устройств:
Это горизонтальное меню под изображением баннера и заголовком, и над основным контентом. На мобильном телефоне изображение баннера не видно. Я хочу удалить меню и заменить его символом бургера. Когда пользователь нажимает на этот символ, отображается меню. Вот код меню:
WordPress.org
Русский
WP Hamburger
Описание
License: GPL 3. See License below for copyright jots and titles.
Customization possibility including font-size, font-weight, color, bullets, background, opacity, font-family and menu selection. WP Hamburger is WordPress plugin to redesign the menus with different color combination, font family, bullets and custom CSS. Colors and bullets for First Level / Second Level menu items can be customized separately.
Highly Customizable
License
This WordPress Plugin is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or any later version. This free software is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this software. If not, see http://www.gnu.org/licenses/gpl-2.0.html.
Скриншоты
Установка
From the WordPress plugin menu click on Add New and search for WP Hamburger
Instead of searching for a plugin you can directly upload the plugin zip file by clicking on Upload:
Use the browse button to select the plugin zip file that was downloaded, then click on Install Now. The plugin will be uploaded to your blog and installed. It can then be activated.
«WP Hamburger» is available in left sidebar settings menu.
Часто задаваемые вопросы
How does it work?
Go to settings page, select a menu and save changes.
Is it free or a paid plugin?
Basic functionality is free. Customization options are available in premium version.
Do I need to purchase to make it work?
No, you do not need to purchase as it is fully functional as a free version. Just customization from settings page is not available in free version but still you can customize with you HTML/CSS skills.
Where to report if I found a bug?
It is always better to open a ticket on support forum. There is a help tab on settings page for your convenience.
What if any other plugin or theme using a different version of Bootstrap or FontAwesome?
You can turn Bootstrap and FontAwesome OFF from settings page.
How can I contribute to this plugin?
You may suggest improvements, features and user friendliness. Your name will be mentioned in changelog with the respective plugin version in next release.
Is it compatible with Avada, Enfold and standard WordPress twenty series themes?
Yes, it is compatible with all kind of themes. If you face any compatibility issue, let us know and we will try to make it work in next version.
Where the menu will be found?
You will find WP Hamburger menu item under settings menu.
How to change font family for the menu items?
Use Font family name for example Arial or leave it blank for default.
How to choose bullets for menu items?
Insert HTML/CSS bullets disc, circle, outsite inside etc., or choose icons from FontAwesome. Alternatively, custom image can be used from media library as well. Recommended dimensions are 32px X 32px.
Отзывы
Нет отзывов об этом плагине.
Участники и разработчики
«WP Hamburger» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:
WordPress.org
Русский
Метка плагина: restaurant menu
Restaurant Menu — Food Ordering System — Table Reservation
Create a restaurant menu and start taking food orders online, with no commissions or costs.…
Five Star Restaurant Menu — WordPress Food Ordering Plugin
Restaurant menu and ordering made simple. Create a drink and food menu, and accept orders…
Restaurant Menu by MotoPress
Create and maintain modern online menus for almost any kind of restaurant. Sell food and…
WPCafe — Food Menu, Pickup + Delivery and Restaurant Reservation for WooCommerce
A complete WooCommerce Food Order, Pickup and Delivery Plugin to Launch a Restaurant Websites.
RestroPress — Online Food Ordering System
RestroPress is a Food Ordering System for WordPress which will help the restaurant owners to…
Food Store — Онлайн Доставка еды & Самовывоз
Food Store — это полноценная онлайн-платформа заказа продуктов питания со всеми вашими любимыми функциями WooCommerce.
WPPizza — A Restaurant Plugin
A Restaurant Plugin (not only for Pizza). Maintain your Menu (sizes, prices, categories). Accept COD…
Food Menu — Restaurant Menu & Online Ordering for WooCommerce
A Simple Food & Restaurant Menu Display Plugin for Restaurant, Cafes, Fast Food, Coffee House…
Best Restaurant Menu by PriceListo
The fastest and easiest way to create a professional-looking menu or price list for your…
WP Food ordering and Restaurant Menu
WP Food is the simplest way for your business to display food items and for…
AForms Eats
An order form builder for restaurants. You can create comfortable order forms and sell your…
Restaurant Menu Manager
Create restaurant menu in WordPress, group different menu items, display them in a list or…
Easy restaurant menu upload
Manage your food menus online in minutes. Very employee friendly. With a user role for…
WP Restaumatic – Active Menu for restaurants
Add Restaumatic Active Menu to your website and start selling online using fully featured food…
Simple Restaurant Menu
Create a simple restaurant menu!
Restaurant Menu / bulk order plugin for WooCommerce
Simple Restaurant menu, even a child can use this online restaurant menu. sell pizza, coffee…
FoodBook Lite — Online Food Ordering System
FoodBook is a Online Food Ordering system for WordPress. It is developed based on woocommerce.…
Foodlist
Allows you to build restaurant/bar/café menu.
Trendy Restaurant Menu — Best Restaurant Plugin for WordPress
The Most Elegant Restaurant Menu Plugin in WordPress. Multiple Templates, Popup menu details, shortcode builder
Single Page Restaurant Menu for WooCommerce
This plugin is developed to list all woocommerce products/menus in a single page with category…
5 бесплатных плагинов меню ресторана WordPress для онлайн-заказа во время COVID-19
В то время, когда из-за пандемии все больше людей остаются дома, рестораны вынуждены изменить свой подход к обслуживанию клиентов. Из этой статьи вы узнаете, как адаптироваться к текущей ситуации с помощью плагинов WP.
Владельцам ресторанов и разработчикам WordPress важно, чтобы онлайн-меню и процесс заказа выполнялись безупречно. Для этого в WordPress есть плагины, которые помогают с доставкой, заказами на вынос, сбором информации и многим другим.
Предлагаем пять бесплатных плагинов WordPress с самым высоким рейтингом для ресторанов. Плагины гарантируют, что в эти трудные времена ваше заведение будет поддерживать поток заказов и оставаться в бизнесе.
Forminator
Когда дело доходит до создания форм заказа в ресторане и приема платежей, плагин Forminator сделает свое дело. Вы можете добавить суммы заказа, налоги, скидки по купонам, стоимость доставки и многое другое.
Forminator позволяет интегрироваться с более чем 1000 приложениями, такими как MailChimp, для длительного взаимодействия с клиентами. Вы можете создавать опросы и задавать вопросы, которые помогут вашему бизнесу. Например, спрашивать клиентов, что вы можете сделать, чтобы процесс заказа был безопасным во время пандемии. Блоки перетаскивания позволяют легко настраивать формы заказа и создавать их за считанные минуты. Можно добавить поля для адреса, номера телефона и всего необходимого для доставки или вывоза.
Есть возможность создать поле для специальных инструкций: где оставлять заказы после доставки, чтобы поддерживать социальную дистанцию.
Некоторые из основных функций Forminator:
С Forminator вы можете добавить форму отслеживания COVID-19 для своего ресторана.
Плагин имеет более 100 000 активных загрузок и 5-звездочный обзор.
Five Star Restaurant Menu
Five Star Restaurant Menu плагин используется для создания адаптивного меню на WordPress сайте. Можно создать систему заказа меню ресторана всего за несколько минут – идеально подходит для социального дистанцирования на вынос или доставки. В плагин встроен простой в использовании конструктор меню и множество настраиваемых параметров, таких как отдельные разделы меню, установленные часы и многое другое, что делает его отличным партнером для вашего бренда и ваших потребностей.
Некоторые из основных атрибутов:
Кроме того, вы можете перейти на Premium версию, которая включает несколько макетов, значки диетического меню и расширенные настраиваемые поля.
В настоящее время цены на Премиум варьируются от 40 долларов за один сайт до 220 долларов за лицензию на 10 сайтов.
Этот плагин с более чем 10 тыс. активных установок соответствует своему названию и получил 5-звездочный обзор.
Коллекция WordPress тем для сайтов о шоколаде, конфетах и выпечке
WPPizza
В условиях пандемии пицца стала лучшим выбором для доставки (кто не любит пиццу?). Плагин WPPizza сделан специально для пиццерийного бизнеса, но достаточно гибкой, чтобы работать и для других вариантов. Этот плагин – больше, чем плагин меню. Он позволяет клиентам размещать заказы и отслеживает эти заказы. Предлагает большую гибкость, например, включен мультисайтовый режим. Плагин настроен с множеством различных параметров для таких вещей, как размер еды, добавки, время открытия и другие опции. Помогает то, что эти разделы предварительно заполнены некоторыми данными, чтобы вы могли быстро понять, о чем они и как работают.
Некоторые ключевые особенности:
У этого плагина более 2K активных установок и 5-звездочный обзор.
Restaurant Menu – Food Ordering System – Table Reservation
Плагин Restaurant Menu использует простой и удобный интерфейс для меню ресторана, бронирования и онлайн заказ еды. Настроить этот плагин и подготовить его к использованию можно за считанные минуты. Знания в области кодирования не требуются, а простой онлайн-редактор с перетаскиванием упрощает задачу. Его настройка меню подходит для любого типа еды: от пиццы до сложных бургерных меню.
В бесплатной версии плагин не включает онлайн-платежи, однако в премиум-версии вы получите функцию оплаты. Премиум версия поддерживает подсказки.
Затраты начинаются от 29 долларов в месяц за услуги онлайн-платежей по кредитным картам и 19 долларов в месяц за продвинутый промо-маркетинг.
С более чем 10 тыс. активных загрузок и обзором 4,5 звезды, этот плагин определенно стоит попробовать.
Food Menu
Плагин Food Menu представляет собой мобильное адаптивное меню блюд и напитков. Он отлично подходит для любого ресторана, кафе, бара или кофейни, которые готовы работать в социально отчужденном мире. Когда дело доходит до категорий продуктов, вы можете отображать все варианты продуктов по нескольким или отдельным категориям.
Некоторые из основных функций:
Оставайтесь в безопасности и в бизнесе
Со временем все наладится. Но поскольку COVID-19 все еще существует, а возможности питания в общественных заведениях ограничены, доставка и еда на вынос важны как никогда.
Эти плагины помогут вам или бизнесу ваших клиентов оставаться в хорошей форме, открываться и работать сейчас, и в долгосрочной перспективе.