Как сделать горизонтальное меню в html
Здесь создается навигационное меню с четырьмя пунктами: «Главная», «О нас», «Услуги» и «Контакты».
-
свойство display: flex; :
nav ul display: flex; list-style: none; margin: 0; padding: 0; > nav li margin-right: 20px; > nav a color: #000; text-decoration: none; > CSS меню
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню — раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент нашего списка будет содержать по одной ссылке:
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
#navbar
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
#navbar a < background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; >#navbar li
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
#navbar a:hover
Горизонтальное меню
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
#navbar < margin: 0; padding: 0; list-style-type: none; >#navbar li
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
#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
Выпадающее меню
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
#navbar ul < display: none; >#navbar li:hover ul
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.
#navbar, #navbar ul < margin: 0; padding: 0; list-style-type: none; >#navbar li < float: left; >#navbar ul li
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
#navbar ul < display: none; position: absolute; top: 100%; >#navbar li < float: left; position: relative; >#navbar
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
#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
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru
Навигационные панели с помощью CSS
Навигация присутствует на любом хорошем сайте, даже если он одностраничный. В зависимости от ситуации, навигационные ссылки могут вести на различные разделы сайта либо отправлять к закладке (якорю), расположенной на текущей странице. Грамотное составление навигации, в которой не запутается пользователь, требует определенных знаний и опыта. К дизайну навигационной панели также нужно подходить с умом, и в этом уроке мы расскажем вам, как создать удобное навигационное меню.
Создание навигации
Допустим, у нас есть простая навигация с пятью ссылками, созданная в HTML на основе маркированного списка:
Изначально, без стилей наша навигация выглядит, как обычный список:
Чтобы сделать этот элемент более похожим на навигационную панель, необходимо проделать несколько обязательных шагов. Во-первых, возле пунктов меню не нужны маркеры, а во-вторых, стандартные значения margin и padding , заданные браузером для списка, могут мешать, поэтому мы обнуляем их. В итоге получается следующее:
.menu
По сути, идентичные действия по отношению к спискам делает файл сброса стилей Reset.css, поэтому, если вы используете его на вашем сайте, то код выше можно не записывать.
После обнуления стандартных стилей списка можно приступать непосредственно к созданию стилей для навигации. Мы покажем, как делать вертикальные и горизонтальные панели.
Вертикальное меню
Создание вертикальной навигационной панели считается более легким занятием, нежели создание горизонтального меню. Главным образом потому, что нет необходимости задавать горизонтальное расположение ссылок. Это просто вертикальный список страниц сайта. И всё же некоторые важные стили применить придется.
Блочные ссылки
Прежде всего нужно сделать все теги блочными элементами:
.menu a
Существует несколько причин для этого:
- Вы сможете задавать отступы для ссылок.
- Блочный элемент занимает всю ширину контейнера, тогда как ширина строчного элемента зависит от его содержимого. Из-за этого могут появиться проблемы, если вы, например, решите установить для ссылок фоновый цвет: Строчные ссылки могут быть разной длины, что негативно отразится на внешнем виде.
- Исходя из второго пункта, можно отметить еще один положительный момент. Когда ссылка является блочным элементом, область ее кликабельности расширяется: даже если кликнуть по месту, где нет текста, она все равно сработает. Это удобно, потому что не надо прицеливаться по маленькой ссылке. А с помощью вертикальных отступов padding можно увеличить область кликабельности еще и по высоте.
Ширина меню
Следующее, что нам понадобится сделать — это задать ширину меню. Если у вас заранее не была определена ширина навигационной панели, и она не находится в контейнере, который ограничивает ее, то меню будет растянуто на всю ширину окна (как в нашем примере выше) — ведь блочный элемент по умолчанию ведет себя именно так. Вы можете задать необходимую ширину для элемента .menu , например:
.menu
Разделение пунктов
Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку .menu :
.menu a < border-top: 1px solid blue; >.menu
Высота пунктов и вертикальное выравнивание
Сейчас ссылки меню выглядят слишком низкими, расположенными близко друг к другу. Если текст каждой ссылки не будет занимать более одной строки, то увеличить их высоту и сохранить при этом текст вертикально по центру можно с помощью свойств height и line-height :
.menu a
Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.
Горизонтальное меню
Основная задача при создании горизонтальной навигации — расположить пункты меню в один ряд. Это можно сделать несколькими способами.
Способ первый
Первый вариант — задать пунктам списка свойство display со значением inline либо inline-block :
.menu li
После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:
.menu a
Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right :
.menu li
Этот код не убирает промежутки, а прикрывает их за счет сдвига элементов на пять пикселей влево. Данный способ нельзя назвать очень надежным, потому что размер промежутка может варьироваться в зависимости от других стилей.
Если промежутки между пунктами не запланированы в вашем дизайне, лучше воспользоваться вторым методом горизонтального выстраивания элементов.
Способ второй
.menu li
Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим, ), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left . Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:
.menu
Это также поможет вернуть нормальную высоту родителя плавающих элементов. Мы уже говорили об этой проблеме в предыдущих уроках, но тогда мы решали ее через специальный хак с использованием псевдоэлемента :after . Пример выше — это еще один способ решить вопрос с исчезнувшей высотой контейнера.
Примечание: если вы установите фон для элемента .menu , то вы не увидите его до тех пор, пока не примените к нему overflow: hidden . Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?
В следующем уроке мы более детально расскажем о возможностях селекторов атрибутов, с помощью которых можно задавать стили ссылкам в зависимости от атрибутов и их значений.
Как создать выпадающее меню навигации с помощью CSS
Интересное и привлекательное меню навигации имеет значительную роль для каждой веб-страницы. Такие меню важны для легкого доступа к вашей странице. Кроме этого, пользователям нравятся хорошо спроектированные веб-страницы.
В этой статье мы расскажем, как создать выпадающее меню навигации. А сейчас пошагово покажем, как создать интересное навигационное меню.
Есть три способа создания выпадающего меню с помощью Flash, JavaScript и CSS/HTML.
Мы покажем меню на основе CSS/HTML, так как оно имеет некоторые преимущества. Это самый легкий способ, а также имеет небольшой размер приложения.
Использование CSS/HTML — самый лучший метод, чтобы избежать конфликтов при JavaScript. Помимо этого, меню на основе CSS/HTML могут быть использованы многими.
1. Создайте HTML.
Как всегда мы начинаем с создания HTML.
- Создайте элемент с id. Создайте тег внутри элемента с классом «navbar». Тег
-
используется для указания неупорядоченного списка, который содержит элементы без порядковых номеров. Каждый элемент неупорядоченного списка описывается внутри тега .
- Внутри тега
- добавьте контент, который хотите показать в меню.
div >ul li> a href="#">Главная страницаa> li> li> a href="#">Учебникиa> ul> li>a href="#">Изучите HTMLa>li> li>a href="#">Изучите CSSa>li> li>a href="#">Изучите JavaScripta>li> li>a href="#">Изучите PHPa>li> ul> li> li> a href="#">Тестыa> ul> li>a href="#" >Основы CSSa>li> li>a href="#">Основы PHPa>li> li>a href="#">Основы JavaScripta>li> ul> li> li> a href="#">Инструментыa> ul> li>a href="#">Геометрические изображенияa>li> li>a href="#">Color Pickera>li> li>a href="#">Генератор паролейa>li> li>a href="#">HTML редакторa>li> li>a href="#">Base 64a>li> ul> li> li> a href="#">Сниппетыa> ul> li>a href="#">CSSa>li> li>a href="#">JavaScripta>li> li>a href="#">Angulara>li> li>a href="#">Javaa>li> ul> li> li> a href="#">String Functionsa> ul> li>a href="#">Реверс строкиa>li> li>a href="#">URL кодерa>li> li>a href="#">Удаление пустых строкa>li> li>a href="#">Подсчет слов в строкеa>li> ul> li> ul>Первая часть готова. А теперь продолжим и создадим красивое навигационное меню.
2. Добавьте CSS.
Теперь, когда у нас есть половина кода, можем добавить к нему стиль. С помощью CSS свойств создадим выпадающее меню.
- Установите для меню ширину и высоту с помощью свойств width и height.
- Установите z-index, чтобы убедиться, что навигационное меню будет находится поверх остальных элементов.
- Установите также цвет для всего меню с помощью свойства color. Можете выбрать цвет из нашего инструмента Color Picker.
#wrap< width: 100%; height: 50px; margin: 0; z-index: 99; position: relative; background-color: #444444; >- Установите свойство position в значение «absolute», чтобы навигационное меню не смещало остальные элементы вниз.
.navbar< height: 50px; padding: 0; margin: 0; position: absolute; >- Расположите элементы меню по горизонтали сверху от страницы с помощью свойства float со значением «left».
.navbar li < height: auto; width: 135.8px; float: left; text-align: center; list-style: none; font: normal bold 13px/1em Arial, Verdana, Helvetica; padding: 0; margin: 0; background-color: #444444; >- Добавьте стиль к остальным тегам привязки.
.navbar a< padding: 18px 0; border-left: 1px solid #ccc9c9; text-decoration: none; color: white; display: block; >- Добавьте стиль для фона меню, чтобы изменить цвет при наведении курсора мыши.
.navbar li:hover, a:hover < background-color: #444444; >- Добавьте стиль, чтобы скрыть выпадающее меню и еще один стиль для его отображения при наведении курсора мыши на элемент главного меню.
.navbar li ul< display: none; height: auto; margin: 0; padding: 0; > .navbar li:hover ul< display: block; >- Добавьте стиль к выпадающему меню.
.navbar li ul li< background-color: #444444; >- Измените границы для создания эффекта главного меню.
.navbar li ul li a< border-left: 1px solid #444444; border-right: 1px solid #444444; border-top: 1px solid #c9d4d8; border-bottom: 1px solid #444444; > .navbar li ul li a:hover< background-color: #a3a1a1; >А сейчас увидим, каким получилось выпадающее меню:
Пример
html> html> head> style> #wrap< width: 100%; height: 50px; margin: 0; z-index: 99; position: relative; background-color: #444444; > .navbar< height: 50px; padding: 0; margin: 0; position: absolute; > .navbar li< height: auto; width: 135.8px; float: left; text-align: center; list-style: none; font: normal bold 13px/1em Arial, Verdana, Helvetica; padding: 0; margin: 0; background-color: #444444; > .navbar a< padding: 18px 0; border-left: 1px solid #ccc9c9; text-decoration: none; color: white; display: block; > .navbar li:hover, a:hover < background-color: #444444; > .navbar li ul< display: none; height: auto; margin: 0; padding: 0; > .navbar li:hover ul< display: block; > .navbar li ul li < background-color: #444444; > .navbar li ul li a< border-left: 1px solid #444444; border-right: 1px solid #444444; border-top: 1px solid #c9d4d8; border-bottom: 1px solid #444444; > .navbar li ul li a:hover< background-color: #a3a1a1; > style> head> body> h2>Создайте модальное окно h2> div id="wrap"> ul class="navbar"> li> a href="#">Главная страница a> li> li> a href="#">Учебники a> ul> li>a href="#">Изучите HTML a> li> li>a href="#">Изучите CSS a> li> li>a href="#">Изучите JavaScript a> li> li> a href="#">Изучите PHP a> li> ul> li> li> a href="#">Тесты a> ul> li>a href="#" >Основы CSS a> li> li>a href="#">Основы PHP a> li> li>a href="#">Основы JavaScript a> li> ul> li> li> a href="#">Инструменты a> ul> li>a href="#">Геометрические изображения a> li> li>a href="#">Color Picker a> li> li>a href="#">Генератор паролей a> li> li>a href="#">HTML редактор a> li> li> a href="#">Base 64 a> li> ul> li> li> a href="#">Сниппеты a> ul> li>a href="#">CSS a> li> li>a href="#">JavaScript a> li> li>a href="#">Angular a> li> li> a href="#">Java a> li> ul> li> li> a href="#">String Functions a> ul> li>a href="#">Реверс строки a> li> li>a href="#">URL кодер a> li> li>a href="#">Удаление пустых строк a> li> li>a href="#">Подсчет слов в строке a> li> ul> li> ul> div> body> html>Рассмотрим другой пример выпадающего меню навигации:
Пример
html> html> head> title>Заголовок документа title> style> *< margin: 0; padding: 0; list-style-type: none; box-sizing: border-box; > body< background: url('https://images.unsplash.com/photo-1532210317995-cc56d90177d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80') center; background-size: cover; min-height: 600px; font-family: 'Helvetica Neue', sans-serif; > nav< text-align: center; > .menu< display: inline-block; > .menu > li< float: left; color: #e298e1; width: 140px; height: 40px; line-height: 40px; background: rgba(0,0,0, 0.7); cursor: pointer; font-size: 17px; > .sub-menu< transform: scale(0); transform-origin: top center; transition: all 300ms ease-in-out; > .sub-menu li< font-size: 14px; background: rgba(0,0,0, 0.8); padding: 8px 0; color: white; border-bottom: 1px solid rgba(255,255,255, 0.2); transform: scale(0); transform-origin: top center; transition: all 300ms ease-in-out; > .sub-menu li:last-child< border-bottom: 0; > .sub-menu li:hover< background: black; > .menu > li:hover .sub-menu li< transform: scale(1); > .menu > li:hover .sub-menu< transform: scale(1); > style> head> body> nav> ul class="menu"> li> Италия ul class="sub-menu"> li>Рим li> li>Милан li> li>Венеция li> li>Лацио li> li>Флоренция li> ul> li> li> Франция ul class="sub-menu"> li>Париж li> li>Бурдо li> li>Марсель li> li>Тулуза li> ul> li> li> Испания ul class="sub-menu"> li>Мадрид li> li>Валенсия li> li>Барселона li> li>Севилья li> li>Бильбао li> ul> li> li> Россия ul class="sub-menu"> li>Москва li> li>Санкт-Петербург li> li>Тула li> li>Чехов li> ul> li> li> Германия ul class="sub-menu"> li>Берлин li> li>Мюнхен li> li>Франкфурт li> li>Гамбург li> li>Дрезден li> ul> li> ul> nav> body> html>