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


Горизонтальное меню для сайта на HTML+CSS готовые шаблоны | Как создать красивое горизонтальное выпадающее меню с примером

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

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-файле, который вы можете скачать ниже. Выглядит это как на скриншоте: 

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

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

Добавить и редактировать горизонтальные меню

Искать на сайте

  • Home
  • Classroom использует
  • Примеры сайтов
  • Учебные пособия и видео Анатомия сайта GoogleСоздайте сайтСоздайте страницы на сайтеИзмените типы страниц сайтаИзмените макет страницыВставьте карты, формы и видеоВставьте сведения о видеоВставьте презентацию GoogleИзмените макет, тему вашего сайта, цвета или шрифтыИзменить боковую панельНастроить боковую панель и гаджет навигацииДобавить и изменить горизонтальные менюПоделиться или опубликовать свой сайтРабота с кодами для встраиванияВстроить форму Google на сайт GoogleИстория измененийПравления на уровне страницы
  • Интересные функцииДобавить и отредактировать горизонтальную панель навигацииДобавить значокДобавить оглавлениеДобавить текстовое поле Кнопка подписки в Twitter Добавление обратного отсчета Добавление Mp3 (проигрыватель и музыка) на веб-страницу Добавление кнопок социальных сетей Добавление нескольких изображений Анимированный слайдер / слайд-шоу Создание отличных информационных бюллетеней в формате HTML
.

Как создать меню с горизонтальной прокруткой


Узнайте, как создать горизонтальное прокручиваемое меню с помощью CSS.


Попробуйте сами »


Как создать меню с горизонтальной прокруткой

Шаг 1) Добавьте HTML:

Пример


Шаг 2) Добавьте CSS:

Уловка для прокрутки навигационной панели заключается в использовании overflow: auto и white-space: nowrap :

Пример

div.scrollmenu {
цвет фона: # 333;
перелив: авто;
белое пространство: nowrap;
}

div.scrollmenu a {
display: inline-block;
цвет: белый;
выравнивание текста: по центру;
отступ: 14 пикселей;
текстовое оформление: нет;
}

дел.scrollmenu a: hover {
background-color: # 777;
}

Попробуй сам "

Совет: Перейдите к нашему руководству CSS Navbar Tutorial, чтобы узнать больше о панелях навигации.



.

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

По умолчанию меню в Joomla 3.0 будут отображаться вертикально. Многие пользователи хотели бы вместо создавать горизонтальные меню , например меню, которое появляется в верхней части вашего веб-сайта. В этом руководстве мы расскажем, как создать горизонтальное меню в Joomla 3.0.

Создание горизонтального меню в Joomla 3.0 не так сложно, как создание горизонтального меню в Joomla 2.5. В основном это связано с добавлением бутстрапа в Joomla 3.0. В этой статье мы покажем вам, как использовать CSS-класс bootstrap nav-pills для создания горизонтального меню.

Создание горизонтального меню в Joomla 3.0:

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

  1. Войдите в административную панель Joomla 3.0
  2. В верхнем меню щелкните Extensions , а затем щелкните Module Manager
  3. В списке модулей щелкните модуль для меню, которое вы хотите изменить.Убедитесь, что это Тип - это меню.
  4. В наборе вкладок вверху страницы щелкните вкладку Options , затем щелкните ссылку Advanced Options , чтобы получить доступ к настройкам.
  5. Найдите следующую настройку:

    Суффикс класса меню
    Суффикс, который должен применяться к классу CSS пунктов меню

    Для этого параметра введите nav-pills и затем нажмите кнопку «Сохранить» в верхнем левом углу страницы.

    Важно! Если вы используете Joomla 3.02 и 3.03 или не можете заставить работать nav-pills, вам может потребоваться добавить ПРОБЕЛ перед записью nav-pills.

    На скриншотах ниже вы можете увидеть, как установка nav-pills в качестве суффикса класса меню устанавливает горизонтальное положение меню.

    Суффикс класса меню: (пусто) Суффикс класса меню: nav-pills
.

CSS Горизонтальная панель навигации


Горизонтальная панель навигации

Есть два способа создать горизонтальную панель навигации. Используя встроенные или плавающие элементов списка.

Элементы встроенного списка

Одним из способов создания горизонтальной панели навигации является указание элементов

  • как встроенный, в дополнение к "стандартному" коду с предыдущей страницы:

    Объяснение примера:

    • Дисплей: встроенный; - По умолчанию элементы
    • являются блочными.Мы тут удалить разрывы строк до и после каждого элемента списка, чтобы отобразить их в одной строке

    Элементы плавающего списка

    Еще один способ создания горизонтальной панели навигации - разместить

  • элементы и укажите макет для ссылок навигации:

    Пример

    Ли {
    плыть налево;
    }

    а {
    дисплей: блок;
    отступ: 8 пикселей;
    цвет фона: #dddddd;
    }

    Попробуй сам "

    Объяснение примера:

    • поплавок: левый; - используйте float, чтобы элементы блока скользили рядом друг с другом
    • дисплей: блок; - Отображение ссылок в виде блоковых элементов делает всю область ссылок кликабельны (не только по тексту), и это позволяет нам указать отступы (и высота, ширина, поля и т. д.если хотите)
    • отступ: 8 пикселей; - Поскольку блочные элементы занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому укажите отступы, чтобы они хорошо выглядят
    • цвет фона: #dddddd; - Добавить серый цвет фона к каждому элементу a

    Совет: Добавьте цвет фона в

  • Вы можете оставить комментарий, или ссылку на Ваш сайт.

    Оставить комментарий