Тег option HTML используется для создания выпадающего списка, с помощью которого пользователь может выбрать один вариант из заранее определенного набора значений.
Текст, видимый пользователю, может отличаться от текста, указанного в атрибуте value . Вот, как можно создать выпадающий список:
- Выпадающий список создается с помощью тега
- Внутри тега
- В теге
Также можно задать класс CSS вместо того, чтобы использовать идентификатор для определения стиля выпадающего списка.
В следующем разделе я покажу примеры использования выпадающего списка HTML в JavaScript / JQuery . В примерах также будет показано, как задавать стили
Пример создания простого выпадающего списка
В этом примере HTML select option используется для создания выпадающего списка с тремя вариантами на выбор:
В приведенном выше примере для создания выпадающего списка используется следующая разметка:
Использование атрибута value
Как упоминалось ранее, значение атрибута value может отличаться от текста, выводимого на странице. Например, можно вывести для пользователей названия стран или цветов, а в атрибуте value использовать шорткоды.
В следующем примере мы создадим выпадающий список с атрибутом value :
Посмотреть онлайн демо-версию и код
Для тега
Пример получения доступа к выбранному варианту в JavaScript
Теперь создадим пример получения доступа к значению выбранного варианта и выполнения некоторых действий. Тот же список, что и в приведенном выше примере, мы создаем с вариантами выбора цвета. После выбора нажмите кнопку, чтобы применить этот цвет к документу:
Посмотреть онлайн демо-версию и код
Для option value HTML используется следующий код:
Следующая строка кода используется в JavaScript , чтобы получить доступ к значению атрибута value варианта
var seltheme = document.getElementById(“selcolor”).value;
При нажатии кнопки вызывается функция JS , которая присваивает выбранное в выпадающем списке значение переменной. Это значение используется для применения цвета к текущему документу.
Получение доступа к видимому тексту в JQuery
На этот раз я буду использовать JQuery , чтобы получить доступ к значению выбранного варианта: как к тексту, так и к value . В этой демо-версии я буду получать доступ к видимому тексту в теге option в HTML :
Посмотреть онлайн демо-версию и код
В коде для каждого варианта в теге
Вот как обеспечивается доступ к этому значению в HTML select option selected JavaScript :
var selectedcolor = $("#jqueryselect option:selected").text();
Также можно получить доступ к значению с помощью JQuery-метода $.val() :
var selectedcolor = $("#jqueryselect").val();
Замените эту строку в приведенном выше примере, и код будет отображать шорткод / значение цвета в атрибуте value , а не видимый текст.
Пример получения значения в скрипте PHP
В этом примере получения значения выбранного из выпадающего списка варианта форма создается с помощью тега
Посмотреть онлайн демо-версию и код
Метод формы, используемый в примере — POST , поэтому можно получить значения формы с помощью массива PHP $_POST[“”] . Это код формы, используемый в примере:
А вот как PHP-скрипт используется, чтобы получить значение HTML select option :
". $_POST["selphp"].""; } ?>
Если в форме указан метод GET , тогда используйте PHP-массив $_GET[“”] .
Определение стилей выпадающего списка с помощью CSS
Теперь рассмотрим, как определить стили выпадающего списка
Посмотреть онлайн демо-версию и код
Вместе с linear-gradient здесь использовано свойство box-shadow . Полный код CSS выглядит следующим образом:
Selcls { padding: 3px; border: solid 1px #517B97; outline: 0; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; width:150px; }
Закругленные углы с помощью свойства border-radius
Для HTML select option мы зададим свойство CSS3 border-radius , чтобы сделать закругленные углы. Цветовая гамма также изменяется. Вы можете экспериментировать с рамками, шириной, полями и другими свойствами, как захотите:
Посмотреть онлайн демо-версию и код
Использование нескольких атрибутов и стилей CSS
Чтобы дать пользователям возможность выбирать из списка несколько вариантов, нужно использовать атрибут multiple . В приведенном выше примере может быть выбран только один вариант. При использовании multiple можно выбрать несколько вариантов, нажав клавишу CTRL :
Посмотреть онлайн демо-версию и код
Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков
Если вы используете фреймворк Bootstrap , то у вас есть возможность применять плагины для создания крутых option HTML .
Очень часто при регистрациях или анкетирования на сайтах, вас просят сделать некий выбор из выпадающего списка . Например выбрать вашу страну из множества других стран. Все это разные элементы формы, они могут быть и по разному оформлены: от простого HTML5 до сложного CSS3 .
Сегодня мы разберем один из таких примеров оформления поля выбора, применяя HTML/CSS и иконку Font Awesome . Но начнем мы как обычно с разметки документа.
HTML-код
Внутри тега select находятся пункты выпадающего списка option . В свою очередь теги select и form вложены в общий контейнер div . Тег form должен присутствовать обязательно, если данные впоследствии будут отправляться на сервер.
Позиционируем контейнер с классом box в центре окна.
Box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Заранее подключаем иконочный шрифт до закрывающего тега head .
Стилизация селектора select
Задаем размеры для поля выбора - 250x50 пикселей и делаем поля для пунктов по 10 пикселей со всех сторон.
Box select{
width: 250px;
height: 50px;
padding: 10px;
}
Убираем рамку и обводку:
Border: none;
outline: none;
Прописываем фиолетовый цвет фона, название, цвет и размер шрифта для списков.
Background: #ab05af;
font-family: "Russo One", sans-serif;
color: #fff;
font-size: 20px;
Создаем вокруг поля тень.
Box-shadow: 0 5px 20px rgba(0,0,0,.3);
В целом select box готов и работает, но смотрится он скучно, да и треугольник, в который нужно будет попасть мышкой очень маленький. А если я так подумал, значит и дизайнер так же подумает, надо заранее подготовиться к разным вариантам.
Вероятнее всего дизайнер поставит на место крошечного треугольника - иконку из шрифта Font Awesome .
Так намного красивее смотрится, а писать код все равно надо верстальщику. Какое здесь может быть решение? Мы не будем трогать HTML-код , а задействуем псевдо-элемент before .
Псевдо-элемент before для.box
Первое, что надо сделать - это прописать код иконки и название шрифта "Font Awesome 5 Free" . Выбираем на сайте fontawesome.com нужную иконку, обозначающую "выбор" и копируем её код.
.box::before {
content: "\f150";
font-family: "Font Awesome 5 Free";
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 28px;
background: #da00e0;
pointer-events: none;
}
Далее позиционируем абсолютно, указываем размеры 50x50, белый цвет у иконки, фон светло-фиолетовый. Задаём очень важное свойство pointer-events: none . Это значит, что псевдо-элемент before не является объектом события мыши, а значение none предлагает событию "выбора мышью" проходить на нижний слой и обращаться к элементу, находящемуся под ним - к тому маленькому треугольнику. Треугольник никуда не исчез, просто он находится под псевдо-элементом before , служащий лишь украшательством. Кликая по красивой иконке, на самом деле срабатывает "некрасивый" треугольник и мы делаем свой выбор.
Здравствуйте, уважаемые читатели блога сайт. В рамках изучения премудростей в качестве очередной задачи продолжим разбирать подробности создания форм на сайте с помощью соответствующих .
Сегодня мы разберем, как создавать выпадающие (раскрывающиеся) списки , в том числе со множественным выбором, при помощи select и option, каким образом сконструировать текстовое поле посредством textarea, а также поговорим о возможности расширения функциональности форм путем применения тегов fieldset, label и legend .
Напомню, что любая форма, присутствующая на странице, создается при помощи и предназначена для ввода какой-либо информации от пользователя и отправки ее на сервер (пример — ).
К сожалению, средства языка гипертекстовой разметки не позволяют напрямую обрабатывать эту информацию, поэтому с помощью HTML мы создаем лишь внешний вид формы, а необходимые данные отправляются для обработки. С этой целью на вебсервере целенаправленно создается специальный файл, написанный на одном из серверных языков (чаще всего, PHP). Скажем, для обратной связи можно сотворить файлик mail.php, который и будет являться обработчиком.
При практическом использовании полученной в этой публикации информации не забудьте о том, как должна выглядеть , где коды всех видимых элементов страницы, включая формы, всегда находятся в пределах тега body.
Эта информация крайне необходима, поскольку даже в случае использовании всех современных встроенных в инструментов разработчиков (напомню, первой ласточкой в реализации этого функционала был ), вы должны четко представлять себе механизм использования основных тегов, тогда редактирование кода HTML, необходимость которого возникает время от времени, превратится в приятное занятие.
2. Multiple — этот атрибут, не имеющий параметров, дает возможность множественного выбора в отличие от выше приведенного примера, где можно выбрать только один элемент (строчку). Попробуйте выделить в данном списке мышкой сразу несколько строк (по одной в любых местах, удерживая клавишу Ctrl, либо посредством Shift следующих подряд одна за одной):
3. Size — устанавливает высоту выпадающего списка, то есть количество отображаемых строк. Если присутствует атрибут multiple, а значение size не указано (как в примере выше), то по умолчанию отображается четыре строки , а, например, при size="5" будут видны уже пять:
Option Textarea Label Fieldset Legend |
4. Required (параметров не имеет) — определяет, что обязательно нужно сделать выбор перед отправкой данных обработчику. Если элемент из списка не выбран, то данные формы отправлены не будут:
Option Textarea Label Fieldset Legend |
5. Autofocus (значений не имеет) — устанавливает фокус на список сразу после загрузки страницы. Кроме того, если пользователь привык основную часть действий производить клавишами, то как раз такое предварительно настроенное фокусирование поможет делать выбор из списка посредством стрелок на клавиатуре без всякого использования мышки:
6. Disabled (параметров нет) — блокирует доступ к списку (отключает его). На практике обычно используется вместе со скриптами в тех случаях, когда нужно включать раскрывающийся список только при выполнении определенных условий:
7. Form — осуществляет связь списка с одной или несколькими формами, к которым он принадлежит, но находится вне контейнера
. При этом в роли значения атрибута form прописывается параметр глобального атрибута id , который добавлен к тегу form:
|
Выберите из списка Option Textarea Label Fieldset Legend |
Не путайте атрибут тега select и основной тэг для создания формы. В примере выше к тегу form добавлен атрибут id="data", а к select — form="data", что и позволило связать выпадающий список с конкретной формой.
Атрибуты тега option
1. Value — определяет то значение из выпадающего списка, которое будет отправлено на сервер (обработчику формы). Собственно, обработчику отправляется имя, которое задается атрибутом name тега select, и значение value (для данного примера — 1, 2, 3, 4, 5), соответствующее выбранной строке выпадающего списка:
Option Textarea Label Fieldset Legend |
2. Disabled — блокирует для выбора элемент выпадающего списка.
Option Textarea Label Fieldset Legend |
Как видно из примера, строчка «Option» неактивна и выбрать ее невозможно.
3. Label — отображает текстовое содержание (являющееся его значением) того или иного элемента списка. Если label присутствует, то выводится строчка, тождественная значению этого атрибута и игнорируется текстовое содержание, находящееся внутри тега option. То же самое происходит, ежели содержимое между вовсе отсутствует.
Тег Textarea Тег Label Тег Fieldset Тег Legend |
Смотрите. В выше предоставленном примере первая строка для option в коде пустая (в левой части таблицы), но прописан параметр label="Тег Option", в результате именно этот текст появился в списке (в правой части). Вторая строка кода в качестве содержимого тега option содержит текст «Тег Textarea», но в раскрывающемся списке справа отображается слово «Textarea», совпадающее со значением label="Textarea".
4. Selected — выделяет текущий пункт выпадающего списка:
Option Textarea Label Fieldset Legend |
Если присутствует атрибут multiple, то есть возможность выделения более одного элемента:
Option Textarea Label Fieldset Legend |
Атрибуты тега optgroup
Если выпадающий список необходимо как-то упорядочить, например, разделить по группам, то для каждой из этих групп используют контейнер, состоящий из открывающего и закрывающего тегов optgroup, внутри которого содержится часть пунктов выпадающего списка. При этом существуют два атрибута для настройки подобного раскрывающегося списка.
1. Label — устанавливает название каждой группы в качестве параметра:
Option Textarea Label Fieldset Legend |
То же самое, но с multiple и size="7" тега select:
Option Textarea Label Fieldset Legend |
2. Disabled (нет значений) — блокирует выбор элементов той группы, по отношению к которой он установлен, причем, неактивные пункты обычно выделены серым цветом:
Option Textarea Label Fieldset Legend |
Небольшой видеоролик будет здесь как нельзя кстати:
Текстовое поле в форме посредством textarea
Еще один элемент формы для сайта, который мы рассмотрим — поле с возможностью ввода в него многострочного текста. Его можно создать с помощью тега textarea. Без атрибутов по умолчанию применение этого тега даст такой результат:
Введите текст: |
В поле можно осуществлять переносы строк, при этом текст будет передаваться обработчику на сервер с учетом сделанных переносов. Поле можно растягивать по ширине и длине, захватив мышкой нижний правый угол, который отмечен двумя диагональными полосками.
Попробуем теперь добавить к первоначальному коду несколько атрибутов с параметрами:
1. Name — определяет имя текстовой области в качестве значения для ее идентификации после отправки данных формы при их обработке на сервере.
2. Cols — ширина поля, которая в роли параметра задается числом стоящих рядом одинаковых символов, размещенных по горизонтали. Значение по умолчанию — 20 .
3. Rows — высота текстового поля, определяемое количеством строк. Если число строк текста, вводимого пользователем, окажется больше значения, заданного этим атрибутом, то справа появится вертикальная полоса прокрутки.
4. Maxlength — указывает максимальное количество знаков, которые можно поместить в текстовое поле. При превышении лимита дальнейший ввод будет невозможен.
Ниже представлен пример со всеми выше перечисленными атрибутами, действие каждого из которых вы можете проверить самолично, просто поместив в область текста нужное количество букв и строк (можете просто ввести один и тот же символ несколько раз):
Введите текст: |
5. Minlength — указывает минимальное число знаков, которые необходимо ввести в текстовую область. Ежели пользователь попытается отправить текст с меньшим количеством символов, то браузер выведет краткое сообщение с информацией, в которой будет содержаться упоминание о необходимости дополнить содержание формы и о том, сколько знаков уже введено.
7. Readonly (без параметров) — ежели к textarea прикрутить данный атрибут, то текстовое поле окажется недоступным для изменения пользователями и будет предназначено только для чтения. Но на него можно навести фокус (подведите курсор к полю и щелкните левой кнопкой мышки), а также выделить и скопировать (частично или полностью) текст:
Еще несколько атрибутов, реализующих дополнительный функционал при заполнении полей:
8. Autoсomplete — указывает, должен ли браузер выдавать подсказки при заполнении формы пользователем на основании ранее вводимых данных и дает возможность автоматически вставлять подходящий текст.
Имеет всего два параметра : on (включен) и off (выключен). Вот пример кода:
Данный атрибут со значением «on» работает только тогда, когда в веб-обозревателе конкретного пользователя включено автозаполнение полей формы.
9. Wrap — устанавливает для браузера правила переноса строк в текстовой области с помощью трех значений:
Soft — набор символов, который не помещается в поле по ширине, автоматически переносится на новую строчку. При этом обработчику текст будет передан в виде одной строки . В том случае, если пользователь осуществит перенос текста в любом нужном месте с помощью клавиши «Enter», то такой перенос сохраняется при отправке вебформы.
Введите текст: |
Hard — переносы производятся автоматически, если текст не влезает в поле по ширине, причем, при отправке обработчику места таких переносов будут сохранены. Этот параметр используется только в связке с атрибутом cols :
Введите текст: |
Off — отключение переносов строк. Если напечатать текстовый фрагмент без механического переноса посредством клавиши «Enter», то весь текст будет помещен в одну строку, причем, появится горизонтальная полоса прокрутки:
Введите текст: |
10. Autofocus (не имеет параметров) — инициирует фокусирование на текстовое поле при загрузке страницы с формой.
11. Disabled — в отличие от атрибута readonly (который также запрещает редактировать содержимое поля, но дает возможность навести на него фокус), полностью блокирует доступ к текстовой области, которая окрашивается обычно в серый цвет:
За последние два года, разработка веб-приложений (сайтов) продвинулась далеко вперед и то, что мы использовали для создания сайта ранее — уже устарело или появились более свежие методы.
Ранее, чтобы создать выпадающий список в html (на англ. — dropdown
), мы просто использовали
Специально для этой статьи, я нашел 16 разных примеров, которые могут пригодиться во время разработки сайта. И так приступим.
1. Настраиваемый список
Html шаблон, который позволяет настроить собственные цвета на выпадающего списка.
2. Сделанный на CSS3/JavaScript
Написан на CSS3 и JavaScript. Обычный выпадающий список.
3. Стиль: станции метро
Прозрачный выпадающий список со стилистикой станций метро.
4. Dropy. Написанное на SCSS & jQuery
5. Для длинных выдающих списков
Отличное решение для длинных выпадающих меню.
Выпадающее меню, которое написано на чисто CSS без использования каких-либо скриптов.
Отлично подойдет для боковых меню на сайте, чтобы визуально показать категории на сайте.
8. Стильное меню настроек пользователя
9. CSS3 выпадающий список
Сделано в стиле UI, подойдет под UI стилистику сайта.
12. Выбор флага
Dropdown в стиле выбора страны.
13. Обычный HTML, CSS dropdown
Надеюсь вам понравилось моя подборка. Оставляйте комментарии, делитесь мнением и присылайте собственные работы!
Как сделать выпадающий список в html (подборка ТОП 16) от bologer
В этом уроке мы сделаем, классическое горизонтальное меню на чистом CSS. Оно имеет иконки в списках. При наведение на пункт он плавно меняет цвет кнопки и текста, добавляется тень. Выпадающие списки можно делать многоуровневыми и главное это все довольно просто реализовано на чистом CSS3.
В уроке задействуем:
- 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
.
Body{ background-image: url("../img/ep_naturalwhite.png"); }
Описываем CSS стили горизонтального меню
Первым делом сбросим все отступы, которые могут задавать по умолчанию разные браузеры:
Dws-menu *{ margin: 0; padding: 0; }
Зададим header в 200 пик. и назначим шрифт Cuprum который можно скачать и отдельно подключить к себе на сайте, на всякий случай пропишем дополнительные шрифты.
Header{ margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }
Скроем маркеры у списков:
Dws-menu ul, .dws-menu ol{ list-style: none; }
Списки отобразим по горизонтали при помощи display: flax , и делаем его по центру:
Dws-menu > ul{ display: flex; justify-content: center; }
В header сделаем отступ только сверху, пропишем margin-top .
Header{ margin-top: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }
Оформим наше меню, зададим цвет кнопок, шрифт и т.д.
Dws-menu > ul li a{ display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; }
Затем позиционируем иконки, спискам присвоим position: relative; для дальнейшее центровки иконок:
Dws-menu > ul li{ position: relative; }
Dws-menu > ul li > a i.fa{ position: absolute; top: 15px; left: 12px; font-size: 18px; }
Назначим спискам разделитель в виде бордюрчика, отбираем первый элемент LI, задаем бордюр. Отбираем последний элемент LI присваиваем ему аналогичный бордюр.
Dws-menu > ul li:first-child{ border-left: 1px solid #b2b3b5; } .dws-menu > ul li:last-child{ border-right: 1px solid #babbbd; }
Делаем разделители спискам LI :
.dws-menu > ul li{ position: relative; border-right: 1px solid #c7c8ca; }Меню приобрело внешний вид, затем можно приступать к описанию стилей при наведении.
Анимируем горизонтальное меню при наведение
Dws-menu li a:hover{ background: #454547; color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; }
И что бы этот эффект плавно исчезал, добавим этот стиль к ссылке в покое:
.dws-menu > ul li a{ display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; transition: all 0.3s ease; }Основное меню закончили и можно приступать к описанию подменю и вложенные в них меню.
Описываем выпадающее меню CSS / HTML
О ткрываем index.html и добавим, к примеру, в продукцию дополнительное меню. Между списками LI вставляем UL , в нем разместим пять списков, в которых будут находиться ссылки с атрибутом herf=”#” .
ul>li*5>a
Жмем применить, пропишем название пунктов (Одежда, Электроника, Продукты питания, Инструменты, Быт. химия ).
- Одежда
- Электроника
- Продукты питания
- Инструменты
- Быт. химия
Затем открываем style.css
и опишем стили подменю.
Отбираем второй список и присвоим ему position: absolute; , зададим минимальную ширину в 150 пик.
/*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; }
Пропишем спискам border в 1 пик.
Dws-menu li > ul li{ border: 1px solid #c7c8ca; }
Для ссылок в подменю установим отступы в 10 пик., уберем трансформацию текста и фон сделаем на пару тонов темнее background: #e4e4e5; .
Dws-menu li > ul li a{ padding: 10px; text-transform: none; background: #e4e4e5; }
Затем создадим еще одно вложенное меню. Перейдем в файл разметки и к примеру в "Электронике" формируем по аналогии меню как делали мы до этого. Описываем заголовки пунктов (Камеры, Компьютеры, Телефоны ) и сохраняемся.
- Камеры
- Компьютеры
- Телефоны
Они вывелись, но скрыты под основным меню, теперь position: absolute; вложенного UL и сдвинем его на 150 пик. в сторону:
Dws-menu li > ul li ul{ position: absolute; right: -150px; top: 0; }
/*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; display: none; }А для их появления отберем списки при наведении и отобразим их при помощи display: block; .
Dws-menu li:hover > ul{ display: block; }
Теперь можно добавлять многоуровневые меню просто простым копированием блока UL , изменением его пунктов.
- Главная
- Продукция
- Одежда
- Обувь
- Куртки
- Брюки
- Электроника
- Камеры
- Компьютеры
- Телефоны
- Samsung
- Flf
- Apple
- Продукты питания
- Инструменты
- Быт. химия
- Одежда
- Услуги
- Услуга 1
- Услуга 2
- Услуга 3
- Новости
- Контакты
Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь
CSS генератором , у меня создано несколько Presets
, вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background
который прописывал до этого.
При желании данное меню можно оформить под тот стиль, который именно подойдем вам на сайте, достаточно просто с генерировать цвет и заменить его в коде. Получилась простое и в тоже время симпатичное горизонтальное меню, сделанное на чистом CSS.