• Главная
• Новости
• Контакты
• О нас

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

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

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

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

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

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

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

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

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

• Главная
• Новости
• Контакты
• О нас

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

#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-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

• Главная
• Новости
• Контакты
• О нас

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

• Главная
• Новости
• Контакты
  • Адрес
  • Телефон
  • Email
• О нас

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

#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; }

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

Итак начнем. Создадим список с названиями нашего меню. В качестве названий пунктов пусть будут такие: "Главная", "Новости", "Продукция", "Услуги", "Партнеры", "Контакты". Создаем новый файл под названием menu.html , например, с помощью программы Dreamweawer или используя обычный блокнот. В нем между тегами body размещаем наше меню. Это обычный маркированный список ul с элементами li . Разумеется, каждый пункт меню делаем ссылкой, где вместо URL вставляем решетку #. Используя программу Photoshop создадим изображение размером 3х30 px, с градиентной заливкой как показано на рисунке ниже. Файл сохраним в формате GIF. Назовем его bg.gif . Данный рисунок будет выступать в качестве фонового изображения нашего меню.

Вот содержимое файла menu.html :

Простое кроссбраузерное горизонтальное меню

• Главная
• Новости
• Продукция
• Услуги
• Партнеры
• Контакты

Теперь отдельно создадим файл стилей под названием main.css . Его листинг приведен полностью ниже.

Ul { margin:0; /*обнуляем отступы*/ padding:0; /*обнуляем отступы*/ float:left; /*выравниваем список по левому краю*/ width:auto;/*задаем ширину авто исходя из типа и содержимого списка*/ background-image: url(bg.gif); /*устанавливаем фоновое изображение*/ background-repeat:repeat-x; /*повторяем наше изображение по горизонтали*/ list-style:none; /*удаляем маркеры списка*/ background-color:#4778c3; /*задаем цвет фона под изображение*/ font-size:13px; /*задаем размер шрифта*/ font-family:Arial, Helvetica, sans-serif; /*устанавливаем шрифт*/ } ul li { float:left; /*выравниваем элементы списка по левому краю*/ } ul a { display:block; /*представляем ссылки меню как блочные элементы*/ width:100px; /*задаем размер блока*/ height:30px; /*и высоту блока*/ text-align:center; /*надпись по центру*/ line-height: 2.1em; /*межстрочный интервал*/ text-decoration:none; /*убираем подчеркивание у ссылок*/ color:#fff; /*цвет текста ссылок - белый*/ border-right:#fff solid 1px; /*бордюр правой стороны блока (белая линия в 1px)*/ } ul a:hover { color:#ccc; /*ссылка меняет цвет при наведении указателя*/ }

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

Подведем итог. В результате мы получили полностью кросбраузерное горизонтальное меню, которое выглядит одинаково не только во всех современных браузерах, но и в таких раритетах, как IE 5.5 и IE 6.0. Все элементы меню представлены как блочные элементы и имеют одинаковые размеры по ширине 100 px и высоте 30px. В качестве разделителя пунктов меню используется оформление блокового элемента с помощью правого бордера белого цвета толщиной в 1px. Это практически самый простой способ реализации горизонтального меню. Разумеется, при желании его можно модифицировать, сделать более красивым и функциональным используя фантазию, свойства css и дополнительные графические элементы. Ну а наше горизонтальное меню выглядит примерно так:

Плюсы этого решения:
Простота выполнения
Простой код
Нет никаких таблиц и javascript
Кроссбраузерность: меню во всех браузерах выглядит одинаково
Используются всего один рисунок
Минимум кода на странице menu.html
Минимум кода для реализации стилей в main.css

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

Большинство классических сайтов в интернете использует горизонтальное меню в качестве основного элемента навигации. Иногда в нем могут встречаться разные дополнительные фишки — многоуровневые конструкции, иконки для подпунктов, блок поиска, сложные списки и т.п. Недавно в блоге уже была небольшая подборка , а сегодня рассмотрим 4 практических примера как сделать выпадающее меню на CSS + HTML. Информация пригодится начинающим разработчикам и тем, кто хочет изменить навигацию на своем сайте.

Первый туториал CSS3 Dropdown Menu — самый новый в подборке (за апрель 2016). Плюсы решения: в данном горизонтальном выпадающем меню для сайта в подпунктах есть иконки, реализация и сам CSS код достаточно простые для понимания и внедрения.

Шаг1 — HTML разметка

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

• My dashboard
• Likes
• Views
  • Documents
  • Messages
  • Sign Out
• Uploads
• Videos
• Documents

Шаг2 — отображение меню

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

Menu, .menu ul, .menu li, .menu a { margin: 0; padding: 0; border: none; outline: none; } .menu { height: 40px; width: 505px; background: #4c4e5a; background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .menu li { position: relative; list-style: none; float: left; display: block; height: 40px; }

Шаг3 — оформление ссылок

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

Menu li a { display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #393942; border-right: 1px solid #4f5058; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; transition: color .2s ease-in-out; } .menu li:first-child a { border-left: none; } .menu li:last-child a{ border-right: none; } .menu li:hover > a { color: #8fde62; }

Шаг4 — подменю

Поскольку у нас меню сайта на CSS выпадающее, то следует задать также оформление вложенному списку. Вначале ставим отступ 40px сверху и 0px слева + добавлем округленные углы. Для показа/скрытия подменю изначально устанавливаем свойство прозрачности (opacity) равное нулю, а при наведении — единице. Для создания эффекта появления подменю указываем значение высоты списка в ноль, а при hover = 36px.

Menu ul { position: absolute; top: 40px; left: 0; opacity: 0; background: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity .25s ease .1s; transition: opacity .25s ease .1s; } .menu li:hover > ul { opacity: 1; } .menu ul li { height: 0; overflow: hidden; padding: 0; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease .1s; } .menu li:hover > ul li { height: 36px; overflow: visible; padding: 0; }

Ширину ссылок ставим = 100px, внизу всех элементов кроме последнего добавляется граница border-bottom. Также, по желанию, вы можете разместить картинки для пунктов подменю (внимание! не забудьте изменить пути к изображениям в коде на используемые вами).

Menu ul li a { width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #353539; } .menu ul li:last-child a { border: none; } .menu a.documents { background: url(../img/docs.png) no-repeat 6px center; } .menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; } .menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

Мне лично нравится простота реализации и использование иконок. Вот итоговый код с codepen:

Вариант от Josh Riser визуально похож на предыдущее выпадающее меню на HTML и CSS. В коде нет дочернего селектора " > " (полезен в многоуровневых конструкциях), но автор удачно использует эффекты CSS3 (transition, box-shadow и text-shadow) для более красивого результата. По ссылке в источнике отсутствует описание процесса создания горизонтального выпадающего меню, поэтому я сразу приведу итоговый код:

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

HTML код

Для навигации, как всегда, используется неупорядоченный список (с классом nav). Обычные пункты меню являются элементами списка (li) и содержат ссылки (a href) без каких-либо классов и ID. Исключением являются 3 специализированных элемента данного горизонтального выпадающего меню с такими ID:

• settings — ссылка картинка;
• search — блок с поиском и соответствующей кнопкой;
• options — содержит подменю (реализовано через список с классом subnav).

Также в коде увидите скрипт prefixfree для использования свойств CSS без префиксов. Итоговый вариант HTML для выпадающего меню имеет вид:

• 
• Application
• Board
• Options
  • Settings
  • Application
  • Board
  • Options

CSS для меню

1. Базовые стили и элементы меню

Во-первых, указываем шрифт Montserrat, темный серый фон и фиксированную высоту для пунктов меню. Все элементы имеют выравнивание float: left и позиционирование relative дабы потом можно было добавить подменю с position: absolute;

@import url(http://fonts.googleapis.com/css?family=Montserrat); * { margin: 0; padding: 0; } .nav { background: #232323; height: 60px; display: inline-block; } .nav li { float: left; list-style-type: none; position: relative; }

2. Оформление ссылок

Для пунктов меню применяется базовое оформление + . Высота такая же как и в классе nav. Для #settings ссылки-картинки в начале меню задается выравнивание.

Nav li a { font-size: 16px; color: white; display: block; line-height: 60px; padding: 0 26px; text-decoration: none; border-left: 1px solid #2e2e2e; font-family: Montserrat, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); } .nav li a:hover { background-color: #2e2e2e; } #settings a { padding: 18px; height: 24px; font-size: 10px; line-height: 24px; }

3. Блок поиска

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

#search { width: 357px; margin: 4px; } #search_text{ width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; border: 0 none; height: 52px; margin-right: 0; color: white; outline: none; background: #1f7f5c; float: left; box-sizing: border-box; transition: all 0.15s; } ::-webkit-input-placeholder { /* WebKit browsers */ color: white; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: white; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: white; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: white; } #search_text:focus { background: rgb(64, 151, 119); } #search_button { border: 0 none; background: #1f7f5c url(search.png) center no-repeat; width: 60px; float: left; padding: 0; text-align: center; height: 52px; cursor: pointer; }

4. Выпадающее подменю

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

#options a{ border-left: 0 none; } #options>a { background-image: url(triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; } .subnav { visibility: hidden; position: absolute; top: 110%; right: 0; width: 200px; height: auto; opacity: 0; transition: all 0.1s; background: #232323; } .subnav li { float: none; } .subnav li a { border-bottom: 1px solid #2e2e2e; } #options:hover .subnav { visibility: visible; top: 100%; opacity: 1; }

В стилях найдете вставку фонового изображения треугольника (triangle.png) для обозначения подменю — не забудьте указать правильный путь для этой и других картинок в примере. Появлением подменю реализуется с помощью свойства opacity. Итоговое решение на codepen:

В данном варианте в основном используются приемы CSS2.1, решение плюс-минус новое — за март 2015. Если вам не хватает одного подуровня в горизонтальном выпадающем меню для сайта, то этот пример содержит сразу три. С помощью псевдокласса:only-child для пунктов добавляется символ «+» обозначающих наличие подменю.

В целом, неплохой и несложный пример. Не будем детально описывать процесс реализации, т.к. он похож на предыдущие — сначала создаете HTML каркас, а потом постепенно добавляете для него стили. Итоговый код скачивайте по ссылке на источник, частично его можно глянуть в Codepen:

Итого

Выше мы рассмотрели 4 варианта как сделать выпадающее меню на CSS + HTML для , хотя подобных примеров в сети гораздо больше. Есть решения с jQuery, но это, скорее всего, пригодится только для реализации каких-то специальных эффектов и нестандартных задач. В большинстве случаев хватит связки CSS + HTML, тем более, что сейчас главные требования к меню — это удобство и быстрая скорость загрузки.

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

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

В этом уроке мы будем создавать горизонтальное меню на CSS . Конечно, можно изпользовать уже готовые решения, к примеру, нанять программистов для CMS Made Simple . Однако, вы же не ищете легких путей? :bully:

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

• Ссылка №1
• Ссылка №2
• Выпадающий список
  • Документы
  • Сообщения
  • Регистрация
• Ссылка №3
• Ссылка №4
• Ссылка №5

Изначально меню выглядит вертикально, чтобы это исправить пропишем некоторые стили, отредактируем отступы, границы, цвет фона, закруглим углы. Ширину и высоту сделаем фиксированную. Выравнивание элементов меню сделаем по левому краю при помощи float: left (чтобы навигация приобрела горизонтальную структуру).

Menu, .menu ul, .menu li, .menu a { margin: 0; padding: 0; border: none; outline: none; } .menu { height: 40px; width: 505px; background: #4c4e5a; background: -webkit-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: -moz-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: -o-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: -ms-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .menu li { position: relative; list-style: none; float: left; display: block; height: 40px; }

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

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

Menu li a { display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #494942; border-right: 1px solid #4f5058; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #f4f4f4; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition: color .3s ease-in-out; -moz-transition: color .3s ease-in-out; -o-transition: color .3s ease-in-out; -ms-transition: color .3s ease-in-out; transition: color .3s ease-in-out; } .menu li:first-child a { border-left: none; } .menu li:last-child a{ border-right: none; } .menu li:hover > a { color: #9fde63; }

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

Menu ul { display: none; }

Теперь будем редактировать стиль для подменю. Добавим позиционирование подменю 40px сверху и 0px слева от пункта меню и добавим закругленные углы снизу. Установим нулевую прозрачность, а при наведении изменим ее на 1, чтобы создать усиление / затухания эффекта. Для слайд-эффекта вверх / вниз мы должны задать высоту списка равную 0px, когда выпадающее меню скрыто, и 36px при наведении курсора на раскрывающийся список.

Menu ul { position: absolute; top: 40px; left: 0; opacity: 0; background: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; -webkit-transition: opacity .3s ease .1s; -moz-transition: opacity .3s ease .1s; -o-transition: opacity .3s ease .1s; -ms-transition: opacity .3s ease .1s; transition: opacity .3s ease .1s; } .menu li:hover > ul { opacity: 1; } .menu ul li { height: 0; overflow: hidden; padding: 0; -webkit-transition: height .3s ease .1s; -moz-transition: height .3s ease .1s; -o-transition: height .3s ease .1s; -ms-transition: height .3s ease .1s; transition: height .3s ease .1s; } .menu li:hover > ul li { height: 36px; overflow: visible; padding: 0; }

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

Menu ul li a { width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #464649; } .menu ul li:last-child a { border: none; }

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

Menu a.d { background: url(docs.png) no-repeat 6px center; } .menu a.m { background: url(bubble.png) no-repeat 6px center; } .menu a.s { background: url(arrow.png) no-repeat 6px center; }

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

(cкачиваний: 398)

Доброго времени суток всем, кто сейчас читает данную публикацию. Сегодня я хочу рассказать вам об одном из инструментов сайтостроения, без которого ни один веб-ресурс не может обойтись. Это меню сайта, или как еще говорят карта сайта. На сегодняшний день существует безграничное множество видов и подвидов меню.

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

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

и
• .

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

  создает маркированный список, а
  • — один элемент списка. Для наглядности давайте напишем код простого меню:

    Навигация

    Навигация сайта

    • Главная
    • Новости недели
    • Технологические достижения
    • Чат

    Однако с появлением платформы язык разметки пополнился дополнительными тегами. Именно поэтому меню современных веб-сайтов создается при помощи специального тега < menu> . В использовании этот элемент ничем не отличается от маркированных списков.

    Вместо единицы < ul> прописывается < menu> . Однако существенные различия появляются если судить со стороны работы . Так, второй пример ускоряет работу поисковых программ и роботов в . При анализе структуры сайта они сразу понимают, что данный кусок кода отвечает за карту сайта.

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

    Создадим-ка горизонтальную навигационную модель

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

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

    Для трансформации мы используем свойство css под названием transform . Чтобы указать трансформацию, используется встроенная функция skewX , в которой угол наклона указывается в градусах.

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

    • -ms- (Internet Explorer)
    • -o- (Opera)
    • -webkit- (Chrome, Safari)
    • -moz- (Firefox)

    А теперь полученные знания применим к написанию примера.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

    Горизонтальная панель Главная О компании Продукция Контакты

    Горизонтальная панель li { display: inline-block; margin-right: 6px; background: #FF8C00; transform: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg); -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); } a { display: block; padding: 18px 35px; color: #fff; transform: skewX(40deg); -webkit-transform: skewX(40deg); -o-transform: skewX(40deg); -ms-transform: skewX(40deg); -moz-transform: skewX(40deg); } li:hover { background: #1C1C1C; }

  • Главная
  • О компании
  • Продукция
  • Контакты
  А теперь вертикально. Я сказал вертикально!

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

  Для этого я воспользовался еще одним свойством css border-radius .

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

  Вертикальная панель li{ display: block; margin: 13px; padding: 13px; background: #FF8C00; width:20%; text-align:center; font-size:20px; border-radius:10px; } a { color: #fff; } li:hover { background: #1C1C1C; }

  • Главная
  • О компании
  • Продукция
  • Контакты

  Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления display: inline-block , который собственно и отвечал за горизонтальное расположение пунктов навигации.

  Подпункты в меню: выпадающий список

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

  

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

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

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

  Выпадающий список body { padding-left: 30%; font-size: 18px; } .m-menu { margin: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background: #FF8C00; } .m-menu > li { position: relative; display: inline-block; } .m-menu a { display: block; margin-left: -2px; padding: 13px; color: #fff; border-left: 3px solid #fff; } .m-menu a:hover { background: #1C1C1C; } .m-menu .s-menu { left: 10px; position: absolute; display: none; width: 155px; margin: 0; padding: 0; list-style: none; background: #FF8C00; } .m-menu .s-menu a { border: 1px solid #000; } .m-menu > Главная Продукция Конфеты Торты Печенье Контакты

  Выпадающий список body { padding-left: 30%; font-size: 18px; } .m-menu { margin: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background: #FF8C00; } .m-menu > li { position: relative; display: inline-block; } .m-menu a { display: block; margin-left: -2px; padding: 13px; color: #fff; border-left: 3px solid #fff; } .m-menu a:hover { background: #1C1C1C; } .m-menu .s-menu { left: 10px; position: absolute; display: none; width: 155px; margin: 0; padding: 0; list-style: none; background: #FF8C00; } .m-menu .s-menu a { border: 1px solid #000; } .m-menu > li:hover .s-menu { display: block; }

  • Главная
  • Продукция
    • Конфеты
    • Торты
    • Печенье
  • Контакты