Содержание

HTML/CSS. Как создать вертикальное и горизонтальное меню

Эта инструкция продемонстрирует, как создать вертикальное и горизонтальное меню используя стили CSS. Перед началом убедитесь, что вы знакомы с HTML тэгами ненумерованного списка. Кроме того, посмотрите инструкцию как создать меню в HTML.

Для начала создадим HTML меню на основе ненумерованного списка:


<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contacts</a></li>
</ul>

Теперь необходимо создать CSS файл и подключить его к странице:


  <link href="style.css" rel="stylesheet" type="text/css" />

Убедитесь, что код подключающий CSS находится в разделе <head> вашего документа.

Вы можете использовать и inline стили.


	<style type="text/css">
		...тут расположите ваши стили CSS...
	</style> 

В результате у вас должен получиться следующий код:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Partners</a></li>
	<li><a href="#">Contacts</a></li>
</ul>

</body>
</html>

Несортированный список обладает собственными стилями и таким образом без любых дополнительных изменений мы получаем вертикальное меню.

Для создания горизонтального меню понадобятся дополнительные изменения в HTML и CSS.

В первую очередь добавьте класс в список. Замените <ul> на <ul>

Теперь давайте сделаем меню горизонтальным с помощью CSS файла. У несортированного списка есть заданные по умолчанию параметры margin и padding. Нужно их обнулить:

ul.horizontal{
margin:0;
padding:0;
}

Теперь сделаем список горизонтальным:


ul.horizontal li{
display:block;
float:left;
padding:0 10px;
}

Мы добавили значения padding по горизонтали для того, что бы элементы не слиплись. Теперь меню готово и осталось только добавить в него ссылки, фон и отредактировать цвет шрифта.

Как сделать HTML меню? | EasyDoit.ru

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню).

Меню — раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

Вертикальное меню

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент нашего списка будет содержать по одной ссылке:

Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:

Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.

Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:

Горизонтальное меню

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

Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов
нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:

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

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

Выпадающее меню

Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

Подпункты мы разместим в отдельном списке, вложив его в элемент
, который содержит родительскую ссылку относительно подпунктов.

Теперь мы имеем четкую структуру нашей будущей панели навигации:

Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент
список снова был преобразован в блочный элемент:

Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:

puzzleweb.ru

Создание меню на CSS – руководство для новичков

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

Способы покорения людских сердец выбираются разные — от применения Flash анимации, использования баннеров и смелых дизайнерских решений до различных звуковых и визуальных эффектов.

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

Меню является самой распространённой системой навигации на сайте, которую можно сравнить с оглавлением в книге. Меню должно быть заметно на любой странице ресурса, позволяя пользователю мгновенно перейти на интересующий раздел.

На объёмных сайтах, содержащих более 50 страниц, невозможно разместить полное меню для доступа ко всем разделам.

В таком случае следует использовать выпадающее меню на CSS, при клике на которое появляются дополнительные ссылки на подразделы.

Разновидности меню в CSS

Существует сразу несколько видов и типов CSS меню:

  1. Главное меню . Это список определённых ссылок на ключевые разделы веб-сайта.
  2. Дополнительное меню . Такое меню имеет иерархическую структуру и бывает трёх типов:
    • Выпадающее меню . Раскрывается при наведении курсора мыши на пункт;
    • Всплывающее меню сайта . Раскрывается при клике на определённом пункте;
    • Статическое дополнительное меню для CSS . Древовидная структура, представленная в уже раскрытом виде.

Как создать меню в CSS?

Приведём пример создания простого горизонтального и вертикального меню на CSS с пояснениями.

Код горизонтального меню прописывается следующим образом:

В конечном итоге получается подобное горизонтальное меню :

Вертикальное меню , полученное при помощи данного кода, выглядит так:

www.internet-technologies.ru

Как сделать в html5 меню

Дата публикации: 2016-03-14

От автора: приветствую вас на нашем блоге о сайтостроении. Это цикл статей, посвященный новой спецификации и сегодня я бы хотел вам рассказать, как сделать в html5 меню и чем этот процесс отличается от такого же в предыдущих версиях языка.

В чем отличия

Прежде всего я хотел бы сказать, что спецификация не является уж такой и новой – она начала свое становление еще в 2009 году. Собственно, с тех пор происходит постоянное развитие – в html5 появляются новые возможности, современные браузеры все больше и больше поддерживают эти самые возможности, так что уже скоро можно будет говорить о полной поддержке этой технология, хотя она и не является чем-то единым целым, это скорее набор новых возможностей, каждая из которых является самостоятельной.

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

Так вот, с появлением новых тегов теперь можно поступить более правильно – вместо тега div обернуть меню в nav – новый семантический элемент, который создан специально для того, чтобы собирать в него самые главные ссылки, группировать их вместе.

В nav можно поместить как список, так и просто набор ссылок. Мне кажется, это даже более простое и правильное решение, хотя во многих шаблонах по-прежнему видно реализацию меню с помощью тегов ul, li, a.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Как сделать с помощью html5 горизонтальное меню

Поскольку теперь ссылки можно помещать в семантический элемент nav, то создание горизонтальной навигации я вижу очень просто.

webformyself.com

Как сделать меню в html

Для удобной навигации по сайту на всех страницах используют меню, чтобы пользователю было понятно, что и где у вас находится. Практически всегда в верхней части страницы (в шапке) располагают горизонтальное меню по разделам (категориям) сайта, а вертикальное меню прописывают в сайтбаре (в колонке) и используют для навигации по статьям.

Из статьи вы поймёте как сделать меню для сайта html, что для этого потребуется прописать, чтобы получилось горизонтальное и вертикальное меню на css, либо меню с выпадающим списком.

Как сделать меню на html

Для того, чтобы сделать меню (любое) мы будем использовать маркированный список, которому придадим непосредственно свой class и пропишем для этого класса свои параметры с необходимыми значениями.

К примеру, для создания меню мы используем список с классом (название класса любое, только латинские буквы), и код html будет выглядеть так:

Обязательные параметры и значения CSS

  • margin: 0; — убираем все отступы списка, иначе браузер подставит значения по умолчанию 20px;
  • list-style-type: none; — убираем маркеры у пунктов меню, иначе браузер добавит точки или цифры.

Как сделать горизонтальное меню на CSS

И выглядеть это будет так:

Горизонтальное меню у нас готово, осталось придать ему красивый внешний вид.

Давайте каждому пункту в горизонтальном меню придадим рамку border и сделаем у неё скошенные края, заполним определённым цветом background-color ( добавим фон для пункта меню ), и изменим вид ссылки.

Отображаться горизонтальное меню уже будет таким образом:

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

И для наглядности сделал пункты меню по центру, применив свойство text-align: center; , которое можно удалить (выровняется автоматически по левому краю), либо задать значение text-align: right; и горизонтальное меню отобразится по правому краю.

Кстати вы можете так же воспользоваться готовое меню на css и jQuery, которые вы можете там воочию посмотреть и бесплатно скачать.

Как сделать вертикальное меню на CSS

Вертикальное меню на CSS делается и оформляется на странице практически так же как и горизонтальное, только здесь изменяется в .menu-2 li

И ещё одно дополнение к вертикальному меню: так как оно в большинстве случаев находится в боковой колонке сайта, которое имеет фиксированную ширину, то и мы вынуждены задать ширину width: 100%; нашему вертикальному меню, чтобы оно полностью занимало всю ширину колонки.

Давайте рассмотрим вертикальное меню CSS на примере:

Вот так вертикальное меню отобразится на странице:

Как сделать выпадающее меню на CSS

Сделать выпадающее меню с помощью CSS довольно просто. Мы всего лишь добавим к существующему коду от вертикального меню несколько параметров, которые и будут отвечать за выпадающий список пунктов меню.

Обязательно запомните!
Для того, чтобы выпадающее меню строго появлялось напротив ведущей ссылки, необходимо в CSS для тега li , где находится эта ссылка, прописать position: relative; , а для выпадающего меню position: absolute;

Давайте напишем html код для выпадающего меню на CSS.

Посмотрите, как будет выглядеть на странице выпадающее меню на CSS.

Точно таким же образом прописывается выпадающее меню и при горизонтальном расположение навигации. Единственное, это не забывайте менять значения у параметров top и left (отступ сверху и слева).

Посмотрите!
Как сделав всего 3 изменения в CSS, наше вертикальное расположение навигации с выпадающим меню, превратиться в горизонтальное с выпадающим меню.

age-dragon.com

Горизонтальное меню для сайта на HTML+CSS

Доброго времени суток, дорогие читатели. Сегодня мы разберем тему «как сделать горизонтальное меню используя HTML и CSS». Меню, как правило, находится в шапке сайта и является перечнем ссылок на самые важные страницы, его также называют главным меню. Данные ссылки пользователи будут постоянно нажимать. То, как вы их расположите и какой дизайн вы зададите меню будет влиять на поведение пользователей, конверсию, их общее впечатление от вашего сайта и, конечно, на seo-продвижение.

HTML-код для горизонтального меню

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

Для создания меню используют теги

Если вам не совсем понятно, что такое эти html-теги, css, таблицы, то почитайте об основных технологиях для создания сайта.

Пример использования html тегов для создания меню в коде ниже:

Стандартные CSS стили для горизонтального меню

Мы получаем готовое верхнее меню в шапку, без каких-либо особых стилей и наворотов это можно назвать каркасом вашего будущего красивого меню. Если вы скопируете и поставите у себя данный html и css это будет выглядеть следующим образом.

Пример каркаса (шаблона) вашего будущего меню

Получилось все достаточно простенько, вы ,конечно же, хотите сразу красивое главное меню, но без понимания основ у вас просто не получится создать хорошее меню без ошибок в html и css.

Существует так же несколько других CSS методов используемых для того чтобы сделать меню горизонтальным помимо float:left; , например, display:inline-block; или display:flex; , но рекомендуется использовать способ описанный выше.

Давайте же наполним наш шаблон меню различными стилями и сделаем его красивым.

Примеры красивого горизонтального меню для сайта

Сейчас я приведу несколько готовых примеров с готовым дизайном горизонтального меню.

Все «красивости» вы можете создать для своего сайта сами, а не искать в интернете. Проще всего это сделать взяв за основу один из примеров ниже

Простое меню синего цвета с раздельными пунктами

CSS стили «верхнего» меню

Ниже расположены стили данного меню. HTML остается тем же, что и в «каркасе» меню.

Главное меню, расположенное на цветной линии с красным фоном

CSS стили меню на цветной линии

Выпадающее меню на HTML+CSS

Для реализации дополнительного выпадающего (раскрывающегося) меню на сайте у какого-либо пункта меню нам необходимо добавить дополнительный перечень пунктов в HTML-код для какой-либо ссылки из горизонтального меню и изменить стили CSS. В стилях мы будем применять простой трюк — изменение отображения раскрывающегося меню по средствам наведения на нужный нам пункт в верхнем меню. Для примера возьмем пункт «услуги».

Пример создания простого выпадающего меню

HTML код выпадающего меню
Стили CSS выпадающего меню

А чтобы понять, какие именно у вас должны быть услуги и категории рекомендую ознакомиться с материалом: составление структуры и семантического ядра.

Я постарался максимально кратко рассказать вам о том как создать главное горизонтальное меню, сделать несколько шаблонов, как добавить к нему простые стили и сделать его симпатичнее, как сделать выпадающее меню для вашего сайта. Для удобства я собрал все меню, представленные выше, в одном html-файле, который вы можете скачать ниже. Выглядит это как на скриншоте:

Поделитесь в одной из социальных сетей и скачивание сразу же будет доступно.

Благодарю за внимание.

Как поменять фон сайта?

CSS-класс ссылки и CSS-класс страницы у Joomla

спасибо огромное! коротко, ясно и работает. все что нужно нашел.

очень полезная информация , понятно главное буду рекомендовать своим знакомым

А как по центру страницы сделать меню? все перепробывал((

Вам нужно сделать подобную конструкцию:

Ну у меня не получается. Такое ощущение что в примере нет подключения к css файлу, на странице все отображается как текст, без оформления.

В примере — встроенные интерактивные меню, там CSS подключается к html странице автоматически. Вам же необходимо либо прописать CSS прямо в html коде при помощи конструкции:

Либо (что более правильно) создать отдельный файл CSS и на вашей странице подключить данный файл.

Я создал отдельную папку css. Я новичок, может что спрашиваю не корректно, Буду пробовать подключать.

Если у вас отдельная папка, а в ней находится ваш файл CSS, то необходимо на вашей HTML странице в добавить строчку

Таким образом вы подключите файл со стилями к вашей HTML-странице
Разумеется, вам нужно заменить ВАША_ПАПКА и ВАШ_ФАЙЛ_СО_СТИЛЯМИ на существующие названия документов.

хочу добавить что есть сайты где выложен HTML и css, а как их новичку связать -не понятно.

Очень помогли, спасибо большое
классный сайт, все наглядно и по полочкам.

Теперь всё ясно. СПС!

Здравствуйте. Только начинаю изучать программу. Спасибо за подсказки. Есть один вопросик. Как сделать по центру МЕНЮ если там у меня страниц много например 15
Отображется в две строки но не центрируется в браузере. экспорт был сделан просто в шаблон сайта.

Приветствую, вероятнее всего вам необходимо задать свойства css для родительского элемента меню

text-align:center;
margin: 0 auto;

День добрый, использовал ваш пример «Главное меню, расположенное на цветной линии с красным фоном» вставил в div блок настроил все хорошо, но отключение переноса и маркеров списков перенеслось по умолчанию в другие div блоки. Делал все через таблицу стилей с отдельным файлом css, как можно исправить чтоб отключение списков и маркеров работало только в одном div блоке?

Добрый
Вам необходимо задать родительскому div, в котором находится ваше меню какой-то класс, например menu, т.е. это будет выглядеть так:

Соответственно, во всех новых CSS, что вы добавили для вывода меню, вам нужно подставить перед каждым свойством .menu . Выглядит это примерно так:

Ссылки не кликабельные получаются почему-то.

В данном примере ссылки указаны в формате

для того, чтобы не было некорректных переходов. Вам необходимо поставить свои актуальные ссылки, например

здравствуйте!не получается сделать выпадающее меню,его видно постоянно…что не так?подскажите пожалуйста. заранее спасибо

Приветствую, у вас определенно проблема в том, что стили меню перекрываются, а именно — вот эта часть

Для того, чтобы это исправить, вы можете, например, поставить для родительского тега div, который оборачивает меню, новый класс. Допустим это будет new-menu. После чего проставьте перед нужным стилем ваш новый класс, т.е. в данном случае это будет

спасибо, я просто не внимательна-допустила ошибку…

А как осуществить переход в конкретное место при нажатии?

Вам нужно вместо href=»#» писать адрес своих страниц. Например, href=»/contacts»

Вставила код меню в свой сайт. После этого все ссылки сайта отображаются в виде блоков, как блоки меню

Приветствую. У вас подобная проблема, что уже описывалась в комментариях. Вам нужно задать родительскому div, в котором находится ваше меню какой-то класс, например menu, тогда это будет похоже на:

Соответственно, для всего того нового CSS, что вы вставили для вывода меню, вам нужно подставить перед каждым свойством .menu . Выглядит это примерно так:

Спасибо! Стало понятно! 🙂

А после чего писать все эти стили и куда?

Стили вы можете вставить как в саму страницу (что в body, что в head, но правильней вставить отдельный css-файл. Если вы работает с CMS, то такой у вас наверняка есть.

А как так вышло что маркерный список превратился в меню? В чём секрет? Я в восторге!

nz4.ru

Создание и оформление меню

Основы верстки

Чаще всего меню создается на основе не упорядоченных списков ul . В каждый пункт li вкладывается гиперссылка a .

Можно создавать меню и на основе блоков div , таблиц table или списков определений dl .
Но традиционной является конструкция ul .

Код простейшего меню будет выглядеть так:

Примечание

В процессе разработки удобно указывать адрес гиперссылки — #/ . Во-первых, она никуда не ведет, а во-вторых — не происходит перехода к началу страницы.

Целью гиперссылки будет соответствующая страница вашего сайта или внешняя ссылка. Адрес внутренней страницы может быть как абсолютным, так и относительным. Внешней ссылки — только абсолютный. (Если забыли — смотрите Абсобютные и относительные ссылки).

В итоге мы получили очень простое (чтобы не сказать «убогое») навигационное меню . Его необходимо срочно оформить! Прописываем стили css .

— Куда?
— В css-файл!
— В какой?

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

Поэтому предварительно нужно создать файл, например my-menu.css , и подключить его.

Позже код можно будет перенести в общий файл, а этот удалить (или отключить).

Как прописываются стилевые правила для меню

Необходимо создать классы, и прописывать стили уже для них. Потому что если задавать стили непосредственно для тегов, например:

то это правило будет распространяться и на все ссылки, включенные в списки за пределами меню! Кроме того, на сайте может быть несколько меню различного оформления.

Вторая причина, по которой желательно работать с классами, а не с тегами напрямую — возможность разбить стили по группам. За каждую тематическую группу стилей будет отвечать свой класс.

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

Каким тегам нужно присваивать классы

Хороший вопрос. Для начала, неплохо создать дополнительный контейнер-обертку и присвоить класс ему.

Да, это дополнительная разметка, но оформлять меню будет гораздо удобнее. Кроме того, если в качестве контейнера использовать не div , а nav , то верстка будет более семантической (осмысленной) и удобной для поисковых систем (ПС), что является несомненным плюсом. Второй класс присваиваем тегу ul .

Почему именно так?

Присвоение класса .menu_color тегу nav дает больше возможности для оформления, чем присовение его тегу ul , а класс .my_menu отвечает только за разметку меню и никакого отношения к содержащему контейнеру иметь не должен.

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

Какие имена должны быть у классов

Осмысленные. В идеале, любое имя класса должно давать представление об объекте и назначении. В приведенном выше примере используются классы nav.menu_color и ul.my_menu .

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

Старайтесь выбирать имена для классов не только внятные, но и уникальные. В противном случае они могут конфликтовать с уже существующими классами.

Имеено по-этому я выбрал класс .my_menu , так как на сайте уже есть класс .menu со своими стилями.

Группировка стилей по классам

Это то, чем никогда не озадачиваются начинающие верстальщики, а опытные часто пренебрегают . А потом, когда нужно внести изменения в уже созданное меню чтобы адаптировать его для другого сайта, или вывести в другой позиции — долго и нудно переделывают.

На самом деле, все очень просто. Изначально, на этапе создания нужно группировать стили тематически и включать их в соответствующие классы.

Например, за цветовое оформление у нас отвечает класс .menu_color

Т.е. все стили, определяющие цветовое оформление того или иного элемента меню, должны быть привязаны к классу .menu_color , а стили отвечающие за разметку — соответственно .my_menu .

При необходимости, для тега nav также можно добавить дополнительный класс, чтобы не залезать на территорию «цветового оформления» .

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

Простое вертикальное меню

Исходный html-код меню будет выглядеть так:

Кроме основных классов, рассмотренных в предыдущем материале, добавлен класс li.active для активного пункта (ссылка на текущую страницу).

Сброс и установка стилей по умолчанию

Избавляемся от стилей для списков, назначенных браузером (или шаблоном) по умолчанию.

Для этого используем класс my_menu . Кроме того прописываем для него общие стилевые правила, которые будут применяться ко всем меню, даже если будет измененна тема оформления.

Здесь же можно задать размеры и другие свойства шрифта, если они отличаются от основных.

Цветовое оформление

Прежде чем прописывать стили, составляем список объектов к которым обычно применяется цветовое оформление:

  • Цвет фона меню
  • Цвет и фон ссылки. При оформлении пунктов меню стилевые правила применяются непосредственно к ссылкам, т.е тегу a
  • Цвет и фон ссылки при наведении курсора
  • Цвет и фон активной ссылки
Примечание

На практике не обязательно применять все стили, достаточно лишь некоторые. Например при наведении иногда достаточно изменение только цвета ссылки или добавить подчеркивание.

  • Если возникнет необходимость к определенным пунктам меню добавить подпункты, т.е. сделать меню многоуровневым, то конструкция .menu_color > ul > li > a позволит ограничить применение стилей только к пунктам меню первого уровня. Для подменю можно будет прописать другие стили оформления.
  • Использование прозрачности при задании цвета фона — background: rgba(0, 0, 0, 0.1) . Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона меню, фон активного пункта и подсветка пунктов при наведении изменятся автоматически. Впрочем, ничто не мешает вам задать понравившиеся цвета явно.

Цвет фона меню задавать не обязательно, если он наследуется от родительского блока.

Разделители пунктов

Стили привязываем к классу .menu_color , т.к. это элемент оформления, а не разметки.

Конструкция .menu_color>ul>li+li>a используется для присвоения стилей всем пунктам основного меню, кроме первого. Таким образом убирается верхняя рамка первого пункта меню.

Если в этом нет необходимости — заменяем на .menu_color>ul>li>a

Повторяем тот же трюк с использованием rgba. Цвета для верхней границы и тени заданы полупрозрачными — черный 15% прозрачности и белый 10% соответственно.

Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона, то цвет рамки и тени изменится автоматически!

Выпадающее меню (многоуровневое)

До этого момента рассматривалось простое одноуровневое меню. Как показывает практика, очень часто, через какое-то время возникает необходимость к одному или нескольким основным пунктам добавить подпункты. Поэтому:

Изначально любое меню нужно создавать как многоуровневое!

В последние годы реально-многоуровневые меню уходят в прошлое. Двух уровней, обычно, вполне достаточно, остальные — оформляются отдельным дополнительным меню.

В многоуровневом меню один или несколько пунктов могут содержать вложенные меню с подпунктами, которое в исходном состоянии скрыто (не обязательно, но будем рассматривать именно этот вариант). При наведении на родительский пункт осуществляется вывод подменю.

За основу взят код предыдущего примера. К одному из пунтков добавлен вложенный список второго уровня.

HTML-код 2-х уровневого меню:

Добавлены классы li.parent — родительский тег, содержащий подменю, и ul.sub-menu — вложенный список выпадающего меню.

Разбиваем на несколько этапов:

  • Оформление
  • Скрыть в исходном состоянии
  • Вывод при наведении на родительский пункт

Цветовое оформление

Чтобы не усложнять код, размеры и отступы оставлены те же, что и в основном меню.

Позиционирование и скрытие

Позиционирование осуществляется относительно родительского li.parent . (Именно для этого при сбросе и установке для него было задано position: relative; )

В зависимости от расположения основного меню (левая/правая боковая колонка), подменю может выпадать как вправо, так и влево. Поэтому для определения стилевых правил используем класс родительского блока .sidebar_left (В исходном html-коде класс не указан, т.к. к коду меню отношения не имеет).

Информация

Если у родительского блока нет класса, или он применяется как к правой так и к левой колонкам — нужно этот класс добавить к тегу nav.menu_color.sidebar_left .

Подменю выпадающеее влево

Если навигационное меню расположено в правой колонке, то будет логично если подменю выпадает слева. В противном случаее оно может оказаться за пределами экрана.

Аналогично с предыдущим примером привязываем стили к родительскому блоку правой колонки .sidebar_right .

Вы спросите, для чего все эти сложности? Да, действительно, можно просто переписать стили для правой колонки без всяких дополнительных классов. и делать это каждый раз, когда по тем или иным причинам нужно будет переместить (или скопировать) меню из одной колонки в другую .

Цель — универсальность! Вы один раз прописываете код, а потом размещаете меню где хотите и оно будет работать правильно!

Простая анимация

Что мы будем анимировать. В данном случае, эффекты довольно простые:

  • Плавное изменение цвета и фона пунктов при наведении
  • Плавное появление выпадающего меню

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

Для задержки изменения состояния при hover-эффекте (эффект перехода) используется свойство CSS3 — transition .

Использован упрощенный синтаксис. Также добавлены нестандартные свойства для различных типов браузеров.

Переопределение существующих стилей:

А вот с плавным появленем подменю проблема .

Дело в том, что использовать display: none; для того чтобы скрыть подменю нельзя — анимация работать не будет. Поэтому рассмотрим другой способ.

Скрытие подменю. Вариант 2

Альтернативным способом является смещение меню в исходном состоянии за пределы экрана + полная прозрачность.

Раздвижное меню-аккордеон

Несколько слов вступления

В данном примере рассмотрена технология создания аккордеон-меню, раскрывающегося по hover .

Я бы не рекомендовал без необходимости использовать такое меню на сайте. Элементы страницы не должны жить своей жизнью (хлопающие как простыни на ветру подменю, раскрывающиеся аккордеоны, если его не аккуратно задеть мышкой .

Аккордеон должен раскрываться по click , а это уже JS. А рассмотрение javascript выходит за рамки раздела HTML/CSS.

Попробуем создать аккордеон-меню из простого выпадающего меню, внеся минимальные изменения в код разметки и стили.

Добавлен класс my_accordion к классу родительского контейнера, а класс .sub-menu заменен на .sub-accordion-menu . Можно было бы не заменять, а просто переопределить, но это усложнит пример для понимания.

Стили для выпадающего меню были привязаны к классу .sub-menu , который мы заменили на .sub-accordion-menu . Чтобы не дублировать стилевые правила — группируем классы.

Группирование позволяет установить группу свойств сразу для нескольких селекторов и классов, что делает код более читабельным.

Изменения кода — минимальные! Мы просто через запятую дописали новые классы к предыдущему примеру:

После этого добавим стили, для закрытого и раскрытого аккордеона:

Примечание.
Почему было использовано свойство max-height , а не height ? Потому что мы не знаем высоту раскрывающегося подменю, а при использовании значения height: auto — анимация не срабатывает.

Горизонтальное меню

По структуре горизонтальное меню ни чем не отличается от вертикального, html-код одинаковый. Теоретически, получить горизонтальное меню из вертикального можно заменой/добавлением класса содержащего контейнера.

Чтобы не усложнять разметку и оформление, последовательно создадим горизонтальное выпадающее меню с нуля, со своими классами.

В итоге наше меню будет выглядеть так:

За основу возьмем код вертикального выпадающего меню и заменим классы:

Что было сделано:
  1. Сброс стилей по умолчанию для тега ul
  2. Создание горизонтального меню, путем присвоения тегам li , содержащим пунткы основного меню, свойства float: left
  3. Установка отступов для пунктов меню

Конструкция .hz_menu > li распространяется только на пункты основного меню и не затрагивает выпадающее, в то время как .hz_menu li a задается для всех пунктов. Некоторые свойства, специфичные для подменю, будут переопределены в дальнейшем.

Разметка выпадающего меню

Рассмотрим некоторые особенности:

  • Как было видно из html-кода, выпадающее меню обернуто в дополнительный контейнер div.dropdown_menu . Для чего? В принципе, можно вполне обойтись и без него, но эта обертка дает некоторые дополнительные возможности оформления. В частности, возможность задать отступ от основного меню.
    Если задать отступ непосредственно для тега ul без обертки, при перемещении курсора от основного пункта к подпункту hover-эффект прервется и подменю пропадет . Дополнительный контейнер обеспечивает, в данном случае, отсутствие разрыва.
  • Для подпункт определено правило white-space: nowrap . Дело в том что абсолютно позиционированное подменю имеет максимальную ширину родительского пункта, и, соответственно, текст подпунктов будет переноситься на новую строку. Это не очень удобно при коротких названиях основных пунктов.
    Данное правило предотвращает перенос. Как альтернатива (дополнение), минимальная ширина подменю была задана явно.

Оформление

Перед тем как заняться цветовым оформлением, необходимо добавить еще несколько стилевых правил разметки. Я специально перенес их в офомление, чтобы был понятнее смысл.

Если основному контейнеру назанчить цвет фона, то мы его не увидим по одной простой причине:

Теги li , которым присвоено float: left , выпадают из основного потока, их для основного контейнера как-бы не существует, поэтому он «схлопывается» и имеет высоту 0. Соответственно, никакого цветового оформления мы не увидим.

Теперь контейнер будет вести себя более дружелюбно и можно его оформлять

Здесь все достаточно очевидно. Единственное, cursor: default , следовало бы перенести в разметку, чтобы не привязывать к классу цветового оформления.

Для выделения активного пункта меню была применена тень.

На этом цветовое оформление можно считать завершенным. Теперь с легкостью можно подкорректировать цветовую гамму, или создать несколько классов для разных вариантов оформления.

Дополнительно

Необязательные стилиевые правила. Первое задает вертикальные разделители между пунктами (аналогично вертикальному меню), второе — дополнительный маркер для родительского пункта.

www.wantweb.ru

Создание меню html / css

Основы верстки

Чаще всего меню создается на основе не упорядоченных списков ul. В каждый пункт li вкладывается гиперссылка a.

Можно создавать меню и на основе блоков div, таблиц table или списков определений dl.
Но традиционной является конструкция ul.

Код простейшего меню будет выглядеть так:

<ul>
  <li><a href="#/">пункт 1</a></li>
  <li><a href="#/">пункт 2</a></li>
  <li><a href="#/">пункт 3</a></li>
  <li><a href="#/">пункт 4</a></li>
  <li><a href="#/">пункт 5</a></li>
</ul>
×
Примечание

В процессе разработки удобно указывать адрес гиперссылки — #/. Во-первых, она никуда не ведет, а во-вторых — не происходит перехода к началу страницы.

Целью гиперссылки будет соответствующая страница вашего сайта или внешняя ссылка. Адрес внутренней страницы может быть как абсолютным, так и относительным. Внешней ссылки — только абсолютный. (Если забыли — смотрите Абсобютные и относительные ссылки).

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

Поэтому предварительно нужно создать файл, например my-menu.css, и подключить его. 

<!-- Подключение таблицы стилей -->
 
<!DOCTYPE html>
<html>
<head>
     ...
     <title>Создание меню</title>
     <link rel="stylesheet" href="css/MAIN.css" type="text/css" />
     <link rel="stylesheet" href="css/my-menu.css" type="text/css" />
     ...
</head>
<body>
...
</body>
</html>

Позже код можно будет перенести в общий файл, а этот удалить (или отключить).

Как прописываются стилевые правила для меню

Необходимо создать классы, и прописывать стили уже для них. Потому что если задавать стили непосредственно для тегов, например:

/* Не желательно! */
ul li a {color: #f00;}

то это правило будет распространяться и на все ссылки, включенные в списки за пределами меню! Кроме того, на сайте может быть несколько меню различного оформления.

Вторая причина, по которой желательно работать с классами, а не с тегами напрямую — возможность разбить стили по группам. За каждую тематическую группу стилей будет отвечать свой класс.

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

Каким тегам нужно присваивать классы

Хороший вопрос. Для начала, неплохо создать дополнительный контейнер-обертку и присвоить класс ему.

Да, это дополнительная разметка, но оформлять меню будет гораздо удобнее. Кроме того, если в качестве контейнера использовать не div, а nav, то верстка будет более семантической (осмысленной) и удобной для поисковых систем (ПС), что является несомненным плюсом. Второй класс присваиваем тегу ul.

<nav>
  <ul>
    <li><a href="#/">пункт 1</a></li>
    <li><a href="#/">пункт 2</a></li>
    <li><a href="#/">пункт 3</a></li>
    <li><a href="#/">пункт 4</a></li>
    <li><a href="#/">пункт 5</a></li>
  </ul>
</nav>

Почему именно так?

Присвоение класса .menu_color тегу nav дает больше возможности для оформления, чем присовение его тегу ul, а класс .my_menu отвечает только за разметку меню и никакого отношения к содержащему контейнеру иметь не должен.

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

Какие имена должны быть у классов

Осмысленные. В идеале, любое имя класса должно давать представление об объекте и назначении. В приведенном выше примере используются классы nav.menu_color и ul.my_menu.

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

×
Внимание!

Старайтесь выбирать имена для классов не только внятные, но и уникальные. В противном случае они могут конфликтовать с уже существующими классами.

Имеено по-этому я выбрал класс .my_menu, так как на сайте уже есть класс .menu со своими стилями. 

Это то, чем никогда не озадачиваются начинающие верстальщики, а опытные часто пренебрегают … А потом, когда нужно внести изменения в уже созданное меню чтобы адаптировать его для другого сайта, или вывести в другой позиции — долго и нудно переделывают.

На самом деле, все очень просто. Изначально, на этапе создания нужно группировать стили тематически и включать их в соответствующие классы.

Например, за цветовое оформление у нас отвечает класс .menu_color

/* === Группа цветового оформления === */
 
/* Цвет фона менд */
.menu_color {
  background: gray;
}
/* Оформление пункта меню */
.menu_color > ul > li > a {
  background: transparent;
  color: #f5f5f5;
}
...
/* === Группа разметки основного меню === */ 
 
/* Сброс и установка стилей по умолчанию */
.my_menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Разметка для пункта меню */
.my_menu li a {
  display: block;
  margin: 0;
  padding: 12px 20px;
  text-decoration: none;  
}

Т.е. все стили, определяющие цветовое оформление того или иного элемента меню, должны быть привязаны к классу .menu_color, а стили отвечающие за разметку — соответственно .my_menu.

При необходимости, для тега nav также можно добавить дополнительный класс, чтобы не залезать на территорию «цветового оформления» …

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

Простое вертикальное меню

Исходный html-код меню будет выглядеть так:

<nav>
  <ul>
    <li><a href="#/">пункт 1</a></li>
    <li><a href="#/">пунтк 2</a></li>
    <li><a href="#/">пункт 3</a></li>
    <li><a href="#/">пункт 4</a></li>
    <li><a href="#/">пункт 5</a></li>
  </ul>
</nav>

Кроме основных классов, рассмотренных в предыдущем материале, добавлен класс li.active для активного пункта (ссылка на текущую страницу).

Сброс и установка стилей по умолчанию

Файл my-menu.css

/* Убираем маркеры и отступы */
.my_menu {
  list-style:none;
  margin:0;
  padding:0;
}
.my_menu li {
  margin:0;
  padding:0;
  position:relative;
}
/* Общие правила для пунктов меню */
.my_menu li a {
  display:block;
  margin:0;
  padding:12px 20px;
  text-decoration: none;
}
/*Наведение на активный пункт меню - курсор обычный */
.my_menu li.active > a:hover {
  cursor: default;
}

Цветовое оформление

×
Примечание

На практике не обязательно применять все стили, достаточно лишь некоторые. Например при наведении иногда достаточно изменение только цвета ссылки или добавить подчеркивание.

/* === Цветовое оформление menu_color === */
.menu_color {
  background:#555;
}
/* Оформление пункта */
.menu_color > ul > li > a {
  color:#999;
  background: rgba(0, 0, 0, 0);
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover {
  color: #bbb;
  background: rgba(0, 0, 0, 0.1);
}
/* Активный пункт */
.menu_color > ul > li.active > a,
.menu_color > ul > li.active > a:hover {
  color:#fff;
  background:rgba(0, 0, 0, 0.4);
}

Пояснения:

  • Если возникнет необходимость к определенным пунктам меню добавить подпункты, т.е. сделать меню многоуровневым, то конструкция .menu_color > ul > li > a позволит ограничить применение стилей только к пунктам меню первого уровня. Для подменю можно будет прописать другие стили оформления.
  • Использование прозрачности при задании цвета фона — background: rgba(0, 0, 0, 0.1). Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона меню, фон активного пункта и подсветка пунктов при наведении изменятся автоматически. Впрочем, ничто не мешает вам задать понравившиеся цвета явно. 
×
Замечание

Цвет фона меню задавать не обязательно, если он наследуется от родительского блока.

Разделители пунктов

/* Разделитель пунктов меню */
.menu_color > ul > li + li > a {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}

Повторяем тот же трюк с использованием rgba. Цвета для верхней границы и тени заданы полупрозрачными — черный 15% прозрачности и белый 10% соответственно.

Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона, то цвет рамки и тени изменится автоматически!

До этого момента рассматривалось простое одноуровневое меню. Как показывает практика, очень часто, через какое-то время возникает необходимость к одному или нескольким основным пунктам добавить подпункты. Поэтому:

Изначально любое меню нужно создавать как многоуровневое!

В последние годы реально-многоуровневые меню уходят в прошлое. Двух уровней, обычно, вполне достаточно, остальные — оформляются отдельным дополнительным меню.

HTML-код 2-х уровневого меню:

<nav>
    <ul>
        <li><a href="#/">пункт 1</a></li>
        <li><a href="#/">родительский пункт 2</a>
            <ul>
                <li><a href="#/">дочерний подпункт 1</a></li>
                <li><a href="#/">дочерний подпункт 2</a></li>
            </ul>
        </li>
        <li><a href="#/">пункт 3</a></li>
        <li><a href="#/">пункт 4</a></li>
        <li><a href="#/">пункт 5</a></li>
    </ul>
</nav>

Добавлены классы li.parent — родительский тег, содержащий подменю, и ul.sub-menu — вложенный список выпадающего меню.

Цветовое оформление

/* Оформление sub-menu */
.menu_color .sub-menu {
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
}
/* Офррмление подпунктов */
.menu_color .sub-menu li a{
  color: #555;
  background: rgba(0, 0, 0, 0);
}
/* Офррмление подпунктов при наведении */
.menu_color .sub-menu li a:hover{
  color: #fff;
  background: #555;
}
/* Разделитель для пунктов sub-menu */
.menu_color .sub-menu > li + li > a {
  border-top: 1px solid #fff;
  box-shadow: 0 -1px 0 #ddd;
  padding-left: 40px  /* Добавляем отступ для подпунктов */
}

Чтобы не усложнять код, размеры и отступы оставлены те же, что и в основном меню. 

Позиционирование и скрытие

Позиционирование осуществляется относительно родительского li.parent. (Именно для этого при сбросе и установке для него было задано position: relative;)

/*Общие*/
.my_menu .sub-menu {
  display: none;
  position: absolute;
  top: 0;
  min-width: 200px;
  z-index: 9999;
} 

Вывод

В зависимости от расположения основного меню (левая/правая боковая колонка), подменю может выпадать как вправо, так и влево. Поэтому для определения стилевых правил используем класс родительского блока .sidebar_left (В исходном html-коде класс не указан, т.к. к коду меню отношения не имеет). 

/* Вывод */
.my_menu .parent:hover .sub-menu {
  display: block;
  top: 4px;
}
/* со смещением вправо */
.sidebar_left .my_menu .parent:hover .sub-menu {
  left: 100%;
  margin-left: -10px;
}
×
Информация

Если у родительского блока нет класса, или он применяется как к правой так и к левой колонкам — нужно этот класс добавить к тегу nav.menu_color.sidebar_left.

Если навигационное меню расположено в правой колонке, то будет логично если подменю выпадает слева. В противном случаее оно может оказаться за пределами экрана.

/* Смещение влево */
.sidebar_right .my_menu .parent:hover .sub-menu {
  right: 100%;
  left: auto;
  margin-right: -5px;
}

Простая анимация

Что мы будем анимировать. В данном случае, эффекты довольно простые:

Переопределение существующих стилей:

/* Оформление пункта */
.menu_color >  ul >  li >  a {
  color: #999;  
  background: rgba(0, 0, 0, 0);
 
  /* добавляем код */
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
 
/* Офррмление подпунктов */
.menu_color .sub-menu li a{
   color: #555;
   background: rgba(0, 0, 0, 0);
 
  /* добавляем код */
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
 

А вот с плавным появленем подменю проблема …

Дело в том, что использовать display: none; для того чтобы скрыть подменю нельзя — анимация работать не будет. Поэтому рассмотрим другой способ.

Скрытие подменю. Вариант 2

Альтернативным способом является смещение меню в исходном состоянии за пределы экрана + полная прозрачность.

/* Переопределение sub-menu*/
.my_menu .sub-menu {
  display: block; /* переопределено */
  position: absolute;
  top: 0;
  width: 200px;
  z-index: 9999;
 
  /* Добавить */
  opacity: 0;
  -webkit-transition: opacity .5s, top .7s;
  -moz-transition: opacity .5s, top .7s;
  -o-transition: opacity .5s, top .7s;
  transition: opacity .5s, top .7s;
}
/* Смещение за экран */
.my_menu .sub-menu {
  left: -3000px;
}
/* Переопределяем эффект отображения при наведении*/
.my_menu .parent:hover > .sub-menu {
  display: block;
  top: 4px;
 
  /* Добавить */
  opacity: 1;
}

Раздвижное меню-аккордеон 

×
Несколько слов вступления

В данном примере рассмотрена технология создания аккордеон-меню, раскрывающегося по hover.

Я бы не рекомендовал без необходимости использовать такое меню на сайте. Элементы страницы не должны жить своей жизнью (хлопающие как простыни на ветру подменю, раскрывающиеся аккордеоны, если его не аккуратно задеть мышкой …

Аккордеон должен раскрываться по click, а это уже JS. А рассмотрение javascript выходит за рамки раздела HTML/CSS…

Попробуем создать аккордеон-меню из простого выпадающего меню, внеся минимальные изменения в код разметки и стили.

Добавлен класс my_accordion к классу родительского контейнера, а класс .sub-menu заменен на .sub-accordion-menu. Можно было бы не заменять, а просто переопределить, но это усложнит пример для понимания.

<nav>
    <ul>
        <li><a href="#/">пункт 1</a></li>
        <li><a href="#/">родительский пункт 2</a>
            <ul#/">дочерний подпункт 1</a></li>
                <li><a href="#/">дочерний подпункт 2</a></li>
            </ul>
        </li>
        <li><a href="#/">пункт 3</a></li>
        <li><a href="#/">пункт 4</a></li>
        <li><a href="#/">пункт 5</a></li>
    </ul>
</nav>
/* === Группировка классов === */
 
/* Убираем маркеры и отступы */
.my_menu, .sub-menu, 
.sub-accordion-menu {
  list-style:none;
  margin:0;
  padding:0;
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover,
.my_menu .parent .sub-accordion-menu li a:hover {
  color: #bbb;
  background: rgba(0, 0, 0, 0.1);
}
/* Разделитель пунктов меню */
.menu_color > ul > li + li > a,
.menu_color .sub-accordion-menu li > a {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}
 
 

После этого добавим стили, для закрытого и раскрытого аккордеона:

/* === Закрытый ===*/
.sub-accordion-menu {
  display: block;
  position: static;
  width: auto;
  overflow: hidden;
  border: none;
  margin: 0!important; 
  max-height: 0;   /* Скрываем выпадающее подменю */
  transition: max-height 1s;  /* Задержка раскрытия */
}
/* === Открытый ===*/
.sub-accordion-menu {
  max-height: 1000px;
}
.sub-accordion-menu > li > a {
  padding-left: 40px;  /* Добавляем отступ для подпунктов */
}

Примечание.
Почему было использовано свойство max-height, а не height? Потому что мы не знаем высоту раскрывающегося подменю, а при использовании значения height: auto — анимация не срабатывает.

Горизонтальное меню

По структуре горизонтальное меню ни чем не отличается от вертикального, html-код одинаковый. Теоретически, получить горизонтальное меню из вертикального можно заменой/добавлением класса содержащего контейнера.

Чтобы не усложнять разметку и оформление, последовательно создадим горизонтальное выпадающее меню с нуля, со своими классами.

В итоге наше меню будет выглядеть так:

За основу возьмем код вертикального выпадающего меню и заменим классы:

<nav>
  <ul>
    <li><a href="#/">punkt 1</a></li>
    <li><a href="#/">dropdown</a>
      <div>
        <ul>
          <li><a href="#/">sub punkt 1</a></li>
          <li><a href="#/">sub punkt 2</a></li>
        </ul>
      <div>
    </li>
    <li><a href="#/">punkt 3</a></li>
    <li><a href="#/">active</a></li>
    <li><a href="#/">punkt 5</a></li>
  </ul>
</nav>

Разметка

/* === Разметка основного меню === */
.hz-bar ul {
 list-style: none;
 margin:0;
 padding:0;
}
.hz_menu > li {
 float: left;
 margin:0;
 padding:0;
 position:relative;
}
.hz_menu li a {
 display:block;
 margin:0;
 padding:15px 20px;
 text-decoration: none;
}
Что было сделано:
  1. Сброс стилей по умолчанию для тега ul
  2. Создание горизонтального меню, путем присвоения тегам li, содержащим пунткы основного меню, свойства float: left
  3. Установка отступов для пунктов меню
Пояснения:

Конструкция .hz_menu > li распространяется только на пункты основного меню и не затрагивает выпадающее, в то время как .hz_menu li a задается для всех пунктов. Некоторые свойства, специфичные для подменю, будут переопределены в дальнейшем.

Разметка выпадающего меню

/* === Разметка выпадающего подменю === */
.dropdown_menu {
 display: block;
 position: absolute;
 left: -3000px;
 top: 100%;
}
.dropdown_menu > ul {
 border: 1px solid;
 margin-top: 10px;  /* отступ от основного меню */
 padding: 10px 1px;
 min-width: 140px;
 opacity: 0;
 transition: opacity .5s; /* анимация прозрачности */
}
.dropdown_menu li a {
 white-space: nowrap; /* если не очень длинные заголовки */
 z-index: 9999;
 padding: 10px 20px;
}
.parent_dropdown:hover .dropdown_menu {
 left: 0px;
}
.parent_dropdown:hover .dropdown_menu ul {
 opacity: 1;
}

Рассмотрим некоторые особенности:

  • Как было видно из html-кода, выпадающее меню обернуто в дополнительный контейнер div.dropdown_menu. Для чего? В принципе, можно вполне обойтись и без него, но эта обертка дает некоторые дополнительные возможности оформления. В частности, возможность задать отступ от основного меню.
    Если задать отступ непосредственно для тега ul без обертки, при перемещении курсора от основного пункта к подпункту hover-эффект прервется и подменю пропадет … Дополнительный контейнер обеспечивает, в данном случае, отсутствие разрыва.
  • Для подпункт определено правило white-space: nowrap. Дело в том что абсолютно позиционированное подменю имеет максимальную ширину родительского пункта, и, соответственно, текст подпунктов будет переноситься на новую строку. Это не очень удобно при коротких названиях основных пунктов.
    Данное правило предотвращает перенос. Как альтернатива (дополнение), минимальная ширина подменю была задана явно.

Оформление

Перед тем как заняться цветовым оформлением, необходимо добавить еще несколько стилевых правил разметки. Я специально перенес их в офомление, чтобы был понятнее смысл.

Если основному контейнеру назанчить цвет фона, то мы его не увидим по одной простой причине:

Теги li, которым присвоено float: left, выпадают из основного потока, их для основного контейнера как-бы не существует, поэтому он «схлопывается» и имеет высоту 0. Соответственно, никакого цветового оформления мы не увидим.

Решение

/* Предотвращаем схлопывание */
.hz-bar:after {
 content: '';
 display: table;
 clear: both;
}

Теперь контейнер будет вести себя более дружелюбно и можно его оформлять

/* === Оформление меню === */
.menu_bordo {
 background: #7D0000;
}
.menu_bordo .hz_menu > li > a {
 color: #DBE6B7;
}
.menu_bordo .hz_menu > li > a:hover {
 color: #fff;
}
.menu_bordo .hz_menu .active a{
 box-shadow: inset 0 15px 15px rgba(0, 0, 0, 0.2);
 color: #fff;
 cursor: default;
}

Здесь все достаточно очевидно. Единственное, cursor: default, следовало бы перенести в разметку, чтобы не привязывать к классу цветового оформления.

Для выделения активного пункта меню была применена тень.

/* === Оформление выпадающего подменю === */
.menu_bordo .dropdown_menu > ul {
 background: #fff;
 border-color: #ddd;
}
.menu_bordo .dropdown_menu > ul > li > a {
 color: #555;
}
.menu_bordo .dropdown_menu > ul > li > a:hover {
 background: #7D0000;
 color: #fff;
}

На этом цветовое оформление можно считать завершенным. Теперь с легкостью можно подкорректировать цветовую гамму, или создать несколько классов для разных вариантов оформления.

Дополнительно

Необязательные стилиевые правила. Первое задает вертикальные разделители между пунктами (аналогично вертикальному меню), второе — дополнительный маркер для родительского пункта.

/* Дополнительно. Разделители пунктов + маркер */
.hz_menu > li + li > a {
 border-left: 1px solid rgba(255, 255, 255, 0.1);
 box-shadow: -1px 0 0 rgba(0, 0, 0, 0.15);
}
.parent_dropdown > a:after {
 display: inline-block;
 padding: 1px 0 0 3px;
 content: "\25BC ";
 font-size: 10px;
 vertical-align: top;
}

Здесь вы можете скачать Код примера горизонтального меню

Как сделать плавное выпадающее меню на CSS • ЭРА ТЕХНОЛОГИЙ

Приветствую! Если ты начинающий верстальщик, то рано или поздно ты столкнешься с тем, что захочешь как-то оживить свои страницы, сделать их хоть немного интерактивными. Как нельзя лучше тут тебя смогут выручить CSS анимации. Но нужно знать, где и как их применять.

Сегодня я расскажу, как сделать выпадающее меню на чистом CSS и как добавить ему плавности с помощью CSS анимации. Если ты не знаешь, что такое CSS анимация, то самое время ознакомиться с азами.

Верстаем меню HTML + CSS

Для начала, чтобы нам было с чем работать, давайте сверстаем простое одноуровневое меню. Не будем сильно заморачиваться с дизайном, для наглядности хватит и этого:

Что мы имеем? Самый обыкновенные ненумерованный список с идентификатором «top_menu» и со ссылками, обернутыми в элементы этого самого списка. Все банально и просто. При наведении пункты меню меняют цвет… это все вы уже знаете и понимаете, как это сделать (я надеюсь).

Добавляем меню второго уровня

Чтобы сделать многоуровневое меню, нам нужно добавить второй ненумерованный список внутрь первого. Думаю, это вы проходили где-то на начальных уроках. А также то, что его вставить нужно не просто внутри нашего списка, а именно внутри элемента списка, то есть тега «li», сразу после закрывающего тега «a».

Позиционируем вложенные списки абсолютно по отношению к «li», в которые они вложены. А все «li» верхнего уровня позиционируем относительно (relative). Чтобы выпадающее меню находилось СРАЗУ же после нашего меню верхнего уровня, ему (выпадающему – “inner_menu”) нужно задать

position: absolute;
top: 100%;

То есть отступ от верхней границы родителя будет равен высоте родителя. Очень логично, по-моему.

Помимо позиционирования нужно придать выпадающему меню стиль как у меню верхнего уровня. Яблочко от яблоньки, как говорится…

Как видите, наше выпадающее меню пока выглядит не выпадающим, а выпавшим и висящим. Но ничего, это мы скоро исправим.

Как сделать выпадающее меню действительно выпадающим

Нет ничего проще! Чтобы наш вложенный список сделать выпадающим меню, его нужно просто скрыть! А потом открывать только тогда, когда курсор мыши будет проноситься над пунктом меню верхнего уровня, который содержит в себе выпадающее меню. Звучит, может быть, немного сложно, но на самом деле это решается буквально несколькими строчками кода.

Выпадающему меню добавляем:

display: none;

А чтобы его отобразить, нужно прописать:

#top_menu > li:hover > ul {
   display: block;
}

Что нам говорит это целое скопище селекторов? Читаем с конца. Мы задаем стили (видмости) для списка второго уровня, который лежит внутри элемента списка первого уровня, но стили эти сработают только в том случае, если мы наведем мышкой (ховер) на элемент «li» в который вложен наш список второго уровня.

Надеюсь, я выразился понятно. Если нет, попробуйте прочитать несколько раз. А еще лучше просто понимать это, глядя на код. Смотрим, что у нас получилось:

Да, мы вроде бы добились того, чего хотели – мы сделали выпадающее меню, самое настоящее выпадающее меню, мать его! Но ему чего-то не хватает. А знаете чего? Плавности! Ведь все выглядит так, как будто меню не выпадает, а просто появляется. Причем очень резко, моментально даже, я бы сказал.

Ну что же, давайте еще немного поколдуем над ним.

Плавное выпадающее меню – это просто

Итак, давайте сделаем плавное выпадающее меню на чистом CSS. Зачем это делать? Потому что люди любят, когда все плавненько и мягонько… и это выглядит красиво. Будет плюс к юзабилити вашего сайта. Погнали!

Запомните, вы можете анимировать только точные математические величины, например 50px и 300px, 0 и 100%, 0,5 и 1,0 и так далее. В нашем случае мы не сможем анимировать два состояния нашего выпадающего меню (display:none; и display:block;).

Но мы можем заменить их на прозрачность – opacity:0 и opacity:1. И задать время в течение которого наше меню будет проявляться из прозрачного состояния. Да, это действительно сработает, однако это не совсем тот эффект, который вы возможно ожидали. Поэтому давайте сделаем немного сложнее. Но это того стоит, поверьте.

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

Как видно из кода, мы анимировали высоту элементов выпадающего списка и их прозрачность. Этого оказалось достаточно для того, чтобы сделать красивую плавную анимацию выпадающего меню.

Что нам понадобилось для анимации? Два состояния пунктов нашего меню, а также свойство transition, которое проинтерполировало эти состояния, то есть заполнило все промежуточные значения за отведенный промежуток времени. Вот и все!

Еще проще можно было бы сделать с применением jQuery, но мы же оговорили сначала, что будем сегодня работать с чистым CSS. А еще красивее можно было сделать, добавив к анимациям кривые Безье, однако эта тема немного выходит за рамки сегодняшней. Но мы к ней обязательно вернемся позже.

Вывод:

Теперь вы можете похвастаться своим друзьям и близким, что знаете, как сделать выпадающее меню на чистом CSS. Это действительно полезный навык, который вам еще не раз пригодится. Ну, сами посудите, много ли вы видели сайтов со статичным меню? Нет, большинство сайтов имеют именно выпадающее меню.

Кстати это был мой первый урок по CSS. Опишите, как вам? Понятно все объяснил или нужно еще подробнее разжевывать? И стоит ли вообще продолжать писать статьи на тему лайфхаков в CSS?

Спасибо за внимание и до скорых встреч!

Создание выпадающего (drop-down) меню, используя только HTML и CSS, без jQuery

Сразу говорю, здесь мы не будем рассматривать меню с различными эффектами на jQuery (типо выпадания, выдвижения и прочее).

Только CSS и HTML, невероятно, но этого вполне достаточно для создания весьма неплохих менюшек.

HTML

Обычно менюшки создаются при помощи <ul>-списков. Кстати говоря, если на WordPress меню будет сгенерировано функцией wp_list_categories или функцией wp_nav_menu(), то тоже всё будет отлично работать. Главное не напутать с классами и айдишниками элементов списка. Это предельно важно.

Пока что я покажу вам только как сделать менюшку с одним уровнем вложенности, в данном случае главное — уловить саму суть.

<ul>
	<li><a href="#">WordPress</a>
		<ul>
		<li><a href="#">плагины</a></li>
		<li><a href="#">темы</a></li>
		<li><a href="#">хаки</li>
		</ul>
	</li>
	<li><a href="#">Joomla</a>
		<ul>
		<li><a href="#">компоненты</a></li>
		<li><a href="#">модули</a></li>
		</ul>
	</li>
	<li><a href="#">Drupal</a></li>
</ul>

Пунктов может быть сколько угодно, выпадающих списков тоже, просто создаёте их по шаблону, подставляя лишь вместо символов # свои ссылки.

CSS

Здесь тоже всё довольно просто, к тому же часть кода ниже я использовал чисто для оформления, свой цвет фона, цвет ссылок и прочее (важное отмечено /* (!) */).

#my-drop-down-menu ul, ul#my-drop-down-menu{
	list-style:none;
}
 
#my-drop-down-menu{ 
	position:relative; /* (!) */
	z-index:3;
	width:300px;
	height:20px;
	margin:0 auto;
}
 
#my-drop-down-menu li.list{
	float:left; /* (!) */
	display:block; /* (!) */
	margin:0 5px;
}
 
#my-drop-down-menu a{
	color: #61ADB0;
	text-decoration:none;
}
 
#my-drop-down-menu ul.child{ 
	background: #463935;
	padding:5px;
	position:absolute; /* (!) */
	top:29px; /* (!) */
	left:-9999px; /* (!) */
	z-index:3;
	border-top: 1px solid #3A2E2B;
	-moz-box-shadow: 0px 3px 7px #251d1b;
	-webkit-box-shadow: 0px 3px 7px #251d1b;
	box-shadow: 0px 3px 7px #251d1b;
}
 
#my-drop-down-menu li:hover ul.child{
	left:auto; /* (!) */
}
 
#my-drop-down-menu li a.link{
	display:block;
	padding:5px;
}
 
#my-drop-down-menu li:hover a.link{
	background: #463935;
}

Аналогично можно добавлять ещё больше уровней вложенности, вставляя <ul> в <li>

Повторяюсь, зеленым цветом я отметил стили, которые необходимы для того, чтобы меню нормально работало (выпадало).

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Выпадающее меню на HTML / CSS без использования JavaScript

Очень часто необходимо сделать на сайте выпадающее при наведении меню. Большинство веб-девелоперов используют для этого JavaScript / Jquery. Это конечно хорошо, но такого роди задачи легко решаются с помощью HTML / CSS.

Вот простой пример HTML-кода меню:

<ul>
    <li><a href=#>Menu 1</a>
        <ul>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 2</a>
        <ul>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 3</a>
        <ul>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 4</a>
        <ul>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 5</a>
        <ul>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
        </ul>
    </li>
</ul>

Для построения меню был использован список с классом menu. Подменю сделаны списками с классом submenu.

Теперь давайте как-нибудь минимально оформим наше меню стилями:


body {
    font: 14px 'Verdana';
    margin: 0;
    padding: 0;
}
ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul:after {
    display: block;
    content: ' ';
    clear: both;
    float: none;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.menu > li > a:hover {
    background-color: black;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 37px;
    left: 0;
    background-color: white;
    border: 1px solid red;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}

Для класса submenu было установлено свойство ‘display: none’. Это позволило на спрятать наше выпадающее меню.

Теперь добавим в CSS такой код:


ul.menu > li:hover > ul.submenu {
    display: block;
}

Это позволит показывать подменю при наведении.

Вот и все. Просто и легко без JavaScript.

Меню как делать: Создание меню с помощью CSS и HTML

Создание меню с помощью CSS и HTML

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню — раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

Вертикальное меню

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент <li> нашего списка будет содержать по одной ссылке:


<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>

Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию.

Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:

#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100px;
}

Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента <a> со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.

Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.


#navbar a {
  background-color: #949494;
  color: #fff;
  padding: 5px;
  text-decoration: none;
  font-weight: bold;
  border-left: 5px solid #33ADFF;
  display: block;
}
#navbar li {
  border-left: 10px solid #666;
  border-bottom: 1px solid #666;
}

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #navbar {
        margin: 0;
        padding: 0;
        list-style-type: none;
        width: 100px;
      }
      #navbar li {
        border-left: 10px solid #666;
        border-bottom: 1px solid #666;
      }
	  #navbar a {
        background-color: #949494;
        color: #fff;
        padding: 5px;
        text-decoration: none;
		font-weight: bold;
        border-left: 5px solid #33ADFF;
		display: block;
      }
    </style>
  </head>

  <body>
  
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">Новости</a></li>
      <li><a href="#">Контакты</a></li>
      <li><a href="#">О нас</a></li>
    </ul>

  </body>
</html>
Попробовать »

При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:


#navbar a:hover {
  background-color: #666;
  border-left: 5px solid #3333FF;
}
Попробовать »

Горизонтальное меню

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

Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:


<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>

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


#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar li { display: inline; }
Попробовать »

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:


#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 2px solid #0066FF;
  border-radius: 20px 5px;
  width: 550px;
  text-align: center;
  background-color: #33ADFF;
}
#navbar a {
  color: #fff;
  padding: 5px 10px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  width: 100px;
}
#navbar a:hover {
  border-radius: 20px 5px;
  background-color: #0066FF;
}
Попробовать »

Выпадающее меню

Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:


<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>

Подпункты мы разместим в отдельном списке, вложив его в элемент <li>, который содержит родительскую ссылку относительно подпунктов. Теперь мы имеем четкую структуру нашей будущей панели навигации:


<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a>
    <ul>
      <li><a href="#">Адрес</a></li>
      <li><a href="#">Телефон</a></li>
      <li><a href="#">Email</a></li>
    </ul>
  </li>
  <li><a href="#">О нас</a></li>
</ul>
Попробовать »

Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент <li> список снова был преобразован в блочный элемент:


#navbar ul { display: none; }
#navbar li:hover ul { display: block; }

Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.


#navbar, #navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar li { float: left; }
#navbar ul li { float: none; }

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

#navbar ul {
  display: none;
  position: absolute;
  top: 100%;
}
#navbar li {
  float: left;
  position: relative;
}
#navbar { height: 30px; }
Попробовать »

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:


#navbar ul {
  display: none;
  background-color: #f90;
  position: absolute;
  top: 100%;
}
#navbar li:hover ul { display: block; }
#navbar, #navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar {
  height: 30px;
  background-color: #666;
  padding-left: 25px;
  min-width: 470px;
}
#navbar li {
  float: left;
  position: relative;
  height: 100%;
}
#navbar li a {
  display: block;
  padding: 6px;
  width: 100px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
#navbar ul li { float: none; }
#navbar li:hover { background-color: #f90; }
#navbar ul li:hover { background-color: #666; }
Попробовать »

Как составить меню на неделю

Как мы знаем, без труда не выловишь и рыбку из пруда. Это же правило действует и при составлении меню. Придётся покорпеть часок над этим нехитрым, в общем-то, заданием.

Есть и хорошие новости:

  • Затраченное на составление меню время вернётся к вам с лихвой в течение недели.
  • Это сбережёт вам кучу нервов. Ведь не нужно будет впопыхах забегать в магазин по дороге домой, не придётся натужно мучить и без того уставший мозг вопросом «Что бы сегодня приготовить?».
  • В конце месяца вы наверняка с удивлением обнаружите, что стали тратить меньше денег на еду.
  • Ваша домашняя пища станет разнообразнее и, скорее всего, вкуснее.
  • Будет проще питаться действительно сбалансированно, а не мучить организм бесконечной едой из консервных банок или всю неделю есть сваренный в понедельник борщ.

Допускаю, что плюсов наберётся ещё больше. Всё зависит от нынешнего положения вещей.

Сразу оговорюсь: в статье речь пойдёт о составлении меню ужинов, когда (я надеюсь) вся ваша семья собирается за столом. Завтраки, как правило, у всех разные. Кто-то и вовсе не успевает позавтракать дома, и подавляющее большинство обедает за его пределами.

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

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

По прошествии пары месяцев можно смело возвращаться к предыдущим вариантам меню.

Для составления меню вам понадобится:

  • Лист бумаги А4.
  • Ручка или, ещё лучше, карандаш.
  • Ваши любимые кулинарные книги (я, например, люблю книги Джейми Оливера) или кулинарные журналы, подборка вырезок с рецептами и тому подобное.
  • План вашей семьи на предстоящую неделю (если вы его не помните).
Чего делать категорически не рекомендуется

Пользоваться планшетом или компьютером для поиска рецептов. Только время потеряете.

Во-первых, даже очень интересные статьи сложно читать онлайн, не отвлекаясь на напоминания, всплывающие окна и прочее. А уж про поиск рецептов я вообще молчу…

Во-вторых, рецепты из интернета сложно потом найти в вашем и без того внушительном списке закладок.

В-третьих, от разнообразия рецептов вы растеряетесь и в итоге, как мы часто это делаем, когда выбор слишком большой, ничего не выберете вообще.

Если же у вас есть любимый блогер, рецепты которого вам нравятся, и вы давно хотели их опробовать, то советую сохранить их дедовским способом — распечатать на бумаге. Вы не будете лишний раз отвлекаться на интернет, а также, если рецепты оказались удачными, сможете поместить их в папку любимых блюд. У меня, например, тоже такая есть. Там я собираю копии рецептов, которые я опробовала в гостях, и там же, на месте, получила ксерокопию.

Если вам понравился какой-то рецепт из кулинарного журнала, то аккуратно вырежьте его и подшейте в папку, а журнал выбросьте или отдайте. Так вы избежите кипы ненужной бумаги в доме и сможете легко найти рецепт, когда он вам понадобится.

Как учесть обстоятельства вашей жизни в своём меню

Я рекомендую делать минимум один вегетарианский день в неделю, два куриных, два рыбных, один мясной и один день оставить свободным (почему свободным — об этом ниже). Ещё лучше увеличить количество вегетарианских и рыбных дней за счёт уменьшения куриных и мясных.

Если вы заранее знаете, что у вас по пятницам ресторан, то помните это и составьте меню только на шесть дней.

Если ваши дети ходят в кружки по вторникам и четвергам, то я рекомендую учесть и это. В такие дни лучше оставить время на детей, сэкономив его на готовке. Поэтому смело планируйте блюда понедельника и среды в больших порциях, которых вам хватит на два дня.

В те дни, когда вы приходите поздно (например, у вас курсы или тренировка), планируйте самые лёгкие блюда: салаты, вегетарианские горячие блюда, рыбу.

Одно из важных условий успеха: не выбирайте для будней и для воскресенья сложносочинённые блюда, которые отнимают много времени и сил. Если есть желание, включите что-то более сложное в меню на пятницу или субботу (или когда у вас свободные дни по графику).

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

Лично у меня есть правило: максимум 30–45 минут на приготовление полноценного ужина. Исключения — блюда, которые готовятся в духовке. Там вы всё почистили, нарезали, поставили в духовку и пошли по своим делам. Рецепты я подбираю (если они не моего изобретения) именно по этим критериям — вкусно, просто и быстро. Именно поэтому отдавайте предпочтение блюдам, которые готовятся в духовке.

Оставьте один день в неделе… пустым. Даже если вам не надо идти в ресторан или в гости, и вы точно будете дома. Мой опыт подтверждает: как ни планируй, всегда останутся продукты. Поэтому у меня в семье мы ввели «день остатков», который мы проводим в воскресенье (или в последний день перед очередной закупкой продуктов для нового меню). В такой день я напрягаю фантазию или просматриваю кулинарные книги, заменяя недостающие ингредиенты похожими. Иногда получаются просто шедевры, рецепты которых я выкладываю у себя в блоге вместе с меню на неделю для всей семьи.

Перед тем как сесть за стол и начать составлять список, советую заглянуть в холодильник. Что там у вас завалялось и требует срочного употребления в пищу? Именно эти продукты должны составить основу вашего меню.

Например, если у вас там лежит кочан капусты, то включите в меню салат «Коул Слоу» или щи (или и то и другое, если капусты много). Если же там лежит курица, то придумайте блюда с ней.

Если же в холодильнике мышь повесилась, то поздравляю! Вам будет намного проще составить меню, и вы сможете вписать туда всё, что душе угодно (из еды).

Переходим к самому меню

На листе бумаги напишите план. Например:

  • Понедельник: рыба.
  • Вторник: вегетарианский (на два дня).
  • Среда: остатки.
  • Четверг: щи с мясом.
  • Пятница: ресторан.
  • Суббота: курица.
  • Воскресенье: «фантазия из остатков».

Пролистайте свою подборку рецептов. Если вам нужны блюда с курицей, то воспользуйтесь указателем в конце кулинарной книги. Очень часто попадаются отличные варианты, когда вы понимаете, что в 1–2 рецептах сможете использовать все продукты, оставшиеся с этой недели, просто прикупив, например, рис и петрушку с чесноком. Такие рецепты идеальны для экономных хозяек и хозяев.

Сразу начинайте записывать в свой лист понравившиеся блюда напротив дней недели. Указывайте название блюда, название книги и номер страницы с рецептом. Если в процессе на глаза попадётся лучший вариант, то исправьте написанное. Тут советую не увлекаться. Как только у вас на листе бумаги появится план по всем дням, закругляйтесь. Сделайте закладки на понравившихся рецептах и примените их для следующей недели, когда придёт время.

Обычно стоит только начать. Со временем у вас будет всё получаться намного быстрее.

Блюда из меню недели можно варьировать на своё усмотрение и подстраивать под свои поменявшиеся планы. Так, если вам не захотелось рыбу в понедельник, то заморозьте её и приготовьте курицу. А в субботу тогда ешьте рыбу.

Единственное но: я не рекомендую размораживать продукты в микроволновке. Они становятся резиновыми.

Лучше достаньте продукты из морозильника вечером предыдущего дня и положите в холодильник, хорошо упаковав. Так они смогут не растерять своих полезных свойств. При этом учтите, что рыба и морепродукты размораживаются намного быстрее мяса и курицы. Их можно достать и утром перед выходом на работу.

И ещё: вовсе не обязательно составлять список в выходной день и начинать планирование с понедельника.

Я, например, закупаюсь во вторник, когда народа в магазинах не так много. Поэтому моё планирование тоже начинается во вторник — со свежих продуктов.

Как видите, вариантов составления меню на неделю множество. Это занятие даёт вам свободу действий, а меню можно и нужно подстраивать под ваши нужды и нужды вашей семьи.

Доброго вам здоровья!

Как сделать меню в группе ВКонтакте

ВКонтакте Архив

Вопросом, как сделать меню в группе ВКонтакте, задаются все администраторы сообществ. Оно делает группу структурированной, с удобной навигацией и красивым графическим контентом. Примечательно, что ВКонтакте — единственная социальная сеть, которая предоставляет пользователям такой удобный инструмент для работы со своими клиентами. Его преимущества поистине безграничны:

  • Привлекает внимание с помощью красиво оформленного баннера;
  • Выделяет группу среди конкурентов;
  • Рассказывает о продукте и возможных каналах связи;
  • Заменяет сайт при его отсутствии;
  • При наличии сайта обеспечивает переходы на нужные страницы;
  • Структурирует и позволяет понятно изложить всю информацию. Просто гениальное изобретение!

Создание ссылки на группу ВКонтакте с помощью упоминаний

Упоминания — еще одно удобное изобретение. Это активная ссылка на пользователя, страницу или группу. Для того, чтобы активировать эту функцию достаточно поставить значок «собачки» @ и без пробелов начать вводить название сообщества или имя пользователя в текстовом сообщении, на стене или в комментариях. Если вы все делаете правильно, то появится список подходящих под условие кандидатов, среди которых просто нужно выбрать желаемое сообщество или пользователя. В итоге, в текстовом поле те, кого упоминают, выделяются гиперссылкой.

Прежде чем упоминать где-либо свою группу, позаботьтесь о ее привлекательности для участников. Основа этого успеха — графическое меню в группе ВКонтакте, сделать которое вы сможете на основе описанной ниже пошаговой инструкции.

Digital-стратегия

Не тратите время на лишнюю работу

Бережете свои финансы

Узнаете, что делают конкуренты

Получаете комплексный анализ

Получаете пошаговый план действий

 

Создание графического меню в группе ВКонтакте

Для создания вам потребуются знание графического редактора, например, Photoshop, и языка социальной сети wiki-разметки. И хотя вам не нужно быть дизайнером или программистом, некоторое время потратить на разработку придется. Поэтому, если для вас это разовая работа, не соответствующая вашему профилю, лучше обратиться к профессиональным разработчикам, например, к нам. Если же вы хотите сделать все самостоятельно, то пошаговая инструкция, как создать меню в группе ВКонтакте вам в помощь, но прежде скажем пару слов об интерактивной обложке.

Интерактивное меню

Интерактивное меню, или, правильнее сказать, интерактивная обложка — это недавнее нововведение социальной сети. Внешне оно напоминает обложку сообществ из фейсбука, но имеет ряд особенностей. Например, в режиме онлайн на ней отображаются:

  • Три последних вступивших участника,
  • Текущее время,
  • Таймер обратного отсчета.

Как следует сделать такое интерактивное меню в группе ВКонтакте поможет специальный скрипт. И, конечно, оно не заменит традиционное полноценное меню.

Сделать красивое меню ВКонтакте: пошаговая инструкция

Создать красивое меню в группе ВКонтакте можно за 5 шагов.

Шаг 1: готовим контент

Придумайте названия пунктов для вашего каталога и подготовьте для них текстовое и графическое наполнение. Если из какого-то пункта вы хотите перенаправить пользователей на сайт, то заранее продумайте это. Определитесь со структурой, то есть в каком порядке будет располагаться перечень информации. Подберите изображение для фона, найти его можно на платных или бесплатных фотобанках.

Шаг 2: работаем в Photoshop

В Photoshop загрузите подходящий фон и напишите на нем нужные пункты. После этого нарежьте изображение с помощью инструмента «раскройка», руководствуясь данными размерами:

Сохраните файлы в формате gif.

Для главной страницы возьмите этот же фон или любой другой и напишите «Открыть меню».

Шаг 3: создаем страницы

Пора переходить в социальную сеть. В пункте «Управление сообществом» слева выберете «Разделы» и в «Настройках» включите «Материалы». Эти шаги позволят создать меню в группе ВКонтакте и перенести в него заготовленный материал.

Теперь создайте внутренние страницы. Используйте ссылку: http://vk.com/pages?oid=-XXX&p= Пункт_меню

где XXX — ID вашего сообщества, узнать который можно, щелкнув на любой пост и посмотрев на строку в браузере. В нашем примере цифры 35702496 и есть идентификационный номер группы:

Наполните страницы содержанием и сохраните ссылку на них.

Шаг 4: создаем внутреннюю часть меню

Переходите на главную страницу группы и сверху нажимайте «Свежие новости». Щелкните значок «фото» и загрузите изображения, созданные в Photoshop. Получится вот так:

Теперь, нажав на каждый пункт, вы увидите стрелочку, как на картинке в нашем примере. При ее нажатии откроется окошко, в которое нужно вставить ссылку на созданную страницу и назвать ее в соответствии с пунктами.

Если же вы направляете пользователей на сайт, то просто скопируйте ссылку на нужную страницу из браузера.

Шаг 5: делаем красивый пост

Теперь создаем пост с заготовкой из Photoshop. В поле для ввода текста вставьте ссылку на страницу с меню и прикрепите изображение. После того, как ссылка загрузится, ее нужно стереть в текстовом поле. Должно получится вот так:

Откройте пост, нажмите «Закрепить», обновите страницу и теперь вы увидите вверху группы ваше меню, нажав на которое, попадете на его содержание. Поздравляем, теперь вы являетесь обладателем красиво оформленной и структурированной группы!

Как cделать меню для группы ВКонтакте и вики разметка

Самым эффективным и удобным способом оформления группы в контакте является использование wiki-разметки. Данная разметка схожа по принципу действия с html кодом, но является более простой и понятной. Своим названием она обязана Википедии, благодаря которой многие пользователи и успели познакомиться с основными особенностями wiki-разметки.

Wiki-разметка позволяет легко и быстро оформить внешний вид группы, создавая графические таблицы и спойлеры, форматируя текст и работая с изображениями, ссылками и якорями. Вам больше не придется сутками изучать книги по html, ведь изучению wiki-разметки достаточно уделить не более часа своего времени.

Существует несколько способов, как сделать меню для группы в контакте при помощи wiki-разметки, и то, какой из этих способов выберите Вы – зависит от направленности и цели группы. Если это социально направленная группа, то лучше всего подойдет текстовое меню, т.к. оно выглядит куда более серьезно, чем графическое. Использовать изображения в своём меню лучше всего для групп развлекательного или коммерческого характера.

Работа с изображениями

Вставить картинку или фотографию в контакте при помощи wiki-разметки можно только в том случае, если это изображение есть в альбомах на сайте.

Итак, для вставки картинки заходим в альбом, копируем адрес фотографии, например photo11111_11111, и обрамляем его двойными квадратными скобочками таким образом:

[[photo11111_11111]]

Если Вам нужно прикрепить текст или ссылку к изображению, а также немного изменить его внешний вид, то разметка будет выглядеть таким образом:

[[photo11111_11111|options|text/link]], где на месте options может находиться одно из таких значений:

  • plain — ссылка на фотографию оформляется в виде текста, без картинки;
  • noborder — убирает рамку вокруг фото;
  • box — открывает изображение в окне;
  • nolink — убирает ссылку на фото;
  • nopadding — убирает пробелы между фото;
  • NNNpx или NNNxYYYpx — указывает размер фотографии в пикселях (только ширину или ширину на высоту соответственно).
Создание таблиц с помощью wiki-разметки

Не важно, графическое или текстовое меню Вы хотите создать для своей группы в контакте , без использования таблиц Вам вряд ли удастся обойтись. Таблицы в wiki-разметке создаются при помощи определенного набора символов, каждый из которых отвечает за определенную часть таблицы:

{| знак начала таблицы, является обязательным атрибутом любой таблицы;
|+ знак расположения названия таблицы по центру, ставится сразу после знака начала таблицы и не является обязательным атрибутом;
|- знак начала новой строки, в т.ч. и строки ячеек;
| знак, отвечающий за прозрачность ячейки;
! знак, отвечающий за темный цвет ячейки; если отсутствует – обязательно применение предыдущего знака;
|} знак конца таблицы, необязательный атрибут, используется для предотвращения возникновения ошибок.

Заполняя таблицу, данные каждой ячейки следует помещать после знака |, а разделяя ячейки, необходимо просто продублировать типы строки таким образом: || или !!.

Приведем пример оформления меню группы с помощью wiki-разметки.

wiki-разметка

загрузка…

Это меню было создано применением следующего кода:

{|
|-
|<center>»’Новости»'</center>||<center>»’Основное»'</center>||<center>»’Все серии»'</center>
|-
!<center>[[photo708176_168310200|nolink;noborder;90x80px| ]]</center>!!<center>[[photo-4489985_130746672|nolink;noborder;90x80px| ]]</center>!!<center>[[photo708176_168309890|nolink;noborder;90x80px| ]]</center>
|-
|<center>
[[Новости из жизни актеров сериала|Новости]]<br/>
[[Биографии]]<br/></center>
|<center>
[[Аудио]] <br/>
[[Видео]]<br/>
[[Книги]]<br/>
[[Обсуждения]]<br/></center>
|<center>
Сезоны:<br/>
[[1 сезон|1]] | [[2 сезон|2]] | [[3 сезон|3]] | [[4 сезон|4]]<br/>
[[5 сезон|5]] | [[6 сезон|6]] | [[7 сезон|7]] | [[8 сезон|8]]<br/></center>
|-
|}
Как мы видим в примере, изображения наделены такими опциями, как nolink и noborder, которые убирают ссылку и рамку картинки. Также были изменены размеры изображений.
Вторая строка ячеек таблицы создавалась с атрибутом !, поэтому и имеет темный цвет заливки.
При переходе на новую строку внутри третей ячейки был использован тег <br />, а для центрирования текста в ячейках – тег <center>.

Оформление ссылок при помощи wiki-разметки

При оформлении коммерческих групп очень важно уметь преподнести пользователям ссылку на тот или иной товар. В wiki-разметке существует три способа оформления внешних ссылок:

    1. Оформление ссылки как ссылки:
      [http://www.kontaktlife.ru]
    1. Оформление ссылки как текста:
      [http://www.kontaktlife.ru|Всё о контакте]
    1. Оформление ссылки как изображения:
      [[photo40778045_189420249|40px|http://www.kontaktlife.ru]]
Как сделать графическое меню в группе?

Наверняка вы видели красивые графические меню и кнопки в группах и хотели бы сделать такое меню у себя? Вот алгоритм действий.
Для создания красивого меню нужно немного знать фотошоп и немного вики-разметку:

1. Нарезаем картинку в фотошопе и жмём «Сохранить для веб»
2. Загружаем картинки через Стандартный загрузчик т.к. флеш-загрузчик может ухудшить качество
3. Собираем меню тегом nopadding
4. Прописываем ссылки
По итогу получится что-то типа:

[[photo-177777777_18888888|noborder;370px;nopadding|club11111111]]
[[photo-177777777_18888888|noborder;370px;nopadding|Новости]]
[[photo-177777777_18888888|noborder;370px;nopadding|Программы]]
[[photo-177777777_18888888|noborder;370px;nopadding|https://vk.com]]
[[photo-177777777_18888888|noborder;370px;nopadding|Правила]]
[[photo-177777777_18888888|noborder;370px;nopadding|club11111111]]
[[photo-177777777_18888888|noborder;370px;nopadding|Магазин]]
[[photo-177777777_18888888|noborder;370px;nopadding|Полезное]]
[[photo-177777777_18888888|noborder;370px;nopadding|Админы]]
[[photo-177777777_18888888|noborder;370px;nopadding|F. A.Q.]]

Особенности и секреты wiki-разметки

Большинство особенностей wiki-разметки познаются только опытным путем и недоступны для начинающих wiki-программистов. Но для того, чтобы избежать ошибок при оформлении групп, всё-таки желательно заранее ознакомиться с некоторыми из них.

  • Следует быть осторожными, изменяя размер изображения – если он будет меньше 131 пикселя, качество картинки значительно ухудшится;
  • Максимальный размер ширины изображения – 610px;
  • На одной wiki-странице не может размещаться более 17 незакрытых тегов;
  • Указывая ширину изображения, его высота изменится автоматически в соответствии с пропорциями;
  • Список внутри таблицы или спойлера создается при помощи тега <br />;
  • Одна строка разметки может содержать в себе не более 8 элементов списка.
Приложения в контакте для wiki-разметки

Для простоты понимания wiki-разметки создатели приложений в контакте подарили пользователям несколько своих творений. Одни из них являются своеобразными тренингами и уроками по wiki-разметке, другие же полностью освобождают пользователя от необходимости изучать разметку, осуществляя её редактирование привычным визуальным редактором.

Интерактивный FAQ(beta) Приложение, которое дает возможность пользователям проверить свои способности и знания wiki-разметки. Принцип приложения довольно прост: Вам дается уже оформленное меню, к которому необходимо восстановить код разметки, после чего сравнить свою версию с правильной.
Вики редактор Приложение-редактор, который поможет Вам оформить группу без каких-либо знаний wiki-разметки: Вам достаточно просто кликать мышкой в визуальном редакторе, а всё остальное приложение сделает за Вас!

Узнать больше про wiki-разметку и пройти наглядные видео-уроки по оформлению групп в контакте можно, воспользовавшись путеводителем по видео-урокам от официальной группы Wiki-разметки в контакте по ссылке https://vk. com/app1755280.

Если вам нужна раскрутка группы, то читайте наш пост.

Как сделать меню в группе Вконтакте?

На чтение 6 мин. Просмотров 283 Обновлено

Красивый дизайн группы Вконтакте – один из залогов ее успешного продвижения. Но помимо красоты очень важно и удобство для пользователей. К сожалению, вариантов оформления группы не так много, в отличие от возможностей по оформлению созданного сайта. Однако есть один интересный вариант – это сделать меню. В этой статье Вы узнаете, как сделать меню в группе Вконтакте.

Какой размер меню группы Вконтакте?

Прежде чем что-то создавать, нужно определиться с его размерами. Это очень важно, так как неправильно выбранный размер изображения может ужасно исказиться. И так, какой размер меню группы Вконтакте нужно выбрать?

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

Как правило, меню группы Вконтакте состоит из двух элементов: картинки, при нажатии на которую появляется меню и самого меню. Закрепленная картинка в описании группы с меню или без него, должна составлять по ширине от 510 пикселей, а высота должна быть равной ширине или меньше – это уже с учетом нового дизайна.

Размер меню группы Вконтакте составляет по ширине 607 пикселей. В высоту оно может быть самым разным. Так что для любого дизайнерского решения места хватит.

Как вставить картинку в описание группы Вконтакте?

Вставить картинку в описание группы Вконтакте элементарно. Достаточно взять подходящее изображение нужного размера и добавить его на стену группы от имени сообщества.

Затем наведите на значок троеточия у опубликованного изображения, как это сделано на картинке ниже. После этого появится список ссылок. Нажмите на ссылку со значением «Закрепить».

Далее просто обновите страницу в браузере и выбранная картинка вставится в описание группы Вконтакте. Как видите, ничего сложного в этом нет.

Для многих гораздо сложнее будет создать картинку. Благо, новый дизайн Вконтакте менее капризен к размерам изображения и если выбранное Вами изображение соответствует размерам, описанным выше в статье, то оно отобразится хорошо. Так что можно скачать уже готовое изображение, урезать его по ширине или высоте и готово.

Но если хотите создать уникальное и красивое изображение для описания группы Вконтакте – нужно воспользоваться программой Фотошоп. На самом деле, это не так сложно, как может показаться новичку. Но потратить свое время на его изучение придется. Могу порекомендовать Вам замечательный видеокурс — «Фотошоп с нуля 4.0». С помощью него Вы быстро освоите эту программу.

Как сделать меню в группе Вконтакте? Инструкция

А теперь давайте перейдем к созданию меню. Составим процесс действий в виде инструкции. Чтобы сделать меню в группе Вконтакте, нужно будет выполнить несколько простых шагов:

    1. Первое, что нам нужно сделать – это зайти в настройки группы и активировать раздел «Материалы». Значение следует выставлять на «ограниченные» или «открытые».
    1. Далее подготавливаем картинку для меню группы Вконтакте. Если не хотите возиться, то можно сделать меню в текстовой форме, однако это будет менее привлекательно. В качестве примера возьмем следующую картинку, которую можно увидеть ниже.
    1. К слову, эта картинка создана в Фотошопе менее чем за полчаса. В другом редакторе сделать это было бы сложнее. Так что рекомендую ознакомиться с курсом, о котором я писал выше. После того, как картинка выбрана, ее нужно разрезать на части и сохранить на компьютере.

Картинка была разрезана с помощью инструмента в Фотошопе «Раскройка», а затем сохранена. Каждая из выделанных частей стала отдельным изображением.

    1. Затем нужно создать альбом для фотографий на своей личной странице Вконтакте. Этот альбом можно даже делать полностью закрытым. После создания альбома, залейте в него все части нашего изображения.
    1. Далее зайдите в свою группу и в разделе свежие новости нажмите на кнопку «Редактировать».
    1. После этого откроется страница, которой можно дать произвольное название и записать следующий текст в квадратных скобках. Далее нажмите на кнопку «Сохранить страницу».
    1. Затем снова переходите на страницу своей группы или обновите ее (если она уже открыта). Нажмите на ссылку «Открыть меню». После этого появится дополнительная ссылка на страницу, которую мы создали. Нажмите на нее.
    1. Далее эта страница откроется. Так как она была только что создана, в ней ничего нет и нам нужно ее наполнить. Нажмите на ссылку «Наполнить содержанием».
    1. Далее пишем следующий код, так как на картинке ниже. В нем нужно указывать номер фото (для этого можно открыть фотографию, загруженную в свой альбом и скопировать ее адрес вроде этого «photo15535684_427525646»), размер фотографии (его можно узнать в свойствах фотографии), а также указать ссылку, на которую ведет эта фотография.
    1. Чтобы убедиться, что мы все правильно сделали, нажимаем на кнопку «Предпросмотр». Ниже кода появится сделанное меню группы Вконтакте. Если все отображается правильно, то жмем на кнопку «Сохранить», а если нет – то ищем и исправляем ошибки.
    1. Теперь нам понадобится картинка, которая станет заставкой нашего меню и будет находиться в описании нашей группы. Размеры картинки для описания группы Вконтакте мы писали выше, но если кто забыл – по ширине от 510 пикселей, а по высоте равной или меньше ширины. Можно использовать размеры больше, но в тех же пропорциях.
    1. Затем открываем нашу созданную страницу со сделанным меню группы Вконтакте и копируем на нее ссылку. Чтобы правильно скопировать ссылку, нужно нажать «Редактировать страницу». После этого появится написанный ранее код и можно будет скопировать адрес из строки браузера, который должен выглядеть так: «https://vk.com/page-119301077_51764020».
    1. Далее заходим в нашу группу и в форме отправки сообщений вставляем скопированный адрес меню. А затем и фотографию, которая будет заставкой. После этого нажимаем на кнопку «Отправить».
    1. Теперь осталось только закрепить эту запись. Сделайте это также, как сделал я на картинке ниже.
    1. Вот так будет выглядеть наше сделанное меню для группы Вконтакте. Если хотите посмотреть его лично, то вот ссылка на эту группу.

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

Как оптимизировать меню вашего онлайн-ресторана

Меню онлайн-ресторана, вероятно, первое, что клиенты переходят на ваш веб-сайт, и двигатель ваших онлайн-продаж. Вот почему опыт вашего клиента при просмотре меню является для нас основным приоритетом. После просмотра стольких меню, созданных в нашей системе, мы хотели бы дать вам несколько советов о том, как оптимизировать ваше онлайн-меню с помощью нашего решения для онлайн-заказов.

Советы по улучшению меню онлайн-ресторана

Сделайте так, чтобы клиентам было проще найти ваше меню

Держите кнопку «Посмотреть меню и заказ» на видном месте на главной странице и, желательно, в верхней части навигации.Сделайте его заметным, чтобы покупатели могли легко его увидеть и щелкнуть.

Связанный: Могу ли я настроить внешний вид веб-виджета?

Создание категорий продуктов

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

Используйте картинки !!!

Мы не можем сказать это много раз: используйте картинки в своем меню! Фотографии хорошего качества могут увеличить ваши продажи на 50% и более! Они вызывают аппетит и делают людей более заинтересованными. Но имейте в виду, что качество очень важно. Плохая фотография может испортить ваше блюдо и всю работу. Если у вас нет собственных изображений еды, по крайней мере, используйте фотобанк наших категорий бесплатно.

Наш онлайн-редактор меню поддерживает 3 типа изображений. Вот как мы рекомендуем их использовать:

Тематическое изображение — это должно быть изображение, которое лучше всего описывает ваш бизнес. Когда вы просмотрите наши акции в поисках тематического изображения, вы увидите, что мы рекомендуем только изображения, соответствующие вашей кухне.

Тематическая картинка — это первое, что заметят ваши онлайн-клиенты при открытии меню, так что произведите впечатление! В то же время помните, что тематическое изображение также используется на странице подтверждения заказа, поскольку мы рекомендуем вашим клиентам публиковать в Facebook сообщения о том, что они заказали у вас.Это еще один аргумент в пользу использования изображения еды, вызывающей слюни, а не фотографии вашего ресторана или персонала.

Изображение категории — это изображения для каждой категории продуктов питания. Здесь также мы делаем интеллектуальные предложения на основе названия вашей категории, что позволяет сэкономить время на просмотре сотен изображений для каждой категории.

Мы предлагаем вам выбрать красивые и представительные фотографии для каждой категории продуктов питания. Таким образом, у ваших клиентов возникнет соблазн продлить свои заказы, что увеличит вашу среднюю стоимость заказа!

Связано: Можно ли сделать категорию внутри другой категории меню?

Изображение товара — это то, что на самом деле получает покупатель, поэтому не стесняйтесь использовать здесь свои собственные изображения, чтобы лучше представить, что вы положите на его / ее тарелку.

Напишите красивое, четкое описание

Хорошее описание всегда лучше простого списка ингредиентов. Таким образом вы сможете персонализировать свои блюда и подарить клиентам что-то особенное, чего они будут ждать. В то же время держите это ясно, так как ваши клиенты должны знать, чего ожидать. Например, что бы вы предпочли заказать: «черничные блины с кленовым сиропом» или «свежие блины со вкусом черники, залитые настоящим кленовым сиропом»?

Узнайте больше о 3 секретных советах по написанию меню, которые помогут вам создать лучшие описания продуктов, чтобы заставить клиентов проголодаться.

Выделение специальных блюд

Если у вас есть специальные блюда, например веганские или вегетарианские, вы можете поместить их в отдельные категории меню или добавить символ «V» или «Veg». Вы также должны указать, когда конкретное блюдо имеет очень сильный вкус, например В индийской кухне некоторые блюда сортируются по степени остроты.

Упростите настройку блюда

Мы считаем, что создали очень гибкий онлайн-конструктор меню, который позволяет легко создавать даже самые сложные меню.Для получения дополнительных рекомендаций о том, как наилучшим образом использовать варианты и надстройки, посмотрите эти минутные видеоролики:

Не преувеличивайте длину своего меню

Когда вы закончите создавать свое меню, попробуйте сами на рабочем столе и также на мобильном устройстве. Просмотрите его с точки зрения клиента и оцените, можно ли по-прежнему управлять длиной вашего меню или оно стало слишком большим, чтобы его можно было легко использовать. В случае, если он слишком большой, убедитесь, что вы избегаете дублирования, используя варианты и надстройки. Если оптимизировать здесь нечего, проверьте категории.Неужели их слишком мало, что делает каждую категорию слишком длинной? Если проблема не в этом, возможно, у вас просто огромное меню. Попробуйте сделать его меньше. Возможно, стоит отказаться от некоторых блюд, которые редко заказывают, для лучшей читаемости взамен.

Регулярно обновляйте меню

Покупателю очень неприятно что-то заказывать, а затем осознавать, что цена изменилась или что в меню больше нет этого пункта. Постоянно обновляйте меню с последним списком цен и товаров.

Поднимитесь на новый уровень с семейными предложениями и недорогими блюдами

Узнайте все о том, как создавать рекламные акции, купоны, специальные предложения и комбинации, в нашей следующей статье.

×

×

×

FAQ | Редактор меню администратора Pro

Предпродажные вопросы

Поддерживает ли этот плагин Multisite?

Да. Вы можете активировать его по сети или установить как глобальный плагин (см. Документацию по установке).Обратите внимание, что страница настроек плагина не будет отображаться в сетевом администраторе. Вместо этого вам нужно будет получить к нему доступ через дочерний сайт.

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

Да, редактор меню отобразит все доступные роли. Сюда входят как встроенные роли, такие как «Редактор», так и пользовательские роли, добавленные другими плагинами.

Могу ли я использовать его, чтобы скрыть определенные сообщения или страницы?

№Этот плагин не может изменить доступ к определенному фрагменту контента, например к записи или странице. Хотя вы можете использовать , чтобы предоставить кому-либо доступ к меню «Страницы -> Все страницы» в целом, вы не можете показывать / скрывать отдельные страницы.

На данный момент нет. WordPress не поддерживает глубоко вложенные меню администратора. Однако, если вас интересует такая функция, дайте мне знать.

Могу ли я перейти с бесплатной версии на Pro без потери существующих настроек?

Да.Версия Pro автоматически импортирует существующие настройки из бесплатной версии. Вот рекомендуемый способ обновления:

  1. Отключите бесплатную версию редактора меню администратора.
  2. Установите и активируйте версию Pro.
  3. Откройте редактор меню и убедитесь, что ваши настройки импортированы.
  4. (Необязательно) Удалите бесплатную версию.

Внимание! Не удаляйте бесплатную версию перед установкой Pro — это приведет к удалению ваших настроек.

Могу ли я купить «Персональную» лицензию и позже перейти на «Бизнес» или «Агентство»?

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

Есть ли скидка на продление, или мне нужно будет платить полную стоимость каждый год?

Да, при продлении лицензии действует скидка 25%.Например, допустим, вы приобрели лицензию «Business» за 59 долларов. По истечении первого года продление его на следующий год будет стоить 44,25 доллара.

В чем разница между бесплатной и профессиональной версией?

Версия Pro имеет следующие дополнительные функции:

  • Импорт / экспорт пользовательских конфигураций меню.
  • Разрешения для меню на основе ролей.
  • Установить элементы меню для открытия в новом окне или IFrame.
  • Используйте короткие коды в полях меню.
  • Создавайте меню, доступные только определенному пользователю.

Как…

Вы можете настроить доступ к пункту меню только определенному пользователю. Для этого установите для поля возможностей значение «пользователь:» + логин пользователя. Например, если у вас есть пользователь John Smith с логином «smith», установите для поля возможностей значение «user: smith». Теперь только этот пользователь сможет видеть это меню.

Из-за того, как WordPress обрабатывает разрешения меню, меню верхнего уровня будет оставаться видимым, если в нем есть хотя бы одно доступное подменю, независимо от того, какие разрешения вы установили для самого меню верхнего уровня.Чтобы скрыть все меню верхнего уровня, обновите также разрешения каждого из его подменю.

Иногда этот подход не работает, потому что в меню есть специальное подменю, которое не отображается для учетной записи администратора. Вы не можете так скрыть или отредактировать меню. В этом случае нажмите кнопку «Изменить» рядом с полем «Разрешения» и включите этот параметр: «Скрыть все элементы подменю, когда этот элемент скрыт».

Откройте экран «Разрешения», снимите флажки со всех ролей, кроме администратора, и введите «super_admin» в поле «Дополнительные возможности».

Меню, такие как «Комментарии», «Панель инструментов -> Обновления» и «WooCommerce -> Заказы», ​​показывают количество новых элементов в красочном круге. Если вы переименуете меню, номер больше не будет отображаться, потому что он не является частью заголовка пользовательского меню. Добавьте короткий код [ame-count-bubble] к заголовку меню, чтобы отобразить номер.

  • Чтобы переместить элемент подменю на верхний уровень, перетащите его в нижнюю часть списка меню верхнего уровня. Желтый прямоугольник появится, когда вы перетащите его в нужное место.Впоследствии вы можете переместить его в другое положение.
  • Чтобы переместить меню верхнего уровня в подменю, щелкните соответствующее подменю, затем перетащите меню верхнего уровня в нижнюю часть списка элементов подменю.

Вы также можете перемещать пункты меню между верхним уровнем и подменю с помощью кнопок Вырезать и Вставить — просто вырежьте элемент из одного списка и вставьте его в другой.

Вы можете использовать следующие шорткоды в любом месте ваших пользовательских меню, включая заголовок меню, URL-адрес и т. Д.:

  • [wp-wpurl] — адрес WordPress (e.г. «Http://example.com/»).
  • [wp-siteurl] — адрес блога (например, «http://example.com/blog»).
  • [wp-admin] — URL области администрирования (например, «http://example.com/wp-admin/»).
  • [wp-name] — Название блога.
  • [wp-version] — Текущая версия WordPress.
  • [wp-user-login] — Имя пользователя текущего пользователя.
  • [wp-user-display-name] — отображаемое имя текущего пользователя.
  • [wp-user-first-name] — имя текущего пользователя.
  • [wp-user-last-name] — фамилия текущего пользователя.
  • [wp-logout-url] — URL-адрес, по которому текущий пользователь может выйти из системы.

Кроме того, вы также можете использовать большинство шорткодов, добавленных другими плагинами.

Поиск и устранение неисправностей

Это известная ошибка в Google Chrome 45. Она не связана с Admin Menu Editor Pro; ошибка может затронуть даже пользователей, у которых не установлены плагины. См. Этот пост для получения более подробной информации и обходного пути.

Эта проблема обычно вызвана ошибками JavaScript. Интерфейс редактора меню в основном создается с помощью JavaScript.Если сценарий администратора дает сбой или не загружается должным образом, некоторые части интерфейса могут не отображаться.

Чаще всего причиной ошибки является конфликт плагина или темы. Например, некоторые плагины загружают свой JavaScript на все страницы администратора, а не только на свои собственные, что мешает работе других плагинов. Проверьте консоль JavaScript вашего браузера на наличие сообщений об ошибках и сообщите мне подробности. Я сделаю все возможное, чтобы помочь.

Многие плагины имеют экраны «Добро пожаловать», «Начало работы» или «Что нового», которые появляются при установке плагина. Предполагается, что они временные и обычно исчезают после того, как вы однажды посетили их. Однако некоторые популярные плагины скрывают эти страницы способом, который не полностью совместим с Admin Menu Editor Pro. В результате редактор меню непреднамеренно делает их видимыми.

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

Это конфликт плагинов. Чтобы исправить это, отключите параметр «Включить безопасную версию JavaScript» в iThemes Security.

Godot Tutorial — Часть 16: Меню паузы. Перезапустить и выйти из игры

Практически во всех играх вы найдете меню паузы, которое обычно имеет ряд элементов управления, таких как «возобновить игру», «перезапустить уровень», «вернуться в главное меню», «настройки игры». ”И т. Д. В этом руководстве мы узнаем, как создать и создать сценарий меню паузы для вашей игры .

Меню паузы, которое мы сделаем для нашей игры, будет содержать эти 3 пункта:

  • Продолжить игру
  • Перезапустить игру
  • Выйти

Игрок откроет меню, нажав escape или кнопку запуска / параметров на джойстике, затем он может перемещаться по нему с помощью клавиш со стрелками или D-Pad и выбирать выделенный элемент, нажимая пробел или кнопку атаки джойстика.

Рисование графического интерфейса меню

Конечный результат, который мы хотим достичь, таков:

Давайте посмотрим, как это сделать!

Добавьте узел Popup в CanvasLayer и назовите его MenuPopup . Сделайте его видимым, щелкнув значок глаза рядом с именем узла.

Поскольку меню должно работать, когда игра приостановлена, установите для свойства MenuPopup Pause → Mode значение Process . Кроме того, установите Exclusive на On , чтобы всплывающее окно не закрывалось в ответ на события мыши.

Добавьте узел ColorRect в MenuPopup . Установите Rect → Position на (60, 40) и Rect → Size на (200, 100), затем установите свойство Color на (80,80,80,255).

Добавьте еще один ColorRect в MenuPopup и переименуйте его в Resume . Установите Rect → Position на (70, 50) и Rect → Size на (180, 20). Теперь добавьте Label к Resume . В свойстве Custom Font загрузите шрифт Font.tres (вы найдете его в папке Fonts ) и в Custom Colors установите для Font Color черный цвет. Напишите RESUME GAME в свойстве Text на этикетке, затем установите для Align и Valign значение Center . Наконец, установите Rect → Size на (180, 20).

Теперь продублируйте Резюме два раза. Переименуйте одну копию в Перезагрузите , а другую — в Выйти . У вас будет эта структура узла для MenuPopup :

Установите Перезапустите Rect → Позиция на (70, 80), затем измените текст метки на RESTART GAME .Выберите узел Quit и установите для его Rect → Position значение (70, 110). Наконец, измените текст метки на ВЫЙТИ .

Сценарий меню

Присоедините новый сценарий к MenuPopup и сохраните его как MenuPopup. gd в папке GUI .

Во-первых, давайте добавим несколько переменных:

  onready var player = get_node ("/ root / Root / Player")
var уже_paused
var selected_menu  

Переменная player будет содержать ссылку на узел Player .Для его инициализации мы использовали новое ключевое слово: onready . Ключевое слово onready откладывает инициализацию переменной до вызова _ready () . Эта единственная строка представляет собой компактный способ написать следующий код:

  var player

func _ready ():
player = get_node ("/ root / Root / Player")  

Переменная ready_paused используется для хранения, если игра уже была приостановлена ​​при вызове меню. В таком случае нам не нужно снимать паузу в игре при выходе из меню (например, игра уже приостановлена, если мы открываем меню во время разговора с NPC).

Последняя переменная selected_menu хранит текущий выделенный пункт меню.

Перед написанием кода, который обрабатывает ввод в меню, давайте напишем функцию, которая устанавливает цвет пунктов меню, чтобы выделить текущий:

  func change_menu_color ():
$ Resume.color = Color.gray
$ Restart.color = Color.gray
$ Quit.color = Color.gray

соответствовать selected_menu:
0:
$ Resume.color = Цвет: зеленый, желтый
1:
$ Restart.color = Цвет: зеленый, желтый
2:
$ Выйти.color = Color.greenyellow  

Первые три строки устанавливают для пунктов меню цвет по умолчанию. Затем оператор соответствия используется для проверки того, какой элемент выделен, чтобы изменить его цвет.

Чтобы обработать ввод, первое, что нам нужно сделать, это создать новое действие ввода для открытия меню. Щелкните меню Project → Project Settings и перейдите на вкладку Input Map . Здесь вам нужно создать новое действие под названием menu , которому вы назначите два события: клавиша Escape и Device 0, событие Button 11 для джойстика (Start на Xbox, Options на PlayStation).

Теперь мы можем приступить к написанию базовой структуры функции _input ():

  func _input (event):
если не видно:
если Input.is_action_just_pressed ("меню"):
пройти #TODO
еще:
если Input.is_action_just_pressed ("ui_down"):
пройти #TODO
elif Input.is_action_just_pressed ("ui_up"):
пройти #TODO
elif Input.is_action_just_pressed ("атака"):
соответствовать selected_menu:
0:
пройти #TODO
1:
пройти #TODO
2:
pass #TODO  

Функция обрабатывает два возможных состояния:

  • меню скрыто : если игрок нажимает кнопку меню , мы хотим приостановить игру и показать меню.
  • меню отображается : мы хотим перемещаться по меню с помощью клавиш со стрелками вверх и вниз и выбирать выделенный элемент с помощью пробела.

Начнем с первого состояния. Добавьте этот код, когда меню скрыто и игрок открывает меню:

  # Приостановить игру
get_tree (). paused = true
# Сбросить всплывающее окно
selected_menu = 0
change_menu_color ()
# Показать всплывающее окно
player. set_process_input (ложь)
popup ()  

Этот код выполняет следующие действия:

  • приостанавливает игру, устанавливая для свойства paused дерева игр значение true
  • сбрасывает меню, выбирая первый элемент и вызывая change_menu_color () функция
  • отключает обработку ввода для Player
  • наконец, показывает меню, вызывающее функцию popup () .

Когда меню отображается, мы должны обрабатывать события ввода ui_up и ui_down . Для ui_down введите этот код:

  selected_menu = (selected_menu + 1)% 3;
change_menu_color ()  

Чтобы выбрать следующий пункт меню, необходимо увеличить значение переменной selected_menu . Это работает до тех пор, пока выбранный элемент не станет последним: в этом случае selected_menu равно 2, и при увеличении он перейдет к элементу 3, которого не существует.Если вы хотите, чтобы при переходе вперед от последнего пункта меню вы возвращались к первому, компактный способ сделать это — использовать операцию по модулю (%).

После изменения выбранного меню функция вызывает change_menu_color () для обновления цвета пунктов меню.

Код для ui_up аналогичен, но в этом случае мы не можем использовать операцию по модулю. Вместо этого мы будем использовать оператор if , чтобы проверить, что является элементом текущего пункта меню:

  if selected_menu> 0:
selected_menu = selected_menu - 1
еще:
selected_menu = 2
change_menu_color ()  

Когда нажата клавиша пробела или кнопка джойстика атаки, мы выполним код для выделенного пункта меню.Для случая 0 из оператора match (Resume Game) введите этот код:

  # Resume game
если еще не приостановлено:
get_tree (). paused = false
player.set_process_input (истина)
hide ()  

Чтобы возобновить игру, этот код устанавливает для свойства pause дерева игр значение false (но только если игра еще не была приостановлена), повторно активирует обработку ввода для узла Player и скрывает меню.

Перезапустить игру просто: мы должны просто перезагрузить основную сцену, чтобы вернуть все в исходное состояние игры, а затем убрать паузу.Итак, для случая 1 из оператора match введите этот код:

  # Перезапустить игру.
get_tree (). change_scene ("res: //Scenes/Main.tscn")
get_tree (). paused = false  

Выйти из игры еще проще: достаточно вызвать функцию quit () дерева игры. Добавьте этот код для случая 2 из match statement:

  # Выйти из игры
get_tree (). quit ()  

Для удобства я сообщаю ниже окончательный код функции _input ():

  func _input (event):
если не видно:
если Input.is_action_just_pressed («меню»):
# Пауза в игре
уже_paused = get_tree (). приостановлено
get_tree (). paused = true
# Сбросить всплывающее окно
selected_menu = 0
change_menu_color ()
# Показать всплывающее окно
player.set_process_input (ложь)
выскакивать()
еще:
если Input.is_action_just_pressed ("ui_down"):
selected_menu = (selected_menu + 1)% 3;
change_menu_color ()
elif Input. is_action_just_pressed ("ui_up"):
если selected_menu> 0:
selected_menu = selected_menu - 1
еще:
selected_menu = 2
change_menu_color ()
elif Ввод.is_action_just_pressed («атака»):
соответствовать selected_menu:
0:
# Продолжить игру
если еще не приостановлено:
get_tree (). paused = false
player.set_process_input (истина)
скрывать()
1:
# Перезапустить игру
get_tree (). change_scene ("res: //Scenes/Main.tscn")
get_tree (). paused = false
2:
# Выйти из игры
get_tree (). quit ()  

Выводы

В этом уроке мы узнали, как сделать простое меню паузы. В качестве упражнения вы можете попробовать создать подобное меню на экране Game Over.

Вы можете попробовать игру с новым меню, нажав здесь (очевидно, Выйти из не работает в браузере):

В следующем уроке мы узнаем, как экспортировать игру для создания исполняемого файла и версий HTML5. .

Как показать меню по умолчанию и меню гамбургера

Метод

Начнем с настройки наших меню. Нам понадобятся два, один со всеми нашими ссылками и один со ссылками, которые мы хотим отображать только в меню стиля по умолчанию.

Итак, перейдите в Внешний вид> Меню и создайте новое меню . Дайте меню имя, я называю свое «Главное меню». Это меню, которое мы собираемся отобразить в стиле по умолчанию рядом с логотипом.

Добавьте элементы меню, как обычно, но НЕ НЕ выбирайте место меню, мы собираемся использовать это меню в модуле меню с полной шириной. Обязательно Сохраните свое меню.

Теперь создайте второе меню и дайте ему имя, я называю свое «Slide In Menu».В этом меню вы сначала хотите продублировать только что созданное меню, сначала добавить все элементы, которые вы добавили в предыдущее меню, а затем добавить элементы, которые вы хотите отображать только в слайд-меню или полноэкранном меню. Затем выберите Основное меню под Настройки меню> Расположение дисплея и нажмите Сохранить меню .

Причина, по которой мы продублировали наше первое меню, заключается в том, что при просмотре на планшетах и ​​мобильных устройствах все меню, включая модуль меню полной ширины, будут переключаться на значок гамбургера, а отображение двух значков гамбургера сбивает пользователей с толку.Итак, нам нужно два меню на рабочем столе и одно меню на планшете и мобильном телефоне.

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

Разверните каждый из дублированных элементов во втором меню и добавьте класс ds-hide-menu в поле CSS Classes (необязательно) . Если у вас есть какие-либо элементы подменю, вам не нужно беспокоиться о добавлении к ним класса CSS (но это не повредит), подпункты будут скрыты, если у родительского элемента есть класс.

Если вы не видите поле CSS Classes, прокрутите страницу вверх и нажмите Screen Options в правом углу, установите флажок CSS Classes , и поле отобразится под ваши пункты меню.

Как создать фиксированное меню


Узнайте, как создать «фиксированное» меню с помощью CSS.


Попробуйте сами »


Как создать фиксированное верхнее меню

Шаг 1) Добавьте HTML:

Пример


Дом
Новости
Свяжитесь с


Какой-то текст, какой-то текст, какой-то текст, какой-то текст ..



Шаг 2) Добавьте CSS:

Чтобы создать фиксированное верхнее меню, используйте положение : фиксированное и верхнее положение : 0 .Обратите внимание, что фиксированное меню будет перекрывать другой ваш контент. Чтобы исправить это, добавьте margin-top (к содержимому), который равен или больше высоты вашего меню.

Пример

/ * Панель навигации * /
.navbar {
overflow: hidden;
цвет фона: # 333;
Положение: фиксированное; / * Установить навигационная панель в фиксированное положение * /
вверху: 0; / * Позиционируем навигационную панель вверху страницы * /
width: 100%; / * Полная ширина * /
}

/ * Ссылки внутри панели навигации * /
.навигационная панель a {
float: left; Дисплей
: блокировать;
цвет: # f2f2f2;
выравнивание текста: центр;
отступ: 14 пикселей 16 пикселей;
текстовое оформление: нет;
}

/ * Смена фона при наведении курсора * /
.navbar a: hover {
background: #ddd;
цвет: чернить;
}

/ * Главный content * /
.main {
margin-top: 30px; / * Добавляем топ маржа, чтобы избежать наложения контента * /
}

Попробуй сам »

Как создать фиксированное нижнее меню

Чтобы создать фиксированное нижнее меню, используйте позицию : фиксированные и внизу: 0 :

Пример

/ * Панель навигации * /
.навигационная панель {положение
: фиксированное; / * Устанавливаем навигационную панель в фиксированное положение * /
bottom: 0; / * Позиционируем навигационную панель внизу страницы * /
width: 100%; / * Полная ширина * /
}

/ * Главная содержание * /
.main {
нижнее поле: 30 пикселей; / * Добавляем нижнее поле, чтобы избежать наложения контента * /
}

Попробуй сам »

Совет: Перейдите к нашему руководству CSS Navbar Tutorial, чтобы узнать больше о панелях навигации.



Создание базовых меню навигации · WebPlatform Docs

Сводка

В этом руководстве мы расскажем, как создавать различные типы базового меню навигации с использованием списков HTML и ссылок.

Введение

В этой статье вы узнаете о различных типах меню навигации и о том, как создавать их в HTML. Мы также затронем тему удобства использования и доступности меню. Мы пока не будем вдаваться в стилистику меню, но эта статья заложит основы.

HTML5