Мы предлагаем вам ознакомиться с новой техникой по созданию респонсив (адаптивного) меню без использования Javascript. Она использует чистые и семантические разметки HTML5. Меню может быть выровнено по левому краю, по центру или справа. Это меню переключается при наведении, что является более удобным для пользователей. У него также есть индикатор, который показывает “работающий/поточный” пункт меню. Он работает на всех мобильных и настольных браузерах, включая Internet Explorer!
Цель
Цель этого урока показать вам, как из обычного меню сделать выпадающее меню на маленьком дисплее.
Этот трюк будет более полезным для навигации с большим количеством ссылок, как на скриншоте ниже. Вы можете конденсировать все кнопки в элегантно выпадающее меню.
Nav HTML разметка
Вот разметка для навигации. Тег необходим для создания выпадающего меню со свойством CSS абсолютной позиции. Мы объясним это в уроке позже. .current класс указывает на активные/текущие ссылки меню.
- Portfolio
- Illustration
- Web Design
- Print Media
- Graphic Design
CSS для навигации (вид с рабочего стола) является довольно простым, так что мы не собираемся вдаваться в подробности. Обратите внимание, что мы указали display:inline-block вместо float:left в NAV элемента
- элементе.
- указав display:none, но оставили.current
- отображающийся в виде блока. Затем на NAV ховере, мы поставили все
- на display:block (это даст результат выпадающего списка). Мы добавили графический значок на проверку.current элемента, чтобы указать, что этот элемент является активным. Для выравнивания меню по центру и справа, используйте левую и правую собственности позиционирования
- списка.
- items */ margin: 0; } .nav .current { display: block; /* show only current
- item */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
.nav .current a {
background: none;
color: #666;
}
/* on nav hover */
.nav ul:hover {
background-image: none;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(images/icon-check.png) no-repeat 10px 7px;
}
/* right nav */
.nav.right ul {
left: auto;
right: 0;
}
/* center nav */
.nav.center ul {
left: 50%;
margin-left: -90px;
}
}
Высоких конверсий!
Навигация присутствует на любом хорошем сайте, даже если он одностраничный. В зависимости от ситуации, навигационные ссылки могут вести на различные разделы сайта либо отправлять к закладке (якорю), расположенной на текущей странице. Грамотное составление навигации, в которой не запутается пользователь, требует определенных знаний и опыта. К дизайну навигационной панели также нужно подходить с умом, и в этом уроке мы расскажем вам, как создать удобное навигационное меню.
Создание навигацииЧто такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка
- , где в каждом пункте
- содержится одна ссылка . В HTML5 для навигации ввели отдельный тег , куда можно просто помещать теги ссылок. После создания HTML-каркаса можно переходить к его стилизации с помощью CSS, где вы можете определять, каким будет ваше меню - вертикальным, горизонтальным, выпадающим и т. п.
Допустим, у нас есть простая навигация с пятью ссылками, созданная в HTML на основе маркированного списка:
Изначально, без стилей наша навигация выглядит, как обычный список:
Чтобы сделать этот элемент более похожим на навигационную панель, необходимо проделать несколько обязательных шагов. Во-первых, возле пунктов меню не нужны маркеры, а во-вторых, стандартные значения margin и padding , заданные браузером для списка, могут мешать, поэтому мы обнуляем их. В итоге получается следующее:
Menu { list-style-type: none; margin: 0; padding: 0; }
По сути, идентичные действия по отношению к спискам делает файл сброса стилей Reset.css , поэтому, если вы используете его на вашем сайте, то код выше можно не записывать.
После обнуления стандартных стилей списка можно приступать непосредственно к созданию стилей для навигации. Мы покажем, как делать вертикальные и горизонтальные панели.
Вертикальное менюСоздание вертикальной навигационной панели считается более легким занятием, нежели создание горизонтального меню. Главным образом потому, что нет необходимости задавать горизонтальное расположение ссылок. Это просто вертикальный список страниц сайта. И всё же некоторые важные стили применить придется.
Блочные ссылкиПрежде всего нужно сделать все теги блочными элементами:
Menu a { display: block; }
Существует несколько причин для этого:
Ширина менюСледующее, что нам понадобится сделать - это задать ширину меню. Если у вас заранее не была определена ширина навигационной панели, и она не находится в контейнере, который ограничивает ее, то меню будет растянуто на всю ширину окна (как в нашем примере выше) - ведь блочный элемент по умолчанию ведет себя именно так. Вы можете задать необходимую ширину для элемента.menu , например:
Menu { width: 300px; }
Вместо этого можно установить ширину для пунктов
- либо для ссылок - визуально эффект может быть одинаковый, но учтите, что в таком случае ширина элемента.menu всё равно останется 100%.
Разделение пунктовЧтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку.menu:
Menu a { border-top: 1px solid blue; } .menu { border-bottom: 1px solid blue; }
Высота пунктов и вертикальное выравниваниеСейчас ссылки меню выглядят слишком низкими, расположенными близко друг к другу. Если текст каждой ссылки не будет занимать более одной строки, то увеличить их высоту и сохранить при этом текст вертикально по центру можно с помощью свойств height и line-height:
Menu a { height: 30px; line-height: 30px; } GIF
Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.
Горизонтальное менюОсновная задача при создании горизонтальной навигации - расположить пункты меню в один ряд. Это можно сделать несколькими способами.
Способ первыйПервый вариант - задать пунктам списка свойство display со значением inline либо inline-block:
Menu li { display: inline; }
После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:
Menu a { text-decoration: none; font-family: sans-serif; color: #5757a0; display: inline-block; padding: 10px 20px; background-color: lavender; border-bottom: 5px solid #5757a0; }
Мы добавили фоновый цвет и нижнюю границу для каждой ссылки, а также увеличили ее размеры при помощи внутренних отступов padding . Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами
- . Эти промежутки можно убрать, записав HTML-код списка в одной строке:
Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right:
Menu li { margin-right: -5px; }
Этот код не убирает промежутки, а прикрывает их за счет сдвига элементов на пять пикселей влево. Данный способ нельзя назвать очень надежным, потому что размер промежутка может варьироваться в зависимости от других стилей.
Если промежутки между пунктами не запланированы в вашем дизайне, лучше воспользоваться вторым методом горизонтального выстраивания элементов.
Способ второйВозможно, вы уже догадались, что второй вариант создания горизонтального меню заключается в использовании свойства float . Для этого добавьте стиль для тегов
- :
Menu li { float: left; }
Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим, ), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left . Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:
Menu { overflow: hidden; }
Это также поможет вернуть нормальную высоту родителя плавающих элементов. Мы уже говорили об этой проблеме в предыдущих уроках, но тогда мы решали ее через специальный хак с использованием псевдоэлемента:after . Пример выше - это еще один способ решить вопрос с исчезнувшей высотой контейнера.
Примечание: если вы установите фон для элемента.menu , то вы не увидите его до тех пор, пока не примените к нему overflow: hidden . Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?
В следующем уроке мы более детально расскажем о возможностях селекторов атрибутов, с помощью которых можно задавать
Здравствуйте, сегодня опять поговорим о создании меню (вертикальное и горизонтальное) в wordpress через панель управления, а также о том, как вывести его в любом месте вашего сайта с помощью функции wp_nav_menu, все будет намного проще, чем мои ранее написанные руководства по созданию меню.
Скачать исходники для статьи можно ниже
Нижеуказанное руководство основано на моей предыдущей статье –
Однако, здесь мы будем делать все проще (не будем трогать файл functions.php или использовать скрипты, чтобы сделать меню выпадающим), а именно научимся делать вертикальное меню или горизонтальное не выпадающее меню.
Приступим же!
1. Заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Меню”.
Здесь создаем нужное нам меню.
Например, создадим меню из рубрик, но не из всех, а только тех, которые нам нужны и назовем данное меню – “rubrici”, вот так это будет выглядеть:
2. Для вывода меню в wordpress будем пользоваться следующей функцией:
Все просто, в вышеуказанном коде, вместо “имя меню” подставляете название созданного вами меню и вставляете код в любом месте вашего сайта.
Для меню, созданного в нашем примере данная функция будет выглядеть следующим образом:
3. Вставляем меню в нужном месте нашего сайта.
Давайте, например, вставим наше меню “rubrici” в шапку, в самом вверху.
Для примера возьмем стандартную тему wordpress – Twenty Twelve.
Для этого в панели управления wordpress заходим в пункт – “Веншний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем – header.php.
В его коде находим открывающий тег body, а сразу после него идет тег, открывающий блок “page” – вот после него и вставим вывод нашего меню “rubrici” с помощью функции – wp_nav_menu:
... ...
Сохраняем изменения и переходим на свой сайт, смотрим, что у нас получилось:
Как видите меню у нас получается вертикальное, и это хорошо, если вам нужно вертикальное меню, однако, допустим, что нам нужно горизонтальное меню, тогда нам нужно прописать стили оформления для нашего меню – “rubrici”.
4. Прописываем стили меню.
Для начала, обернем функцию вывода нашего меню в новый блок, например “menu2”, для того чтобы прописать для него стили оформления.
То есть код в файле header.php (путь 3 данного руководства) будет выглядеть так:
... ...
Следующий шаг, который нам нужно сделать – это прописать стили оформления для нашего нового блока (“menu2”), в котором и содержится наше новое меню (“rubrici”).
А для этого в панели управления wordpress, в левом меню, выбираем пункт “Внешний вид”, далее его подпункт “Редактор”, а справа среди шаблонов выбираем файл – style.css.
Переходим в его коде в самый низ и вставляем следующий фрагмент:
#menu2 { padding: 0 0 0 20px; margin: 0; } #menu2 li { float: left; list-style: none; font: 12px Tahoma, Arial; } #menu2 li a { display: block; background: #20548E; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #EAFFED; white-space: nowrap; } #menu2 li a:hover { background: #1A4473; } #menu2 li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; }
После чего переходим на сайт и смотрим, что у нас получилось:
Как видите наше меню превратилось из вертикального в горизонтальное, осталось только подкорректировать стили оформления под свой сайт.
Например в данном примере нам нужно растянуть по ширине каждый пункт меню – за это отвечает атрибут:
Width: 70px;
Меняю его на:
Width: 170px;
После чего мое меню будет выглядеть следующим образом:
Создание меню в Wordrpess, а также сортировка страниц и категорий часто становится довольно сложной проблемой для начинающих вебмастеров. В связи с этим я решил написать небольшое руководство, в котором мы подробно рассмотрим, как создавать произвольные меню в WordPress. С их помощью вы сможете самостоятельно создавать произвольные меню, добавлять или удалять пункты меню, изменять их название, расположение и вложенность.
В одной из предыдущих статей мы уже рассматривали способ, . К счастью на данный момент в WordPress появилась встроенная функция, которая позволяет создавать произвольные меню, не прибегая к использованию плагинов. Данная функция доступна во всех версиях WordPress, начиная с версии 3.0.
Сразу хочу обратить ваше внимание на то, что поддержка произвольных меню включена не во всех шаблонах. В связи с этим статья будет состоять из двух частей. В первой части статьи мы рассмотрим, как создавать пункты меню в WordPress через административную панель, если произвольные меню уже подключены в шаблоне.
Во второй части статьи мы научимся самостоятельно включить поддержку произвольных меню в WordPress и настраивать вывод меню через wp_nav_menu . Эти знания вам пригодятся на случай, если в вашем шаблоне не предусмотрено использование произвольных меню или же вы сами пишете или и хотите добавить туда возможность создания произвольных меню.
Создание меню и пунктов произвольного меню через административную панель WordPressДля создания меню переходим в Административную панель – Внешний вид – Меню и смотрим, включена ли поддержка произвольных меню в вашем шаблоне. Если нет, то можем пока пропустить данный шаг и перейти сразу ко второй части статьи. Если же меню уже поддерживается, то у вас откроется страница примерно следующего содержания.
Для создания нового меню, вписываем его название в поле «Введите заголовок меню» и жмем «Создать меню».
Лично я предпочитаю прописывать все названия латинскими буквами во избежание каких-либо проблем в будущем. Кириллические названия тоже поддерживаются, но я не рекомендовал бы вам их использовать. Это лично мое мнение.
После создания меню нам нужно выбрать его в блоке «Области темы», который находится в левой колонке, после чего сохранить результат, нажав на кнопку «Сохранить».
В данном случае тема оформления поддерживает лишь одно произвольное меню, поэтому особо выбирать не приходится. Нужно просто выбрать созданное нами меню из выпадающего списка и сохранить результат. Если же тема поддерживает два или более меню, то нужно выбирать меню исходя из его расположения в шаблоне.
После сохранения результатов для добавления новых пунктов в меню достаточно отметить нужные категории или страницы и нажать кнопку «Добавить в меню».
После этого их можно как угодно перемещать относительно друг друга и изменять вложенность.
Итак, мы рассмотрели, как создавать произвольное меню через административную панель WordPress, как добавлять в него новые пункты и производить их настройку. Теперь давайте перейдем ко второй части статьи и научимся включать поддержку произвольных меню в WordPress и выводить их в шаблоне при помощи функции wp_nav_menu.
Включение поддержки произвольных меню в WordPressПервым делом нам нужно зарегистрировать использование произвольных меню и самих меню. Для этого открываем на редактирование файл function.php вашей темы оформления и добавляем следующий код.
Register_nav_menus(array("top" => "Верхнее меню"));
Где «top» — идентификатор меню, а «Верхнее меню» — название месторасположения.
Если нужно добавить несколько меню, то перечисляем их через запятую.
Register_nav_menus(array("top" => "Верхнее меню", "left" => "Левое меню"));
После добавления данного кода поддержка произвольных меню будет включена автоматически. Убедиться в этом вы можете, перейдя в Административную панель – Внешний вид – Меню. Но самой регистрации меню недостаточно. Меню нужно еще вывести в шаблоне. Для этого мы воспользуемся специальной функцией wp_nav_menu.
Вывод произвольного меню. Функция wp_nav_menuКак уже говорилось выше, выводить произвольные меню мы будем при помощи функции wp_nav_menu, которая может принимать следующие параметры.
$args = array("menu" => "", // Название меню (string). "container" => "div", // Контейнер меню (string). В него помещается список ul. "container_class" => "", // Класс контейнера (string). "container_id" => "", // Id контейнера (string). "menu_class" => "menu", // Класс тега ul (string). "menu_id" => "", // Id тега ul (string). "echo" => true, // Выводить на экран или возвращать для обработки (boolean). "fallback_cb" => "wp_page_menu", // Резервная функция на случай, если произвольное меню не существует (string). "before" => "", // Текст перед каждой ссылки (string). "after" => "", // Текст после каждой ссылки (string). "link_before" => "", // Текст перед анкором ссылки (string). "link_after" => "", // Текст после анкора ссылки (string). "depth" => 0, // Глубина вложенности (integer). 0 - неограниченно, 2 - двухуровневое произвольное меню. "walker" => , // Класс, собирающий меню. Default: new Walker_Nav_Menu. (object). "theme_location" => ""); // Расположение меню в шаблоне. Указываем идентификатор меню. (string).
При этом параметры можно передавать как через массив, так и через строку. В любом случае меню будет работать. Для наглядности рассмотрим оба варианта.
Передача параметров через массив
Передача параметров через строку
Wp_nav_menu("menu_id=topmenu&theme_location=top&container=");
Лично я предпочитаю второй вариант, так как он более компактный, на мой взгляд. В любом случае результатом работы функции будет следующий код.
На этом я заканчиваю данную статью. Основные моменты мы рассмотрели и в 99% случаев данной информации вам будет достаточно для самостоятельного создания произвольных меню в WordPress. Если же у вас возникнут какие-то вопросы, вы всегда сможете задать их в комментариях.
На этом все. Удачи вам и успехов в создании сайтов на WordPress.
Регистрируем и выводим произвольное меню, созданное в панели: «Внешний вид > Меню» (Appearance > Menus) .
Регистрируем меню
Add_action("after_setup_theme", function(){ register_nav_menus(array("main_menu" => __("Primary menu", "crea"), "foot_menu" => __("Footer menu", "crea"),)); });
Второй вариант регистрации меню (не знаю, на сколько он правильный, поэтому лучше использовать первый вариант)
If (function_exists("register_nav_menu")) { register_nav_menus(array("main_menu" => __("Primary menu", "crea"), "foot_menu" => __("Footer menu", "crea"),)); }
Выводим меню
Второй вариант вывода меню
Использование
wp_nav_menu(array("theme_location" => "" // (string) Расположение меню в шаблоне. (указывается ключ которым было зарегистрировано меню в функции "menu" => "", // (string) Название выводимого меню (указывается в админке при создании меню, приоритетнее чем указанное местоположение theme_location - если указано, то параметр theme_location игнорируется) "container" => "div", // (string) Контейнер меню. Обворачиватель ul. Указывается тег контейнера (по умолчанию в тег div) "container_class" => "", // (string) class контейнера (div тега) "container_id" => "", // (string) id контейнера (div тега) "menu_class" => "menu", // (string) class самого меню (ul тега) "menu_id" => "", // (string) id самого меню (ul тега) "echo" => true, // (boolean) Выводить на экран или возвращать для обработки "fallback_cb" => "wp_page_menu", // (string) Используемая (резервная) функция, если меню не существует (не удалось получить) "before" => "", // (string) Текст перед каждой ссылки "after" => "", // (string) Текст после каждой ссылки "link_before" => "", // (string) Текст перед анкором (текстом) ссылки "link_after" => "", // (string) Текст после анкора (текста) ссылки "items_wrap" => "", "depth" => 0, // (integer) Глубина вложенности (0 - неограничена, 2 - двухуровневое меню) "walker" => "" // (object) Класс собирающий меню. Default: new Walker_Nav_Menu));
Аргументы параметра $args
theme_location(строка)
Идентификатор расположение меню в шаблоне. Идентификатор, указывается при регистрации меню функцией register_nav_menu().
По умолчанию: ""menu(строка)
Меню которое нужно вывести. Соответствие: id, слаг или название меню.
По умолчанию: ""container(строка)
Чем оборачивать ul тег. Допустимо: div или nav.
Если не нужно оборачивать ничем, то пишем false: container => false.
По умолчанию: divcontainer_class(строка)
Значение атрибута class у контейнера меню.
По умолчанию: menu-{menu slug}-containercontainer_id(строка)
Значение атрибута id у контейнера меню.
По умолчанию: ""menu_class(строка)
Значение атрибута class у тега ul.
По умолчанию: menumenu_id(строка)
Значение атрибута id у тега ul.
По умолчанию: слаг менюecho(логическое)
Выводить на экран (true) или возвратить для обработки (false).
По умолчанию: truefallback_cb(строка)
Функция для обработки вывода, если никакое меню не найдено.
Передает все аргументы $args указанной тут функции.
Установите пустую строку » или ‘__return_empty_string’, чтобы ничего не выводилось, если меню нет.
По умолчанию: wp_page_menubefore(строка)
Текст перед тегом в меню.
По умолчанию: ""after(строка)
Текст после каждого тега в меню.
По умолчанию: ""link_before(строка)
Текст перед анкором каждой ссылки в меню.
По умолчанию: ""link_after(строка)
Текст после анкора каждой ссылки в меню.
По умолчанию: ""items_wrap(строка)
Нужно ли оборачивать элементы в тег ul. Если нужно, указывается шаблон обертки.
По умолчанию: ""depth(число)
Сколько уровень вложенных друг в друга ссылок показывать. 0 — все уровни.walker(объект)
Класса, который будет использоваться для построения меню. Нужно указывать объект, а не строку, например new My_Menu_Walker(). По умолчанию: Walker_Nav_Menu(). Как использовать смотрите ниже…
По умолчанию: Walker_Nav_Menuitem_spacing(строка)
Оставлять или нет переносы строк в HTML коде меню. Может быть: preserve или discard
По умолчанию: "preserve"Пример
Выводить меню, только если оно существует
По умолчанию, если меню нет, то вместо него будут выведены страницы сайта. Но если нужно выводить меню, только в том случае когда оно создано в админ-панели, укажите параметр fallback_cb как "__return_empty_string" :
Wp_nav_menu(array("theme_location" => "primary-menu", "fallback_cb" => "__return_empty_string"));
- либо для ссылок - визуально эффект может быть одинаковый, но учтите, что в таком случае ширина элемента.menu всё равно останется 100%.
- содержится одна ссылка . В HTML5 для навигации ввели отдельный тег , куда можно просто помещать теги ссылок. После создания HTML-каркаса можно переходить к его стилизации с помощью CSS, где вы можете определять, каким будет ваше меню - вертикальным, горизонтальным, выпадающим и т. п.
@media screen and (max-width: 600px) { .nav { position: relative; min-height: 40px; } .nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .nav li { display: none; /* hide all
/* nav */ .nav { position: relative; margin: 20px 0; } .nav ul { margin: 0; padding: 0; } .nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; } .nav a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; } .nav a:hover { color: #000; } .nav .current a { background: #999; color: #fff; border-radius: 5px; }
Центр и выравнивание по правому краю
Как уже упоминалось выше, вы можете изменить выравнивание кнопок с помощью “text-align”.
/* right nav */ .nav.right ul { text-align: right; } /* center nav */ .nav.center ul { text-align: center; }
Поддержка Internet Explorer
HTML5 тег и медиа запросы не поддерживаются Internet Explorer 8 и старше версиями. Включите CSS3-mediaqueries.js (или respond.js) и html5shim.js, чтобы обеспечить резервную поддержку. Если вы не хотите добавлять html5shim.js, то тогда замените тег на тег.
Здесь начинается самое интересное - создание респонсивности меню с медиа запросами! На 600px мы установили nav элемент в относительное положение, чтобы возможно было поместить
- список меню вверху с абсолютной позицией. Мы скрыли все элементы
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows
Резервное копирование и восстановление драйверов Windows