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


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

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

Шаг 1. HTML

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

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

Выпадающий список для сайта с помощью CSS3 | RUDEBOX

Шаг 2. CSS

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

Шаг 3. JavaScript

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

Вот и все. Готово!

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