Делаем выпадающий список с помощью html и css

12 декабря 2012 года, Размещено в категории: HTML / CSS

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

 

Делаем выпадающий список с помощью html и css

 

У нас должно получиться примерно следующее:

 

Чтобы создать такой список нам потребуется неупорядоченный список, который создается при помощи тега  <ul>. В этом списке вместо номеров используются обычно маркеры в виде диска, квадратика или окружности. Однако такой маркер можно заменить на собственное изображение. В этом случае в файле стилей с расширением .css надо записать следующее:

 

В селекторе ul первая строчка со стилем list-style-image подключает наше собственное изображение в виде крестика, что украсит создаваемый список. А стиль width устанавливает ширину списка. Далее, нам необходимо создать готовый вложенный список в родительском списке. На изображении, поданном ниже, отображена часть нашего списка, иллюстрирующая предлагаемый подход. В первом элементе родительского списка находится вложенный список из восьми элементов. Вложенный список также сделаем неупорядоченным, однако для него в файле стилей мы пропишем none в list-style-image и в list-style-type.

 

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

Стиль display со значением none не только делает внутренний список невидимым, но под этот список даже место не резервируется на страничке, что и позволяет сделать родительский список вполне естественным списком без лишних элементов. Чтобы сделать вложенный список видимым при наведении курсора на элемент основного списка, потребуется прописать псевдокласс hover ul для селектора  <li> списка. В этом селекторе пропишем стилю display значение block, что будет выглядеть так:

 

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

Не лишним будет почитать блог gabdrahimov.ru. Учебник по HTML, CSS и JavaScript не помешает начинающим вебмастерам.






1 Комментарий

  • 3 года назад Ответить

    Как сделать возможность редактировать список на сайте?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: