на новые посты в блоге
Оставить комментарий:
Интересно будет почитать:
Таким образом, мы сможем получить выпадающий список, не прибегая к использованию языка JavaScript, благодаря возможностям которого собственно чаще всего такие списки и создают. В данном примере работает лишь самый первый элемент нашего списка, однако для остальных элементов прописать требуемый свойства уже не составит труда.
Стиль display со значением none не только делает внутренний список невидимым, но под этот список даже место не резервируется на страничке, что и позволяет сделать родительский список вполне естественным списком без лишних элементов. Чтобы сделать вложенный список видимым при наведении курсора на элемент основного списка, потребуется прописать псевдокласс hover ul для селектора P<li> списка. В этом селекторе пропишем стилю display значение block, что будет выглядеть так:
На следующем шаге сделаем наш вложенный список не только невидимым, но и несуществующим, а также определим ему относительное расположение в родительском списке в первом элементе. Запишем также в стиле top нулевое значение, чтобы между элементами родительского списка не оказалось какого-либо расстояния большего, чем допустимо. Это будет выглядеть примерно так:
В селекторе ul первая строчка со стилем list-style-image подключает наше собственное изображение в виде крестика, что украсит создаваемый список. А стиль width устанавливает ширину списка. Далее, нам необходимо создать готовый вложенный список в родительском списке. На изображении, поданном ниже, отображена часть нашего списка, иллюстрирующая предлагаемый подход. В первом элементе родительского списка находится вложенный список из восьми элементов. Вложенный список также сделаем неупорядоченным, однако для него в файле стилей мы пропишем none в list-style-image и в list-style-type.
Чтобы создать такой список нам потребуется неупорядоченный список, который создается при помощи тега P<ul>. В этом списке вместо номеров используются обычно маркеры в виде диска, квадратика или окружности. Однако такой маркер можно заменить на собственное изображение. В этом случае в файле стилей с расширением .css надо записать следующее:
У нас должно получиться примерно следующее:
Давайте создадим выпадающий список без использования JavaScript, придав некоторой динамики сайту. Для этого нам понадобятся знания всего лишь основ html и css. Снабдим наш список также небольшими однотипными изображениями, вместо обычных номеров пунктов списка.
12 декабря 2012 года, Размещено в категории:
Делаем выпадающий список с помощью html и css
Делаем выпадающий список с помощью html и css
Комментариев нет:
Отправить комментарий