Многоуровневый список в HTML: как создать и настроить?

От автора: всех приветствую. Наверняка большинству из вас нравятся красиво оформленные списки, так как это позволяет очень легко воспринимать информацию, которая в них записана. В этой статье мы создадим многоуровневый список в html, а также немного оформим его с помощью css. Приступим!

Базовая теория

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

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

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

Собственно, тег ol создает нумерованный список, а тег ul – маркированный. Это понятно. Надеюсь, вы также имеете представление о том, как создавать простейший список, поэтому мы сразу перейдем к созданию многоуровневого.

Многоуровневый список: как его делать?

Собственно, тянуть резину долго не буду, вот разметка, можете вставить в свой html-файл.

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

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

В нашем случае получается такой себе план на день. Не забудьте правильно закрыть все теги. Вообще минус многоуровневых списков, как и таблиц, это громоздкая разметка. Представьте, что мы были дописали сюда еще списки для 19-го и 20-го чисел, а пункты разбили на подпункты, которые вынесли бы в отдельные перечни, которые, в свою очередь, располагались бы уже внутри вложенных. То есть была бы уже вложенность 2-го уровня. Итого все это заняло бы 30-60 строк кода.

Кстати, вот так это выглядит:

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

Чтобы изменить нумератор, необходимо уже использовать css. Обратимся к вложенным спискам так:

То есть мы использовали вложенный селектор. Свойство list-style-type: lower-alpha, поменяет нумераторы с цифр на строчные латинские буквы. Вообще значений у этого свойства много, но остальные можете посмотреть в справочнике.

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

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

Отличие видно только в том, что в данном случае браузер изменил внешний вид маркеров у внутренних списков. Также в данном случае мы сделали список под каждый пункт. Вы должны понимать, что в html в принципе нет никакого лимита на кол-во вложенных списков. То есть вы можете создать их хоть 10-15 в одном списке. Единственная проблема, с которой вы столкнетесь – длинная и очень запутанная разметка, в которой трудно разобраться.

Изменяем маркеры для маркированного списка с помощью CSS

Если мы возьмем стандартное оформление списков, то, как видите, оно очень и очень скудное. В 99% процентов оно просто будет вас не устраивать и вы захотите его сменить. К счастью, для маркированных списков это сделать очень легко, так как есть свойство list-style-image, но я предлагаю использовать сокращенную запись и записать так:

Предварительно я нашел и поместил в папку нужную картинку, вот что получилось:

Как видите, маркер применился ко всем элементам списков. Селектором ul ul можно прописать для вложенных пунктов другой маркер, если вам это потребуется.

Конечно, наиболее оптимальный форматом картинки-маркера я считаю формат png. С его помощью вы можете подбирать не только квадратные маркеры. Да и вообще png-картинка будет лучше смотреться.

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

Убираем маркеры и нумераторы полностью

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

Либо в сокращенной записи – list-style: none.

Стилизуем нумерованный список

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

Далее в css напишем такой код, ниже я его объясню:

Самое главное то, какую красоту он создал:

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

Итак, львиная доля свойств прописана для селектора ol li:before. Во-первых, нам надо разобраться, как он работает. Псевдоэлемент before позволяет поместить любое содержимое перед указанным элементом. В нашем случае это все пункты нумерованных списков.

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

А теперь самое главное! Чтобы выставлялись правильные цифры в списках, нужно задать счетчик-инкремент для псевдоэлементов пунктов списка. Это делается строчкой:

Через двоеточие прописывается название счетчика. Оно может быть произвольным, не обязательно number. Хорошо, это мы просто задали счетчик, но пока его значение никак не выводится. Если вы изучали псевдоэлементы after и before, то знаете, что текстовое содержимое задается в них с помощью свойства content. Значит, пишем так:

Теперь в псевдоэлементах будет выводиться значение счетчика. В первом элементе – 1, во втором – 2. То есть то, что нужно для списка. Какие еще свойства я указал, чтобы завершить оформление? Например, border-radius – это закругление углов, box-shadow – небольшая тень, display: inline-block – очень важное правило, оно позволит псевдоэлементу отображаться на одной строке с контентом пункта li.

Но и это не все!) Вот такой код еще у нас прописан для нумерованных списков в целом:

Что он означает и для чего нужен? По сути, это сброс счетчика. То есть для каждого нумерованного списка значение будет сброшено до нуля и с него начнется отсчет. Если бы этого правила не было, то было бы вот что:

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

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

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

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

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

Комментарии Вконтакте: