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

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню — раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

Вертикальное меню

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент нашего списка будет содержать по одной ссылке:

Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:

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

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

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

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

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:

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

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

Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов
нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

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

Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

Выпадающее меню

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

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

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

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

Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:

Навигационные панели с помощью CSS

Навигация присутствует на любом хорошем сайте, даже если он одностраничный. В зависимости от ситуации, навигационные ссылки могут вести на различные разделы сайта либо отправлять к закладке (якорю), расположенной на текущей странице. Грамотное составление навигации, в которой не запутается пользователь, требует определенных знаний и опыта. К дизайну навигационной панели также нужно подходить с умом, и в этом уроке мы расскажем вам, как создать удобное навигационное меню.

Создание навигации

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

Изначально, без стилей наша навигация выглядит, как обычный список:

Чтобы сделать этот элемент более похожим на навигационную панель, необходимо проделать несколько обязательных шагов. Во-первых, возле пунктов меню не нужны маркеры, а во-вторых, стандартные значения margin и padding , заданные браузером для списка, могут мешать, поэтому мы обнуляем их. В итоге получается следующее:

По сути, идентичные действия по отношению к спискам делает файл сброса стилей Reset.css, поэтому, если вы используете его на вашем сайте, то код выше можно не записывать.

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

Вертикальное меню

Создание вертикальной навигационной панели считается более легким занятием, нежели создание горизонтального меню. Главным образом потому, что нет необходимости задавать горизонтальное расположение ссылок. Это просто вертикальный список страниц сайта. И всё же некоторые важные стили применить придется.

Читать еще:  Большой вопрос — как зарабатывать на сервисе вопросов и ответов
Блочные ссылки

Прежде всего нужно сделать все теги блочными элементами:

Существует несколько причин для этого:

    Вы сможете задавать отступы для ссылок.

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

Строчные ссылки могут быть разной длины, что негативно отразится на внешнем виде.

  • Исходя из второго пункта, можно отметить еще один положительный момент. Когда ссылка является блочным элементом, область ее кликабельности расширяется: даже если кликнуть по месту, где нет текста, она все равно сработает. Это удобно, потому что не надо прицеливаться по маленькой ссылке. А с помощью вертикальных отступов padding можно увеличить область кликабельности еще и по высоте.
  • Ширина меню

    Следующее, что нам понадобится сделать — это задать ширину меню. Если у вас заранее не была определена ширина навигационной панели, и она не находится в контейнере, который ограничивает ее, то меню будет растянуто на всю ширину окна (как в нашем примере выше) — ведь блочный элемент по умолчанию ведет себя именно так. Вы можете задать необходимую ширину для элемента .menu , например:

    Разделение пунктов

    Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку .menu :

    Высота пунктов и вертикальное выравнивание

    Сейчас ссылки меню выглядят слишком низкими, расположенными близко друг к другу. Если текст каждой ссылки не будет занимать более одной строки, то увеличить их высоту и сохранить при этом текст вертикально по центру можно с помощью свойств height и line-height :

    Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.

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

    Основная задача при создании горизонтальной навигации — расположить пункты меню в один ряд. Это можно сделать несколькими способами.

    Способ первый

    Первый вариант — задать пунктам списка свойство display со значением inline либо inline-block :

    После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:

    Мы добавили фоновый цвет и нижнюю границу для каждой ссылки, а также увеличили ее размеры при помощи внутренних отступов padding . Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами
    . Эти промежутки можно убрать, записав HTML-код списка в одной строке:

    Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right :

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

    Если промежутки между пунктами не запланированы в вашем дизайне, лучше воспользоваться вторым методом горизонтального выстраивания элементов.

    Способ второй

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

    Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим,

    ), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left . Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:

    Это также поможет вернуть нормальную высоту родителя плавающих элементов. Мы уже говорили об этой проблеме в предыдущих уроках, но тогда мы решали ее через специальный хак с использованием псевдоэлемента :after . Пример выше — это еще один способ решить вопрос с исчезнувшей высотой контейнера.

    Примечание: если вы установите фон для элемента .menu , то вы не увидите его до тех пор, пока не примените к нему overflow: hidden . Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?

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

    Выпадающее меню на чистом CSS / HTML

    Дополнительное видео

    ПОДПИСКА на УРОКИ

    Выпадающее меню на чистом CSS / HTML

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

    See the Pen POyzbW by Denis (@Dwstroy) on CodePen.

    В уроке задействуем:

    • display: flex;
    • используем transition ;
    • будем позиционировать элементы при помощи position .

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

    П ервым делом напишем разметку под горизонтальное меню. Открываем свою среду разработки в моем случае это PhpStorm , создаем index.html файл, пропишем каркас html:5 , заменю lang на ru .

    Читать еще:  Реально ли заработать в интернете и сколько вы сможете получать

    Все meta удалю кроме кодировки, пропишу свой заголовок «Tom menu».

    Между body пишем тег header , а в нем блок с классом .dws-menu в котором будет находиться наше меню. Далее структура будет следующая, создадим списки в количестве пяти штук. В каждом списке будет ссылка с атрибутом href=»#» . Затем будет идти иконка I с классом .fa .fa-

    Пропишем название пунктов меню (Главная, Продукция, Услуги, Новости, Контакты).

    Далее отбираем и подключаем иконки. Переходим на сайт Font Awesome , отберем себе иконки под данные пункты меню:

    Скачиваем архив с сайта с иконками, извлекаем его содержимое к себе на компьютер, копируем папку fonts и папку css в свою среду разработки.

    В папке fonts лежат шрифты иконок, а в папке css их стили. Сжатые стили можно удалить font-awesome.min, подключим не сжатый font-awesome.css .

    В index.html подключаем иконки, и прописываем каждому пункту свой стиль иконки (home, shopping-cart, cogs, th-list, envelope-open).

    Основной каркас мы сделали, подменю сформируем после описания основного стиля, а теперь создадим файл где будем описывать основные стили горизонтального меню style.css и подключим его к index.html . Для проверки, что стили подключены, создам папку img , в ней размещу произвольную картинку на задний фон. Пропишем подключение картинки при помощи background .

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

    Описываем CSS стили горизонтального меню

    Первым делом сбросим все отступы, которые могут задавать по умолчанию разные браузеры:

    Зададим header в 200 пик. и назначим шрифт Cuprum который можно скачать и отдельно подключить к себе на сайте, на всякий случай пропишем дополнительные шрифты.

    Скроем маркеры у списков:

    Списки отобразим по горизонтали при помощи display: flax , и делаем его по центру:

    В header сделаем отступ только сверху, пропишем margin-top .

    Оформим наше меню, зададим цвет кнопок, шрифт и т.д.

    Отбираем ссылки nav > ul li , и делаем их блочными элементами. Задаем фон меню, пропишем отступы, укажем размер, цвет, уберем подчеркивание, и сделаем заголовки заглавными буквами.

    Затем позиционируем иконки, спискам присвоим position: relative; для дальнейшее центровки иконок:

    Далее отбираем иконки, позиционируем их абсолютно, отступ сверху делаем в 15 пик., с лева 12 пик, увеличим размер до 18 пик.

    Назначим спискам разделитель в виде бордюрчика, отбираем первый элемент LI, задаем бордюр. Отбираем последний элемент LI присваиваем ему аналогичный бордюр.

    Делаем разделители спискам LI :

    Меню приобрело внешний вид, затем можно приступать к описанию стилей при наведении.

    Анимируем горизонтальное меню при наведение

    Отбираем ссылки и назначаем цвет блоку, и цвет самой ссылки с иконкой присвоим белый. Давайте добавим еще темную тень. С помощью transition в 0.3 сек сделаем плавное появление:

    И что бы этот эффект плавно исчезал, добавим этот стиль к ссылке в покое:

    Основное меню закончили и можно приступать к описанию подменю и вложенные в них меню.

    Описываем выпадающее меню CSS / HTML

    О ткрываем index.html и добавим, к примеру, в продукцию дополнительное меню. Между списками LI вставляем UL , в нем разместим пять списков, в которых будут находиться ссылки с атрибутом herf=”#” .

    Жмем применить, пропишем название пунктов (Одежда, Электроника, Продукты питания, Инструменты, Быт. химия).

    Затем открываем style.css и опишем стили подменю.

    Отбираем второй список и присвоим ему position: absolute; , зададим минимальную ширину в 150 пик.

    Пропишем спискам border в 1 пик.

    Для ссылок в подменю установим отступы в 10 пик., уберем трансформацию текста и фон сделаем на пару тонов темнее background: #e4e4e5; .

    Затем создадим еще одно вложенное меню. Перейдем в файл разметки и к примеру в «Электронике» формируем по аналогии меню как делали мы до этого. Описываем заголовки пунктов (Камеры, Компьютеры, Телефоны) и сохраняемся.

    Они вывелись, но скрыты под основным меню, теперь position: absolute; вложенного UL и сдвинем его на 150 пик. в сторону:

    Далее сделаем появление подменю при наведение на основные пункты верхнего меню, для этого добавляем display: none; и тем самым скрываем все внутренние пункты.

    А для их появления отберем списки при наведении и отобразим их при помощи display: block; .

    Теперь можно добавлять многоуровневые меню просто простым копированием блока UL , изменением его пунктов.

    Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь CSS генератором , у меня создано несколько Presets , вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background который прописывал до этого.

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

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

    Отзывы

    Здравствуйте, у меня не получилось.
    Главная
    Продукция
    Одежда
    Обувь
    Куртки
    Брюки
    Электроника
    Камеры
    Компьютеры
    Телефоны
    Samsung
    Flf
    Apple
    Продукты питания
    Инструменты
    Быт. химия
    Услуги
    Услуга 1
    Услуга 2
    Услуга 3
    Новости
    Контакты

    Это все,что мне выдал браузер,только криво и с точками.Подскажите,пожалуйста,что может быть не так?

    Выпадающий список HTML

    Привет! В этой статье вас ожидают примеры выпадающих списков и меню на CSS и, кто бы мог подумать, HTML. Насчет использования JavaScript не уверен — попробуем обойтись без него.

    Выпадающее меню со списком элементов на HTML

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

    Конечно, подобную проблему можно решить многими способами, но я бы рекомендовал обходиться без дополнительного JS-кода (и jQuery).

    Я считаю так — если задачу теоретически можно решить средствами HTML и CSS без применения джейквери, нужно делать это на практике. Если вы не знаете, что писать и куда нажимать — это отдельная проблема и она не должна вас останавливать. Нужно гуглить, учиться, расти, повышать свою квалификацию как верстальщика и фронтенд-разработчика — никогда не знаешь, где эти навыки пригодятся.

    Читать еще:  В каком банке открыть расчетный счет ип — где нет комиссии на вывод наличных и где надежнее

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

    Первый шаг к нашему выпадающему списку в меню сделан и вот что получилось. Результат:

    Мда. Пока не очень, да? Обычный список какой-то (похож на этот), ведь классы menu и submenu я использовал, а стили не написал.

    Добавлю немного CSS-магии. Пропишу прямо в html-файле — в . CSS-код:

    Ого! В жизни не видел ничего прекраснее этого минималистичного выпадающего списка. Без JavaScript и обращения к фрилансерам!

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

    И снова мы изобретаем меню на чистом CSS, без использования JS.

    Учитывая то, что вы видели в предыдущей части статьи, думаю выглядит многообещающе. А все благодаря чему? Потому что мы умеем присваивать нужным элементам стиль «display:none» и прописывать в CSS чтобы при наведении на него приоритетным было что-то типа «inline-block» взамен «none».

    Давайте немного подробнее остановимся на вышеприведенном коде. В нем я присвоил «id=»menu»» основному списку, то есть всему выпадающему меню. Я сделал это для того чтобы обозначить сразу родительские элементы выпадающего списка и сделать их видимыми.

    Дальше. В каждый из разделов я вложил дополнительные списки

      , которые содержат в себе выпадающие ссылки (см. также как вставить ссылку в HTML). Они будут появляться при наведении.

    Перейдем к CSS. Код:

    /* Обнуляю отступы и убираю маркеры у списков. */
    ul , li <
    margin : 0 ;
    padding : 0 ;
    list-style-type : none ;
    >

    /* Задаю параметры для основного, родительского блока, меню выпадающего списка. */
    # menu <
    display : block ;
    position : absolute ;
    top : 20px ;
    left : 20px ;

    /* Задаю стили для блоков выпадающего списка. */
    # menu > li <
    display : inline-block ;
    height : 20px ;
    /* Считаем координаты относительно исходного места. */
    position : relative ;
    >

    /* Задаю стили, чтобы скрыть дочерние блоки выпадающего списка. Ну и немного украшаю. */
    # menu > li > ul <
    position : absolute ;
    top : 20px ;
    left : 10px ;
    display : none ;
    background-color : bisque ;
    border-radius : 5px ;
    width : 185px ;
    font-size : 14px ;
    padding : 10 0 10 10 ;
    >

    /* Так я делаю прежде скрытую часть видимой — при наведении курсора. */
    # menu > li : hover > ul <
    display : block ;
    >

    Что хочу отметить дополнительно.

    «#menu > li» означает, что стили будут применены только к дочерним элементам по отношению к тегу «ul#menu», а не ко всем как могли подумать некоторые. Внимательнее!

    «Position: relative;» — отсчитывает координаты от угла одного из разделов в главном списке, откуда выпадают дочерние элементы.

    Последнее: выпадающий список по примеру выше на HTML (см. также особенности HTML) и CSS в оформлении меню сайта это удобная вещь. Для ПК и десктопов. На мобильных устройствах и планшетах нет мышки и курсоров, поэтому такой вариант не подойдет.

    А значит для пользователей посещающих сайт с мобильных устройств вам понадобится отдельная реализация меню с выпадающим списком. Вот пожалуй и все в этой части статьи.

    Как создать крутое выпадающее меню

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

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

    Стили помогают нам скрыть элементы и сделать их выпадающими при наведении курсора.

    Хотел немного его прокомментировать, да передумал еще раз взглянув на код — он чистый, ясный, красивый. Вроде все должно быть понятно.

    Теперь давайте вооружимся магией стилей — при помощи CSS я трансформирую все серии вложенных списков

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

    Перейдем к CSS-коду. Что-то мне стало скучно туда-сюда бегать, поэтому я хорошенько его прокомментировал прямо в стилях. Да и вам удобнее будет, если будете пользоваться этим решением.

    CSS-код, помещенный в страницы:

    Готово! Финальный результат:

    БОНУС — суперкрутой выпадающий список на ХТМЛ и ЦСС

    Четвертый и последний на сегодня. Я устал, вы устали — думаю четыре выпадающих меню будет достаточно для того, чтобы выбрать наиболее оптимальный вариант для себя.

    Тоже делаем список со ссылками, отображающимися при наведении. Никаких анимаций, модных выездов, мигания — только чистый кроссбраузерный код, простой и эффективный. Вместо «display:none;» использую «left: -9999px;». Ну там сами увидите.

    Красноярский край

    Минусинск
    Ачинск
    Красноярск
    Железногорск
    Канск
    Норильск

    Свердловская область

    Екатеринбург
    Верхняя Пышма
    Нижний Тагил
    Первоуральск
    Асбест
    Каменск-Уральский

    CSS-код, который я поместил в :

    Результат (без наведения курсора):

    Результат (при наведении курсора):

    Итоги: скачать готовый html+css код выпадающего списка меню

    Как вы могли убедиться на вышеприведенных примерах, выпадающий список без особых проблем делается на обычном HTML.

    Надеюсь один из списков украсит меню вашего проекта или хотя бы будет использован в качестве основы.

    Я подготовил для вас архив, который вы можете скачать. Там все 4 выпадающих списка — html код и css стили прямо в файле. Там думаю разберетесь.

    Превью содержимого файла:

    P.S. Ну а если вы вдруг неправильно написали поисковый запрос и зашли не туда (не нашли то чего нужно), не расстраивайтесь — у меня есть пара видео, где при помощи и в HTML страницу вставляются выпадающие списки. Видео 1:

    Ссылка на основную публикацию
    Adblock
    detector