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

Содержание

Это регулярно обновляемая коллекция, в которой мы собираем самые интересные меню для сайта, созданные с помощью HTML и CSS (CSS3 & HTML5), а также в некоторых разработках присутствует немного JavaScript (jQuery). Hover-эффекты, эффекты скольжения, с выпадающими списками, полноэкранные, горизонтальные, мобильные, раздвижные, круглые, с иконкой-гамбургер и так далее… Вы можете сразу на странице посмотреть Демо и скачать исходный код (* zip).

Телеграм канал с бесплатными курсами по верстке сайтов и программированию

image

ПЕРЕЙТИ В ТЕЛЕГРАМ =>

Скачать / Посмотреть на CodePen

(далее…)

Красивый эластичный эффект для выдвигающегося бокового меню

Скачать / Посмотреть на CodePen

(далее…)

Меню с красивой анимацией при раскрытии и ховером для ссылок

Скачать / Посмотреть на CodePen

(далее…)

Готовый шаблон: липкий header, десктопная и мобильная навигация, плавная прокрутка страниц

Скачать / Посмотреть на CodePen

(далее…)

Мобильное меню в виде полукруга внизу экрана и раскрывающиеся на весь экран при клике

Скачать / Посмотреть на CodePen

(далее…)

Красивое раскрытие бокового меню при клике на иконку-гамбургер

Скачать / Посмотреть на CodePen

(далее…)

Красивое раскрытие бокового меню и эффектные переходы между страниц

Скачать / Посмотреть на CodePen

(далее…)

Красивая CSS анимация для фона (background) ссылок меню

Скачать / Посмотреть на JSFiddle

(далее…)

Красивое раскрытие мобильного меню при клике на гамбургер «Overlay Mobile Nav»

Скачать / Посмотреть на CodePen

(далее…)

Если Вам понравилась наша коллекция, то можете поделится ей в соцсетях!

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

Мы рассмотрели то, как можно сделать горизонтальное выпадающее CSS меню и вертикальное выпадающее CSS меню. Сегодня мы поговорим о том, как создать горизонтальное CSS меню для сайта. Но в этот раз меню не будет выпадающим, то есть мы планируем, что не потребуются подразделы.

image

Как и в прошлой публикации, меню сайта будет создано при помощи маркированного HTML списка (при помощи тегов и ). Оформлять горизонтальное меню для сайта мы будем при помощи таблицы стилей (CSS), мы не будем использовать JavaScript для создания горизонтального CSS меню. Как и в прошлый раз, мы не будем использовать изображений для создания горизонтального CSS меню.

Создание меню для сайта. Горизонтальное CSS меню. Шаг 1 -создание HTML макета меню.

И так, начнем мы с создания HTML макета меню сайта. Для этого мы воспользуемся HTML списком, ненумерованным списком:

Сразу подключаем файл таблиц стилей, который называется style.css. При помощи тегов

  • создаем HTML макет меню для сайта. Поскольку, пункты нашего горизонтального CSS меню должны куда-нибудь вести, делаем их ссылками при помощи тега , в качестве значения атрибута href устанавливаем #(хэш), ссылки с таким атрибутом никуда не ведут. HTML список меню помещаем в контейнер с идентификатором hmenu, поскольку внутри элемента могут находиться только блочные HTML элементы и элементы и . После созданного списка стоит тег  — перевод строки, он нужен для того, чтобы растянуть меню сайта по горизонтали на всю ширину окна браузера.

    Создание меню для сайта. Горизонтальное CSS меню. Шаг 2 — Задаем стили для меню сайта.

    Первое, что нужно сделать — это задать цвет фона и ширину контейнера в CSS, хотя вы знаете, что блочные HTML элементы занимают всю доступную ширину, в отличие от строчных HTML элементов: Затем нам нужно задать общий стиль для горизонтального CSS меню: Здесь мы убираем внутренние и внешние отступы, а также «прижимаем» меню сайта к левой границе окна браузера. Теперь можно задать стиль отображения для всех пунктов меню сайта: Мы знаем, что элемент относится к блочным, то есть занимает всю область, в которой он стоит, из-за этого наше меню было вертикальным, добавив CSS свойство display: inline, мы сделали элементы строчными, а наше меню стало горизонтальным. Теперь мы можем задать CSS стили для содержимого контейнеров , то есть стили для навигации горизонтального меню(для тега ): CSS свойство float:left выравнивает горизонтальное меню и контейнер по верхней границе. Все ссылки по умолчанию подчеркиваются браузером, чтобы избавиться от этого недоразумения мы используем свойство text-decoration:none. Далее мы задаем цвет ссылок, то есть цвет текста меню сайта. Внутренними отступами мы расширяем наше горизонтальное меню. Задаем стили для посещенных пунктов меню и то, как будут отображаться пункты меню, при наведение на них курсора мыши: Ну тут все понятно: мы задаем цвет текста и цвет фона для горизонтального CSS меню. Осталось задать стиль для тега , чтобы выровнять по высоте горизонтальное меню и элемент : Это горизонтальное CSS меню будет растягиваться на всю ширину окна браузера и при это данное меню корректно отображается во всех браузерах. Исходные коды примеров вы можете скачать на публичных страницах вконтакте: раз и два. На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)

    Возможно, эти записи вам покажутся интересными

Разместил Александр / Просмотров: 16 781

Привет, друзья! Спешу представить вам очередную и самую свежую подборку с меню для Вашего сайта! Всё тут совершенно бесплатно, все исходники вы можете скачать и использовать на своих сайтах. Так же меню работает на CSS и имеются ко всем примерам демо! Так что приятного просмотра и быстрого скачивания!

Рекомендую к просмотру:

  • Скачать свежайшие слайдеры, меню, кнопки и ещё несколько невероятных JQuery исходников (Плюс Демо)
  • Скачать невероятные анимационные переходы между страницами
  • 10 невероятных эффектов при наведении и при клике на кнопки, ссылки и картинки

Адаптивное многоуровневое меню для сайта на CSS

Скачать

Простое выпадающее CSS меню для Вашего сайта бесплатно

Скачать

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

Скачать

Красное и красивое выпадающее меню на сайт

Скачать

Красивое меню на CSS3

Скачать

Адаптивное и фиксированное меню на сайт

Скачать

Адаптивное меню для сенсорных экранов и не только

Скачать

Самое простое и лёгкое меню

Скачать

Меню на сайт в стиле PS

Скачать

Большое и адаптивное мега — меню на CSS

Скачать

Основное правило современного веб-дизайна заключается в том, что сайт и его контент должны правильно отображаться на различных устройствах, в том числе и мобильных. Одним из главных аспектов в интерфейсе сайта является качественная навигация. В данной статье показан пример как сделать простое адаптивное меню с кнопкой закрыть, используя только CSS, реализуя функционал без применения javaScript. Все что нам понадобится — изображение иконки «бургег» для открытия меню и крестика, для его закрытия соответственно, которые я приготовил заранее.   Отзывчивость меню работает следующим образом: на большом мониторе меню имеет классический вид — все блоки выстроены в одну горизонтальную линию; на планшете — блоки меню разделены на две равнораспределенные по экрану колонки; а на экранах мобильных устройств показана небольшая кнопка с иконкой-«бутерброд», при клике по которой открываются разделы меню, а иконка меню меняется на кнопку закрытия в виде крестика. Клик по крестику закрывает меню и возвращает его в первоначальное положение.   Проверить меню на адаптивность и проделать все манипуляции самостоятельно можно на странице примера, изменяя размеры окна браузера или зайдя с мобильного устройства. ПРИМЕР   Для всего этого чуда понадобился вот такой спрайт с иконками «бургера» и крестика:   Код меню самый обычный, какой большинство использует для создания навигации по сайту: ad-menu’>

  Основной CSS включает в себя и сброс стилей для блоков, псевдоклассов и псевдоэлементов, используемых в коде, при ненадобности его можно удалить..ad-menu *:focus,.ad-menu *::before,.ad-menu *::after {   padding: 0;   margin: 0;   outline: 0;   box-sizing: content-box; /*это свойство обязательно*/ } .ad-menu li {   display: inline-block;   background: #c2f272;   font-size: 1.4em;   text-align: center;   width: 24%; } .ad-menu li:hover {   background: #f2d272; } .ad-menu li a {   display: block;   text-decoration: none;   color: #000;   padding: 10px 0;   width: 100%; }  Теперь осталось задать правила адаптивности, а именно свойства отображения меню для различных размеров экрана и прописать функционал открытия и закрытия меню./*поведение меню при разрешении менее 920 пикселей*/ @media screen and (max-width: 920px) { .ad-menu li {     width: 49.5%;   } } /*поведения и структура при экране менее 680 пикселей*/ @media screen and (max-width: 680px) { .ad-menu li {     width: 100%; } .ad-menu ul {   display: none; } .ad-menu nav::before, .ad-menu::after {   content: »;   position: absolute;   top: 0;   right: 0;   display: block;   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAwCAMAAAA8VkqRAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAE5JREFUeAFjwAkYcQC6SFAKBt4fo/6AaMMUQTUQIYJpFaqrMIICzkATR2Hi5uDUjmkh7tDAHUq4Qw8ujl+CsFEEHDVowg1n1OJKDLiTDwBLrgJ9vkuXOwAAAABJRU5ErkJggg==);   cursor: pointer;   height: 24px;   width: 24px; } .ad-menu nav::before, .ad-menu::after {   background-color: #fc0;   border: 9px solid #fc0; } .ad-menu::after {   background-position: -24px -24px;   z-index: 1; } .ad-menu nav::before {   z-index: 2; } .ad-menu nav:focus::before {   z-index: 0; } .ad-menu nav:focus ul, .ad-menu ul:hover { /*решаем проблему со скликиванием*/   display: block; } }  Работа меню реализована с помощью псевдокласса :focus, для этого к тегу контейнера добавлен атрибут tabindex чтобы блок смог получить фокус и меню стало видимым. Кнопки открытия и закрытия можно сместить изменив соответствующие свойства в коде CSS для элементов кнопок.   С помощью псевдокласса :hover решена проблема со скликаванием. Пока курсор находится на меню, оно остается видимым и кликабельным.   При желании менюшку можно симпатично оформить и добавить немного анимации, все также используя только свойства CSS, исключив JS-скрипты. ©http://magentawave.comimage

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

Прошлый урок о том как создать выдвигающееся меню на CSS3 — Создание выдвигающегося меню

Пример можно увидеть здесь:

Мы рассмотрим более подробно как создать меню из Демо 2, когда меню появляется слева вверху.

HTML часть

1 2 3 4 5 6 7 8 9 10 
 

CSS часть

Осталось всему этому придать красивый вид.

1 2 3 4 5 
*, *:after, *::before { box-sizing: border-box; }

Мы используем данное свойство для того, чтобы вычитать из ширины и высоты блока значения padding и border. Затем зададим стиль цвет фона и внутренний отступ для блока с классом container:

1 2 3 4 5 6 7 
body { background: #04a466; }   .container { padding: 80px; }

Свойство padding необходимо для того, чтобы при появлении меню, было достаточно места для отображения основного содержимого сайта. Меню у нас зафиксировано, поэтому не имеет значения где оно находится на странице. Также мы задаем задержку по времени при появлении и закрытии.

1 2 3 4 5 6 7 8 9 10 11 12 
.bt-menu { position: fixed; top:  ; left:  ; width: 100%; height:  ; border-width: 0px; border-style: solid; border-color: #333; background-color: rgba( , , , ); transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s; }

При появлении меню задаем ему прозрачный фон, устанавливая альфа-канал в 0.3.

1 2 3 4 5 6 
.bt-menu.bt-menu-open { height: 100%; border-width: 30px 30px 30px 90px; background-color: rgba( , , ,0.3); transition: border-width 0.3s, background-color 0.3s; }

Пропишем свойства включателю нашего меню:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 
.bt-menu-trigger { position: fixed; top: 15px; left: 20px; display: block; width: 50px; height: 50px; cursor: pointer; }   .bt-menu-trigger span { position: absolute; top: 50%; left:  ; display: block; width: 100%; height: 4px; margin-top: -2px; background-color: #fff; font-size: 0px; user-select: none; transition: background-color 0.3s; }

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 
.bt-menu-open .bt-menu-trigger span { background-color: transparent; }   .bt-menu-trigger span:before, .bt-menu-trigger span:after { position: absolute; left:  ; width: 100%; height: 100%; background: #fff; content: ''; transition: transform 0.3s; }   .bt-menu-trigger span:before { transform: translateY(-250%); }   .bt-menu-trigger span:after { transform: translateY(250%); }   .bt-menu-open .bt-menu-trigger span:before { transform: translateY( ) rotate(45deg); }   .bt-menu-open .bt-menu-trigger span:after { transform: translateY( ) rotate(-45deg); }

Элементы меню находятся в неупорядоченном списке, который также имеет фиксированное положение и находится слева вверху:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 
.bt-menu ul { position: fixed; top: 75px; left:  ; margin:  ; padding:  ; width: 90px; list-style: none; backface-visibility: hidden; }   .bt-menu ul li, .bt-menu ul li a { display: block; width: 100%; text-align: center; }   .bt-menu ul li { padding: 16px  ; opacity:  ; visibility: hidden; transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s; }   .bt-menu ul li:first-child { transform: translate3d(-100%,200%, ); }   .bt-menu ul li:nth-child(2) { transform: translate3d(-100%,100%, ); }   .bt-menu ul li:nth-child(3) { transform: translate3d(-100%, , ); }   .bt-menu ul li:nth-child(4) { transform: translate3d(-100%,-100%, ); }   .bt-menu ul li:nth-child(5) { transform: translate3d(-100%,-200%, ); }

Когда меню появилось все элементы становятся видны, но изначально они должны быть скрыты, что мы и сделали в самом начале урока(прописав в классе bt-menu скрыть всё меню):

1 2 3 4 5 6 
.bt-menu .bt-menu-open ul li { visibility: visible; opacity: 1; transition: transform 0.3s, opacity 0.3s; transform: translate3d( , , ); }

Вывод

Красивые варианты меню, которые вы можете использовать. Данное меню освобождает место на странице, т.к. может быть вызвано только при необходимости.

Успехов!

Источник: tympanus.net

Чтобы получать свежие статьи — выберите любой удобный для вас мессенджер ниже — просто кликните по нему: —> —>

Оцените статью
Рейтинг автора
4,8
Материал подготовил
Максим Коновалов
Наш эксперт
Написано статей
127
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий