Как сделать меню в html
Перейти к содержимому

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

  • автор:

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

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

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

В данном примере создается навигационное меню с четырьмя ссылками. Для стилизации можно использовать CSS:

nav  background-color: #333; > nav ul  list-style: none; margin: 0; padding: 0; > nav li  display: inline-block; > nav a  color: #fff; display: block; padding: 10px; text-decoration: none; > nav a:hover  background-color: #555; > 

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

Как сделать горизонтальное меню в 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 – 2024 © puzzleweb.ru | razumnikum.ru

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

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

Как сделать горизонтальное меню: разметка и примеры оформления

  • Содержание:
  • HTML-разметка и базовые стили для горизонтального меню
  • 1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку
  • 2. Адаптивное меню для свадебного сайта
  • 3. Адаптивное меню с фестонами
  • 4. Адаптивное меню на ленточке
  • 5. Адаптивное меню с логотипом по середине
  • 6. Адаптивное меню с логотипом слева

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

HTML разметка для горизонтальной навигации

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

ul < list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/ padding-left: 0; /*убираем левый отступ, равный 40px*/ >a 

See the Pen GJxayB by Elena Nazarova (@nazarelen) on CodePen.

Способ 1. li

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

Способ 2. li

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

Способ 3. li

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

Способ 4. ul

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

1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку

@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed'); .menu-main < list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; >.menu-main li .menu-main li:after < content: "|"; color: #606060; display: inline-block; vertical-align:top; >.menu-main li:last-child:after .menu-main a < text-decoration: none; font-family: 'Ubuntu Condensed', sans-serif; letter-spacing: 2px; position: relative; padding-bottom: 20px; margin: 0 34px 0 30px; font-size: 17px; text-transform: uppercase; display: inline-block; transition: color .2s; >.menu-main a, .menu-main a:visited .menu-main a.current, .menu-main a:hover .menu-main a:before, .menu-main a:after < content: ""; position: absolute; height: 4px; top: auto; right: 50%; bottom: -5px; left: 50%; background: #feb386; transition: .8s; >.menu-main a:hover:before, .menu-main .current:before .menu-main a:hover:after, .menu-main .current:after @media (max-width: 550px) < .menu-main .menu-main li .menu-main li:after .menu-main a < padding: 25px 0 20px; margin: 0 30px; >>

2. Адаптивное меню для свадебного сайта

@import url('https://fonts.googleapis.com/css?family=PT+Sans'); .top-menu < position: relative; background: #fff; box-shadow: inset 0 0 10px #ccc; >.top-menu:before, .top-menu:after < content: ""; display: block; height: 1px; border-top: 3px solid #575350; border-bottom: 1px solid #575350; margin-bottom: 2px; >.top-menu:after < border-bottom: 3px solid #575350; border-top: 1px solid #575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; >.menu-main < list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; >.menu-main:before, .menu-main:after < content: "\25C8"; line-height: 1; position: absolute; top: 50%; transform: translateY(-50%); >.menu-main:before .menu-main:after .menu-main li < display: inline-block; padding: 5px 0; >.menu-main a < text-decoration: none; display: inline-block; margin: 2px 5px; padding: 6px 15px; font-family: 'PT Sans', sans-serif; font-size: 16px; color: #777777; border-bottom: 1px solid transparent; transition: .3s linear; >.menu-main .current, .menu-main a:hover < border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; >@media (max-width: 500px) < .menu-main li >

3. Адаптивное меню с фестонами

@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption'); .menu-main < list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; background: white; >.menu-main:after < content: ""; position: absolute; width: 100%; height: 20px; left: 0; bottom: -20px; background: radial-gradient(white 0%, white 70%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%) 0 -10px; background-size: 20px 20px; background-repeat: repeat-x; >.menu-main li .menu-main a < text-decoration: none; display: inline-block; margin: 0 15px; padding: 10px 30px; font-family: 'PT Sans Caption', sans-serif; color: #777777; transition: .3s linear; position: relative; >.menu-main a:before, .menu-main a:after < content: ""; position: absolute; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #F58262; opacity: 0; transition: .5s ease-in-out; >.menu-main a:before .menu-main a:after .menu-main a.current:before, .menu-main a.current:after, .menu-main a:hover:before, .menu-main a:hover:after .menu-main a.current, .menu-main a:hover @media(max-width:680px) < .menu-main li >

4. Адаптивное меню на ленточке

@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption'); .top-menu < margin: 0 60px; position: relative; background: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1), inset 150px 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12); >.top-menu:before, .top-menu:after < content: ""; position: absolute; z-index: 2; left: 0; width: 100%; height: 3px; >.top-menu:before < top: 0; border-bottom: 1px dashed rgba(255,255,255,.2); >.top-menu:after < bottom: 0; border-top: 1px dashed rgba(255,255,255,.2); >.menu-main < list-style: none; padding: 0; margin: 0; text-align: center; >.menu-main:before, .menu-main:after < content: ""; position: absolute; width: 50px; height: 0; top: 8px; border-top: 18px solid #5A394E; border-bottom: 18px solid #5A394E; transform: rotate(360deg); z-index: -1; >.menu-main:before < left: -30px; border-left: 12px solid rgba(255, 255, 255, 0); >.menu-main:after < right: -30px; border-right: 12px solid rgba(255, 255, 255, 0); >.menu-main li < display: inline-block; margin-right: -4px; >.menu-main a < text-decoration: none; display: inline-block; padding: 15px 30px; font-family: 'PT Sans Caption', sans-serif; color: white; transition: .3s linear; >.menu-main a.current, .menu-main a:hover @media (max-width: 680px) < .top-menu .menu-main li < display: block; margin-right: 0; >.menu-main:before, .menu-main:after .menu-main a >

5. Адаптивное меню с логотипом по середине

@import url('https://fonts.googleapis.com/css?family=Arimo'); .top-menu < position: relative; background: rgba(34,34,34,.2); >.menu-main < list-style: none; margin: 0; padding: 0; >.menu-main:after < content: ""; display: table; clear: both; >.left-item .right-item .navbar-logo < position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); >.menu-main a < text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px; letter-spacing: 2px; font-family: 'Arimo', sans-serif; font-weight: bold; color: white; transition: .3s linear; >.menu-main a:hover @media (max-width: 830px) < .menu-main < padding-top: 90px; text-align: center; >.navbar-logo < position: absolute; left: 50%; top: 10px; transform: translateX(-50%); >.menu-main li < float: none; display: inline-block; >.menu-main a < line-height: normal; padding: 20px 15px; font-size: 16px; >> @media (max-width: 630px) < .menu-main li >

6. Адаптивное меню с логотипом слева

@import url('https://fonts.googleapis.com/css?family=Arimo'); .top-menu < background: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; >.top-menu:after < content: ""; display: table; clear: both; >.navbar-logo .menu-main < list-style: none; margin: 0; padding: 0; float: right; >.menu-main li .menu-main a < text-decoration: none; display: block; position: relative; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing: 2px; font-family: 'Arimo', sans-serif; font-weight: bold; color: #F73E24; transition:.3s linear; >.menu-main a:before < content: ""; width: 9px; height: 9px; background: #F73E24; position: absolute; left: 50%; transform: rotate(45deg) translateX(6.5px); opacity: 0; transition: .3s linear; >.menu-main a:hover:before @media (max-width: 660px) < .menu-main < float: none; padding-top: 20px; >.top-menu < text-align: center; padding: 20px 0 0 0; >.menu-main a .menu-main a:before > @media (max-width: 600px) < .menu-main li >

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *