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

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

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

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

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

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

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

Стандартные 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 код выпадающего меню

Стили 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+css

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

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

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

Оценка: 4,60 из 5 (голосов: 5 )
Автор: No Zombies Allowed (Михаил)

Читать:

Как назвать колонку в sql

Посты по теме

Создание сайта в блокноте
15 Май 2015

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

CSS-класс ссылки и CSS-класс страницы у Joomla
27 Дек 2014

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

Узнавай новости первым

Ваш e-mail в безопасности

Виды горизонтальных меню для сайта

Поэтому базовой структурой для всех примеров ниже будет следующий код:

< li > < a href = "#" >Телевизоры < / a > < / li >
< li > < a href = "#" >Доставка и оплата < / a > < / li >

Меняться будет только атрибут id. И именно к нему будет привязано все основное форматирование меню.

Еще нам понадобится css-код, отвечающий за базовые css-правила:

font : 18px Calibri , Tahoma , sans — serif ;
margin : 20px auto ;
padding : 0 ;
list — style — type : none ;
margin — bottom : 20px ;
nav ul li a < text - decoration : none ; color : #fff; nav ul li a : hover < text - decoration : underline ;

Здесь мы задаем шрифт для body, а также ширину, отключаем отступы внешние (margin:0) и внутренние (padding:0) для элементов ul и li, задаем нижний отступ для ul и изменяем цвет ссылок ( внимание. ) на белый. А это значит, что при обновлении страницы, если вы все делаете пошагово, ссылок вы НЕ УВИДИТЕ. Т.к. на белом фоне body белый цвет текста не читается. Зато чуть позже нам это пригодится.

Вариант 1. Простое горизонтальное меню

Для первого элемента ul задаем , т.е. горизонтальное меню. Сейчас наш блок ссылок пока еще является вертикальным. Но в CSS мы зададим для элементов li свойство display: inline-block — и сразу получим горизонтальное меню. Добавим стандартный синий цвет ссылкам и отступы для li. Вот что получилось:

#menu-horiz li < display : inline - block ; padding : 3px 15px 3px 0 ; #menu-horiz a < color : #00f;

Вариант 2. Горизонтальное меню с inline-block элементами

Во втором примере рассмотрим форматирование меню, очень похожего на первый вариант, но с фоном, изменяющимся при наведении на пункт меню. Для ul во втором случае зададим id=»menu-bg». CSS:

display : inline — block ;
height : 40px ;
line — height : 40px ;
padding : 0 10px ;
border — right : 1px solid #0c3474;
#menu-bg li:hover < background : #0c3474;

Обратите внимание еще на один момент: здесь вертикальные отступы для пункта меню создавались не с помощью свойства padding, а с помощью высоты элемента (height: 40px) и такой же точно высоты для текста (line-height: 40px). За счет этого получилось, что текст расположился ровно посередине блока по вертикали.

Что получилось? Неплохое меню с одной неприятностью: при наведении на пункт меню фон меняется не для всего пункта. Остается примерно 5px с левой стороны предыдущего фона. В чем проблема? А в том, что строчно-блочные элементы (#menu-bg li ) при расположении с новой строки оставляют после себя один пробельный отступ. Именно он и равен примерно 5px. И может увеличиваться/уменьшаться в зависимости от размера шрифта. Поэтому один из способов борьбы с этой неприятностью — дописать отрицательный правый внешний отступ (margin-right) для элементов li:

Меню для сайта html горизонтальное

меню для сайта

Вот несколько горизонтальных меню для сайта. Предлагаю ознакомится с меню написанными на чистом HTML и CSS. Также вы сможете отредактировать эти меню в онлайн редакторе HTML прямо в этой статье.

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

Меню для сайта вариант № 1

Красивое цветное выпадающее меню для вашего сайта.

Меню для сайта вариант № 2

Минималистичное адаптивное меню для вашего сайта с использованием html css и js

Меню для сайта вариант № 3

Стилизованное меню для главной страницы, написано на чистом CSS

Меню для сайта вариант № 4

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

Меню для сайта вариант № 5

Меню с адаптацией под мобильные устройства HTML+CSS+JS

Меню для сайта вариант № 6

Ну а это не просто меню а считайте что почти готовая главная страница сайта. Очень специфический и интересный вариант на чистом CSS и HTML

Меню для сайта вариант № 7

Интересное красивое меню HTML + CSS

Меню для сайта вариант № 8

Еще один вариант меню на чистом CSS

Меню для сайта вариант № 9

Интересное меню на html и css подойдет для лендинга

Меню для сайта вариант № 10

Меню по типу дорожного указателя на чистом CSS

Меню для сайта вариант № 11

Меню для сайта HTML + CSS, ниже представлены два варианта одного и того же HTML меню.

Это только небольшой перечень меню для вашего сайта с использованием HTML и CSS.

Заключение:

Если у вас появятся вопросы задавайте их в комментариях и я помогу вам по возможности с html и css кодами.

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

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

Сделать его можно с помощью text-align: justify и псевдо-свойств :before и :after .

Пример 1

.wrp < width: 600px; margin: 0 auto >.menu < background: #b92525; padding: 20px 0 0 0; height: 40px; >.menu ul < text-align: justify; margin: 0; padding: 0; >.menu ul:before < content: ''; display: block; width: 100%; height: 0; >.menu ul:after < content: ''; width: 100%; height: 0; visibility: hidden; overflow: hidden; display: inline-block; >.menu li < display: inline-block; margin: 0; padding: 0; list-style: none; >.menu a