Просторы всемирной сети стремительно растут, размещая огромное множество различных веб-сайтов, каждый из которых стремится привлечь внимание посетителей и заинтересовать их.
Способы покорения людских сердец выбираются разные — от применения Flash анимации, использования баннеров и смелых дизайнерских решений до различных звуковых и визуальных эффектов.
Однако не стоит забывать, что сайт — это в первую очередь источник информации, поэтому удобству представления контента на сайте веб-разработчик должен уделять особое внимание и именно поэтому навигация, понятная посетителю на интуитивном уровне, так важна.
Меню является самой распространённой системой навигации на сайте, которую можно сравнить с оглавлением в книге. Меню должно быть заметно на любой странице ресурса, позволяя пользователю мгновенно перейти на интересующий раздел.
На объёмных сайтах, содержащих более 50 страниц, невозможно разместить полное меню для доступа ко всем разделам.
В таком случае следует использовать выпадающее меню на CSS, при клике на которое появляются дополнительные ссылки на подразделы.
Разновидности меню в CSS
Существует сразу несколько видов и типов CSS меню:
- Главное меню. Это список определённых ссылок на ключевые разделы веб-сайта.
- Дополнительное меню. Такое меню имеет иерархическую структуру и бывает трёх типов:
- Выпадающее меню. Раскрывается при наведении курсора мыши на пункт;
- Всплывающее меню сайта. Раскрывается при клике на определённом пункте;
- Статическое дополнительное меню для CSS. Древовидная структура, представленная в уже раскрытом виде.
Как создать меню в CSS?
Приведём пример создания простого горизонтального и вертикального меню на CSS с пояснениями.
Код горизонтального меню прописывается следующим образом:
В конечном итоге получается подобное горизонтальное меню:
Код вертикального меню записывается так:
Вертикальное меню, полученное при помощи данного кода, выглядит так:
Руководствуясь всеми вышеперечисленными принципами, приведём код для простого выпадающего меню:
Получаем такое выпадающее меню:
Как вы видите, достаточно простая HTML разметка и всего несколько строк CSS кода позволяют создать простое, но стильное меню, которое обязательно найдёт свое место в каком-либо веб-сайте. Обязательно попробуйте реализовать что-то подобное самостоятельно.
Желаем удачи!
www.internet-technologies.ru
Пример 2. Создание меню для сайта CSS методами
или как сделать CSS меню без использования изображения
HTML код меню:
<title>Создание меню для сайта CSS методами</title> |
Посмотреть CSS РєРѕРґ меню
Пример 3. Красивое горизонтальное CSS меню для сайта
или как сделать CSS меню для сайта без использования изображения
HTML код меню:
<title>Создание красивого горизонтального CSS меню для сайта</title> |
Посмотреть CSS РєРѕРґ меню
Пример 4. Горизонтальное меню для сайта CSS методами
или как сделать CSS меню для сайта без использования изображения
HTML код меню:
<title>Создание горизонтального CSS меню без изображения</title> |
Посмотреть CSS РєРѕРґ меню
ab-w.net
1. Горизонтальное выпадающее меню на CSS3
Источник | Пример
Первый туториал CSS3 Dropdown Menu — самый новый в подборке (за апрель 2016). Плюсы решения: в данном горизонтальном выпадающем меню для сайта в подпунктах есть иконки, реализация и сам CSS код достаточно простые для понимания и внедрения.
Шаг1 — HTML разметка
Первым делом создаем неупорядоченный список в HTML с якорными ссылками (#) для его элементов. Туда же в один из пунктов добавляем еще один вложенный список, который будет отвечать за подменю.
Шаг2 — отображение меню
Удаляем лишние отступы в CSS для элементов горизонтального выпадающего меню сайта. На этом же этапе установим фиксированную ширину и высоту пунктов меню, а также добавим закругленные углы.
Шаг3 — оформление ссылок
Кроме базовых фишек в стилях (шрифт, цвет, высота) используем опцию тени text-shadow и создаем плавный переход цвета текста при наведении. Также добавляем в меню разделители, убирая границу у первого элемента слева и у последнего справа.
Шаг4 — подменю
Поскольку у нас меню сайта на CSS выпадающее, то следует задать также оформление вложенному списку. Вначале ставим отступ 40px сверху и 0px слева + добавлем округленные углы. Для показа/скрытия подменю изначально устанавливаем свойство прозрачности (opacity) равное нулю, а при наведении — единице. Для создания эффекта появления подменю указываем значение высоты списка в ноль, а при hover = 36px.
Ширину ссылок ставим = 100px, внизу всех элементов кроме последнего добавляется граница border-bottom. Также, по желанию, вы можете разместить картинки для пунктов подменю (внимание! не забудьте изменить пути к изображениям в коде на используемые вами).
Мне лично нравится простота реализации и использование иконок. Вот итоговый код с codepen:
2. Простое выпадающее CSS3 меню
Источник
Вариант от Josh Riser визуально похож на предыдущее выпадающее меню на HTML и CSS. В коде нет дочернего селектора " > " (полезен в многоуровневых конструкциях), но автор удачно использует эффекты CSS3 (transition, box-shadow и text-shadow) для более красивого результата. По ссылке в источнике отсутствует описание процесса создания горизонтального выпадающего меню, поэтому я сразу приведу итоговый код:
3. Выпадающее меню с блоком поиска
Источник | Пример
В данном примере мы рассмотрим как сделать выпадающее меню на CSS, в котором кроме пунктов будет находится блок поиска. Подобную реализацию часто можно встретить в современных шаблонах сайтов. По времени внедрения и сложности решение является чуть сложнее предыдущих. Оно опубликовано в мае 2013, поэтому, возможно, некоторые вещи вам придется подправить, хотя при нашем тестировании все отлично работало.
HTML код
Для навигации, как всегда, используется неупорядоченный список (с классом nav). Обычные пункты меню являются элементами списка (li) и содержат ссылки (a href) без каких-либо классов и ID. Исключением являются 3 специализированных элемента данного горизонтального выпадающего меню с такими ID:
- settings — ссылка картинка;
- search — блок с поиском и соответствующей кнопкой;
- options — содержит подменю (реализовано через список с классом subnav).
Также в коде увидите скрипт prefixfree для использования свойств CSS без префиксов. Итоговый вариант HTML для выпадающего меню имеет вид:
CSS для меню
1. Базовые стили и элементы меню
Во-первых, указываем шрифт Montserrat, темный серый фон и фиксированную высоту для пунктов меню. Все элементы имеют выравнивание float: left и позиционирование relative дабы потом можно было добавить подменю с position: absolute;
2. Оформление ссылок
Для пунктов меню применяется базовое оформление + css hover эффект при наведении. Высота такая же как и в классе nav. Для #settings ссылки-картинки в начале меню задается выравнивание.
3. Блок поиска
Данный элемент имеет фиксированную ширину и состоит из нескольких частей — поля ввода (#search_text) с зеленым фоном и кнопки поиска (#search_button). В некоторых браузерах цвет фона может быть серым.
4. Выпадающее подменю
Финальный штрих позволит нам как сделать выпадающее меню на CSS, которое срабатывает для последнего пункта #options.
В стилях найдете вставку фонового изображения треугольника (triangle.png) для обозначения подменю — не забудьте указать правильный путь для этой и других картинок в примере. Появлением подменю реализуется с помощью свойства opacity. Итоговое решение на codepen:
4. Многоуровневое выпадающее CSS меню
Источник
В данном варианте в основном используются приемы CSS2.1, решение плюс-минус новое — за март 2015. Если вам не хватает одного подуровня в горизонтальном выпадающем меню для сайта, то этот пример содержит сразу три. С помощью псевдокласса :only-child для пунктов добавляется символ «+» обозначающих наличие подменю.
В целом, неплохой и несложный пример. Не будем детально описывать процесс реализации, т.к. он похож на предыдущие — сначала создаете HTML каркас, а потом постепенно добавляете для него стили. Итоговый код скачивайте по ссылке на источник, частично его можно глянуть в Codepen:
Итого
Выше мы рассмотрели 4 варианта как сделать выпадающее меню на CSS + HTML для шапки сайта (header), хотя подобных примеров в сети гораздо больше. Есть решения с jQuery, но это, скорее всего, пригодится только для реализации каких-то специальных эффектов и нестандартных задач. В большинстве случаев хватит связки CSS + HTML, тем более, что сейчас главные требования к меню — это удобство и быстрая скорость загрузки.
Напоследок два замечания по кодам выше. В некоторых примерах для выпадающего меню в CSS используются изображения, поэтому вам придется внимательно просмотреть пути к картинкам и указать правильные значения для своего сайта. Во-вторых, часть решений 2х-3х летней давности, поэтому следует еще раз дополнительно проверять их работоспособность в разных браузерах.
Если знаете еще какие-то интересные современные реализации горизонтальных выпадающих меню для сайта, присылайте ссылки в комментариях.
design-mania.ru
ДемоИсходники
Приветствую Вас, уважаемые читатели блога webcodius! Обязательным элементом практически любого сайта является меню. Поэтому если Ваш сайт имеет больше одной страницы, то без навигационного меню скорей всего не обойтись. Ведь без меню пользователю будет трудно найти нужные ему странички.
Так как любое меню представляет из себя список ссылок, которые ведут на внутренние страницы сайта. Для создания меню обычно используют маркированные списки, которые создаются с помощью html тегов <ul> и <li>. Но как известно элементы списка по умолчанию выстраиваются вертикально друг под другом, а что если необходимо сделать горизонтальное меню? С использованием CSS это не является большой проблемой.
Для начала создадим обычный маркированный список, содержащий пункты нашего меню:
<ul id=»menu»>
<li><a href=»#»>Главная</a></li>
<li><a href=»#»>Новости</a></li>
<li><a href=»#»>Контакты</a></li>
<li><a href=»#»>О сайте</a></li>
</ul>
Для того чтобы идентифицировать список и задать для него нужные css стили, я добавил к нему атрибут id с идентификатором "menu".
По умолчанию без каких-либо правил CSS он будет выглядеть следующим образом:
- Главная
- Новости
- Контакты
- О сайте
Как видно элементы списка выстроились вертикально друг под другом и если нам нужно вертикальное меню, то если стилизовать нужным образом ссылки (добавить фоновый цвет, рамки, отступы, изменить шрифт) можно получить привлекательную навигационную панель.
Если же требуется получить горизонтальное меню, то просто необходимо расположить элементы списка по горизонтали. Для этого к селектору LI следует добавить стилевое свойство display со значением inline или inline-block. Я буду использовать правило display:inline-block. Итак, для того, чтобы элементы списка выстроились по горизонтали просто добавляем код CSS:
<style>
ul#menu li{
display:inline-block; /* расположить пункты горизонтально */
}
</style>
Теперь элементы списка будут расположены по горизонтали:
Как видим пункты меню выстроились в один горизонтальный ряд. Но пока на меню похоже не очень. Теперь, чтобы получить полноценную навигационную панель, оформим меню с помощью css стилей. Для начала добавим фон для панели, растянем ссылки на весь пункт <code>li</code>, уберем подчеркивание ссылок, настроим отступы и др.:
<style>
#menu, #menu li {
margin: 0; /* убрать внутренние отступы */
padding: 0; /* убрать внешние отступы */
}
#menu {
background: #03658e; /* цвет фона навигационной панели */
}
#menu li{
display:inline-block; /* расположить пункты горизонтально */
text-align: center; /* текст горизонтально по центру */
}
#menu a {
display: block; /* ссылка растягивается на весь пункт li */
padding: 5px 15px; /* задаем внутренние отступы */
color: #fff; /* цвет текста */
text-decoration: none; /* убрать нижнее подчёркивание у ссылок */
}
#menu a:hover {
background: #8AB8CC; /* фон пунктов при наведении */
}
</style>
В итоге получится такое привлекательное меню:
Вообще внешний вид меню далее зависит только от вашей фантазии и знания свойств css. Далее для примера приведу несколько вариантов оформления меню.
Горизонтальное меню по центру
Выравнять меню по центру можно так:
<style>
#menu, #menu li {
margin: 0;
padding: 0;
}
#menu {
text-align: center; /* пункты и текст горизонтально по центру */
background: #03658e;
}
#menu li{
display:inline-block;
text-align: center;
}
#menu a {
display: block;
padding: 5px 15px;
color: #fff;
font-size:150%;
text-decoration: none;
}
#menu a:hover {
background: #8AB8CC;
}
</style>
Результат:
Либо так:
<style>
#menu, #menu li {
margin: 0;
padding: 0;
}
#menu {
max-width: 550px; /* ограничение длины панели */
margin: 0 auto; /* навигационная панель по центру страницы */
text-align: center;
background: #03658e;
}
#menu li{
display:inline-block;
text-align: center;
}
#menu a {
display: block;
padding: 5px 15px;
color: #fff;
font-size:150%;
text-decoration: none;
}
#menu a:hover {
background: #8AB8CC;
}
</style>
Результат:
webcodius.ru
HTML код меню
<ul id="menu"> <li><a href="http://sitear.ru">Главная</a></li> <li><a href="http://sitear.ru">Дизайн, CSS</a></li> <li><a href="http://sitear.ru">Программирование</a></li> <li><a href="http://sitear.ru">Еще пункт меню</a></li> </ul>
По html структуре объяснять нечего, простой UL список. Как упоминалось раньше, семантика соблюдается. Семантика – это когда html тег соответствует содержимому. Если разделы меню сделать DIV блоками, это не будет семантикой. Равнозначные элементы должны быть списком. Посмотрим, что у нас получилось на данном этапе:
UL элемент является блочным, поэтому его ширина будет 100% (на всю ширину страницы). LI также блочный элемент, а вот A – не блочный. Убедиться в этом можно с помощью наложения рамки в css стиле блока – border:1px solid #f00; Мне часто приходиться пользоваться этой хитростью, чтобы видеть границы элементов.
CSS код меню
Для придания этому меню горизонтального положения, выравнивания по центру и соответствующего вида, напишем следующий CSS код:
#menu{list-style:none; width:500px; padding:0; margin: auto;} #menu li{float:left; font:bold 14px Arial;} #menu a{color:#666; display:block; height:40px; line-height:36px; padding:0px 10px 0px 10px; background:#eee; text-decoration:none;} #menu a:hover{color:#fff; background:#888;}
На данном этапе получилось следующее:
Разбор полетов
Разберем все поэтапно, до каждой мелочи:
#menu {…} – С помощью этого выражения мы присваиваем стили для UL элемента, у которого id=menu.
list-style:none; – убираем маркеры (пульки), слева от каждого элемента в списке.
width:500px; – ширина меню 500 пикселей.
margin: auto; – выравнивает меню по центру страницы. Если не будет указана ширина, то выравнивания не произойдет, поэтому предыдущий параметр обязателен.
padding:0; – устанавливаем нулевые внутренние отступы. То есть убираем их вообще. Если не знаете что это дает, установите их в 20px и посмотрите, что измениться.
#menu li {…} – присваиваем стили для LI элементов.
float:left; – обтекание элемента по левой стороне. Это выражение придает меню горизонтального положения.
font:bold 14px Arial; – устанавливаем стиль для текста в самой короткой форме, bold – жирный текст, 14px – размер шрифта в пикселях, Arial – тип шрифта.
#menu a {…} – присваиваем стили для A элемента (ссылки).
color:#666; – темно-серый цвет шрифта.
display:block; — делаем элемент блочным. Это даст возможность присваивать высоту для элемента. В практическом аспекте, это делает кликабельным не только текст ссылки, ни и поле вокруг текста.
height:40px; – высота меню будет 40 пикселей.
line-height:36px; – высота верхней линии над текстом. Это дает возможность задавать вертикальное положение текста внутри блока. Мы используем это для выравнивания текста в вертикальном направлении.
padding:0px 10px 0px 10px; – делаем внутренние отступы слева и справа по 10 пикселей.
background:#eee; – устанавливаем серый цвет фона для элементов меню.
text-decoration:none; – убираем линию подчеркивающую ссылку.
#menu a:hover {…} – присваиваем стили для A элемента при наведении на нее мышки.
color:#fff; – меняем цвет текста на белый.
background:#888; – цвет фона меняем на темно серый.
sitear.ru
HTML-код для горизонтального меню
Когда-то давно главное меню для сайта делали на картинках, таблицах, флэше и возможно на чем-то еще, но в наше время существует самый популярный и он же правильный метод создания меню используя теги «списка».
Для создания меню используют теги <ul>, <li> и <a>.
Если вам не совсем понятно, что такое эти html-теги, css, таблицы, то почитайте об основных технологиях для создания сайта.
Пример использования html тегов для создания меню в коде ниже:
<ul> <li><a href="#">Главная</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Цены</a></li> <li><a href="#">Контакты</a></li> </ul>
Стандартные CSS стили для горизонтального меню
ul { list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем отступы*/ padding-left: 0; /*убираем отступы*/ } a { text-decoration: none; /*убираем подчеркивание текста ссылок*/ } li { float:left; /*Размещаем список горизонтально для реализации меню*/ margin-right:5px; /*Добавляем отступ у пунктов меню*/ }
Мы получаем готовое верхнее меню в шапку, без каких-либо особых стилей и наворотов это можно назвать каркасом вашего будущего красивого меню. Если вы скопируете и поставите у себя данный html и css это будет выглядеть следующим образом.
Пример каркаса (шаблона) вашего будущего меню
Получилось все достаточно простенько, вы ,конечно же, хотите сразу красивое главное меню, но без понимания основ у вас просто не получится создать хорошее меню без ошибок в html и css.
Существует так же несколько других CSS методов используемых для того чтобы сделать меню горизонтальным помимо float:left;, например, display:inline-block; или display:flex;, но рекомендуется использовать способ описанный выше.
Давайте же наполним наш шаблон меню различными стилями и сделаем его красивым.
Примеры красивого горизонтального меню для сайта
Сейчас я приведу несколько готовых примеров с готовым дизайном горизонтального меню.
Все «красивости» вы можете создать для своего сайта сами, а не искать в интернете. Проще всего это сделать взяв за основу один из примеров ниже
Простое меню синего цвета с раздельными пунктами
CSS стили «верхнего» меню
Ниже расположены стили данного меню. HTML остается тем же, что и в «каркасе» меню.
ul { list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем отступы*/ padding-left: 0; /*убираем отступы*/ margin-top:25px; /*делаем отступ сверху*/ } a { text-decoration: none; /*убираем подчеркивание текста ссылок*/ background:#30A8E6; /*добавляем фон к пункту меню*/ color:#fff; /*меняем цвет ссылок*/ padding:10px; /*добавляем отступ*/ font-family: arial; /*меняем шрифт*/ border-radius:4px; /*добавляем скругление*/ -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; } a:hover { background:#1C85BB;/*добавляем эффект при наведении*/ } li { float:left; /*Размещаем список горизонтально для реализации меню*/ margin-right:5px; /*Добавляем отступ у пунктов меню*/ }
Главное меню, расположенное на цветной линии с красным фоном
CSS стили меню на цветной линии
ul { list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем отступы*/ padding-left: 0; /*убираем отступы*/ margin-top:25px; /*делаем отступ сверху*/ background:#FF4444; /*добавляем фон всему меню (заменив этот параметр, вы поменяете цвет всего меню)*/ height: 50px; /*задаем высоту*/ } a { text-decoration: none; /*убираем подчеркивание текста ссылок*/ background:#FF4444; /*добавляем фон к пункту меню (заменив этот параметр, вы поменяете цвет всех пунктов меню)*/ color:#fff; /*меняем цвет ссылок*/ padding:0px 15px; /*добавляем отступ*/ font-family: arial; /*меняем шрифт*/ line-height:50px; /*ровняем меню по вертикали*/ display: block; border-right: 1px solid #F36262; /*добавляем бордюр справа*/ -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; } a:hover { background:#D43737;/*добавляем эффект при наведении*/ } li { float:left; /*Размещаем список горизонтально для реализации меню*/ }
Выпадающее меню на HTML+CSS
Для реализации дополнительного выпадающего (раскрывающегося) меню на сайте у какого-либо пункта меню нам необходимо добавить дополнительный перечень пунктов в HTML-код для какой-либо ссылки из горизонтального меню и изменить стили CSS. В стилях мы будем применять простой трюк — изменение отображения раскрывающегося меню по средствам наведения на нужный нам пункт в верхнем меню. Для примера возьмем пункт «услуги».
Пример создания простого выпадающего меню
HTML код выпадающего меню
<ul> <li><a href="#">Главная</a></li> <li><a href="#">Услуги</a> <ul> <li><a href="#">Услуга 1</a></li> <li><a href="#">Длинная услуга 2</a></li> <li><a href="#">Услуга 3</a></li> </ul> </li> <li><a href="#">Цены</a></li> <li><a href="#">Контакты</a></li> </ul>
Стили CSS выпадающего меню
ul { list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем отступы*/ padding-left: 0; /*убираем отступы*/ margin-top:25px; /*делаем отступ сверху*/ background:#819A32; /*добавляем фон всему меню*/ height: 50px; /*задаем высоту*/ } a { text-decoration: none; /*убираем подчеркивание текста ссылок*/ background:#819A32; /*добавляем фон к пункту меню*/ color:#fff; /*меняем цвет ссылок*/ padding:0px 15px; /*добавляем отступ*/ font-family: arial; /*меняем шрифт*/ line-height:50px; /*ровняем меню по вертикали*/ display: block; border-right: 1px solid #677B27; /*добавляем бордюр справа*/ -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; } a:hover { background:#D43737;/*добавляем эффект при наведении*/ } li { float:left; /*Размещаем список горизонтально для реализации меню*/ position:relative; /*задаем позицию для позиционирования*/ } /*Стили для скрытого выпадающего меню*/ li > ul { position:absolute; top:25px; display:none; } /*Делаем скрытую часть видимой*/ li:hover > ul { display:block; width:250px; /*Задаем ширину выпадающего меню*/ } li:hover > ul > li { float:none; /*Убираем горизонтальное позиционирование*/ }
А чтобы понять, какие именно у вас должны быть услуги и категории рекомендую ознакомиться с материалом: составление структуры и семантического ядра.
Я постарался максимально кратко рассказать вам о том как создать главное горизонтальное меню, сделать несколько шаблонов, как добавить к нему простые стили и сделать его симпатичнее, как сделать выпадающее меню для вашего сайта. Для удобства я собрал все меню, представленные выше, в одном html-файле, который вы можете скачать ниже. Выглядит это как на скриншоте:
Поделитесь в одной из социальных сетей и скачивание сразу же будет доступно.
Благодарю за внимание.
nz4.ru
Инструменты для создания панели навигации
В языке разметки существует несколько способов создания меню. Основная их концепция заключается в использовании ненумерованного списка. Таким образом, в привычном для нас html 4 разработчики прописывают на станице теги <ul> и <li>.
Как оговаривалось в предыдущих публикациях, парный элемент <ul> создает маркированный список, а <li> — один элемент списка. Для наглядности давайте напишем код простого меню:
Однако с появлением платформы html5 язык разметки пополнился дополнительными тегами. Именно поэтому меню современных веб-сайтов создается при помощи специального тега <menu>. В использовании этот элемент ничем не отличается от маркированных списков.
Вместо единицы <ul> прописывается <menu>. Однако существенные различия появляются если судить со стороны работы браузеров. Так, второй пример ускоряет работу поисковых программ и роботов в интернете. При анализе структуры сайта они сразу понимают, что данный кусок кода отвечает за карту сайта.
Бывают горизонтальные, вертикальные и выпадающие меню. Иногда панель навигации оформляют в виде изображения. Так как сегмент технологий расширился, веб-сервисы делают адаптивными, т.е. структура страниц автоматически адаптируется под размер экрана девайсов. Рассмотрим же перечисленные группы меню.
Создадим-ка горизонтальную навигационную модель
Такой вид навигации наиболее популярен. При горизонтальном оформлении панели все пункты меню расположены в шапке страницы или в «подвале» (иногда навигационные элементы дублируются, отображаясь одновременно и сверху, и снизу).
В качестве примера мы создадим горизонтальную панель, пункты меню которого будут оформлены при помощи css (каскадных таблиц стилей), а точнее трансформированы. Так, каждый отдельный элемент будет находится в скошенном прямоугольнике. Заинтриговал?
Для трансформации мы используем свойство css под названием transform. Чтобы указать трансформацию, используется встроенная функция skewX, в которой угол наклона указывается в градусах.
К сожалению, каждый браузер работает с данным свойством по-своему, не смотря на прописанные стандарты. Поэтому для обозначения того или иного браузера были созданы специальные префиксы:
- -ms- (Internet Explorer)
- -o- (Opera)
- -webkit- (Chrome, Safari)
- -moz- (Firefox)
А теперь полученные знания применим к написанию примера.
А теперь вертикально. Я сказал вертикально!
Для второй программы используем за основу предыдущий код. Я захотел, чтобы пункты моего вертикального меню были не скошены, а с округленными углами.
Для этого я воспользовался еще одним свойством css border-radius.
В предыдущих статьях я уже работал с данным параметром, так что сложностей с пониманием его функционирования, думаю, не возникнет.
Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления display: inline-block, который собственно и отвечал за горизонтальное расположение пунктов навигации.
Подпункты в меню: выпадающий список
Мы с вами рассмотрели основные группы навигационных панелей, однако существует еще несколько разновидностей или лучше сказать дополнений.
Иногда возникают такие ситуации, когда некоторые из пунктов дополняют основные. В этом случае не обойтись без выпадающих списков. Они создаются путем преобразований инструментами css.
Ниже я прикрепил код небольшой программки, в которой реализуется данный подход.
В данном примере я разделил единицы меню на два класса:
- m-menu
- s-menu
Первый класс отвечает за основное меню, а s-menu – за подменю.
В коде можно встретить такой прием, как .m-menu > li:hover или .m-menu > li.
Так, при помощи :hover указывается, как будет вести себя элемент при наведении на него курсора.
При этом знак «>» видоизменяет селектор так, чтобы блочно-строчными были только объекты, относящиеся к верхнему уровню.
Изначально подменю было задано display: none, что оповещает обработчик скрывать данный объект. После наведения на элемент навигации с указанием hover, значение свойства display меняется на block и поэтому открывается выпадающий список.
Как видите, реализация такого приема очень простая.
Теперь вы освоили основные виды навигационных панелей и можете самостоятельно их видоизменять, дополнять и модернизировать. Если вам понравилась моя статья, то подписывайтесь на обновления блога и делитесь источником знаний с друзьями и коллегами. Пока-пока!
С уважением, Роман Чуешов
romanchueshov.ru
Горизонтальное меню для сайта
Как сделать горизонтальное меню
<ul id="nav1"> <li><a href="#1">Пункт 1</a> <li><a href="#2">Пункт 2</a> <li><a href="#3">Пункт 3</a> <li><a href="#4">Пункт 4</a> </ul>
Как создать простое горизонтальное меню на CSS
<ul id="nav2"> <li><a href="#1">Пункт 1</a> <li><a href="#2">Пункт 2</a> <li><a href="#3">Пункт 3</a> <li><a href="#4">Пункт 4</a> </ul>
Горизонтальное меню по центру
<ul id="nav3"> <li><a href="#1">Пункт 1</a> <li><a href="#2">Пункт 2</a> <li><a href="#3">Пункт 3</a> <li><a href="#4">Пункт 4</a> </ul>
<ul id="nav4"> <li><a href="#1">Пункт 1</a> <li><a href="#2">Пункт 2</a> <li><a href="#3">Пункт 3</a> <li><a href="#4">Пункт 4</a> </ul>
Создание горизонтального HTML меню с пунктами одинаковой ширины
<ul id="nav5"> <li><a href="#1">Пункт 1</a> <li><a href="#2">Пункт 2</a> <li><a href="#3">Пункт 3</a> <li><a href="#4">Пункт 4</a> </ul>
Код горизонтального меню, растянутого на всё доступное пространство с пунктами разной величины
<ul id="nav6"> <li><a href="#1">Пункт 1</a> <li><a href="#2">Пункт 2</a> <li><a href="#3">Пункт 3</a> <li><a href="#4">Пункт 4</a> </ul>
shpargalkablog.ru