Від автора: всіх вітаю. Напевно, більшості з вас подобаються красиво оформлені списки, так як це дозволяє дуже легко сприймати інформацію, яка в них записана. У цій статті ми створимо багаторівневий список в html, а також трохи оформимо його за допомогою css. Приступимо!
Базова теорія
Зрозуміло, що для створення багаторівневого списку потрібно хоча б розуміти, як створити простий список. Власне, самих видів списків у html існує два: нумеровані і маркіровані. Створені вони для різних цілей. Нумерований варто застосовувати тоді, коли, наприклад, какоу-то перерахування дій потрібно виконувати строго в зазначеному порядку. Відповідно, такий список підійшов би для планування дня або запису рецепта.
У маркірованому пункти просто стоять один за одним, але при цьому якщо їх поміняти місцями, то нічого не зміниться, так як пункти не прив’язані до якоїсь суворої нумерації.
Це просто теорія, про яку треба знати, але на практиці не станеться нічого страшного, якщо ви будете використовувати списки по-різному в різних ситуаціях. Я особливо не заморочуюсь з приводу того, який тип обрати.
Власне, тег ol створює нумерований список, а тег ul – маркований. Це зрозуміло. Сподіваюся, ви також маєте уявлення про те, як створювати найпростіший список, тому ми одразу перейдемо до створення багаторівневого.
Багаторівневий список: як його робити?
Власне, зволікати довго не буду, ось розмітка, можете вставити в свій html-файл.
Отже, якщо ви уважно переглянули розмітку, то напевно вже вловили суть? Спочатку ми відкриваємо ol, це буде наш батьківський список, в якому будуть міститися вкладені списки і всі пункти. Пункти, як ви розумієте, створюються парним тегом li, всередині якого пишеться вміст.
Відповідно, вкладений список ми обов’язково повинні вкласти в один з наших пунктів. Тобто відкрили тег li, написали в ньому потрібний контент, але після цього не закриваємо тег. Закривати будемо тільки після того, як створимо всередині точно такий же список.
У нашому випадку виходить такий собі план на день. Не забудьте правильно закрити усі теги. Взагалі мінус багаторівневих списків, як і таблиць, це громіздка розмітка. Уявіть, що ми були дописали сюди ще списки для 19-го і 20-го числа, а пункти розбиті на підпункти, які винесли б в окремі переліки, які, в свою чергу, розташовувалися б вже всередині вкладених. Тобто була б вже вкладеність 2-го рівня. Разом все це зайняло б 30-60 рядків коду.
До речі, ось так це виглядає:
Як бачите, браузер автоматично проставляє відступи для вкладеного списку, щоб візуально було зрозуміло, що він відноситься до першого пункту. Єдина проблема в тому, що внутрішній перелік отримує такий же нумератор – числа, а це не зовсім правильно.
Щоб змінити нумератор, необхідно використовувати css. Звернемося до вкладених списками так:
ol ol{
list-style-type: lower-alpha;
}
Тобто ми використовували вкладений селектор. Властивість list-style-type: lower-alpha, поміняє нумератори з цифр на малі латинські літери. Взагалі значень у цього властивості багато, але решта можете подивитися в довіднику.
Ще раз зазначу, що звернення відбувається до всіх нумерованих списків, які, в свою чергу, вкладені в інші нумеровані списки. Відповідно, селектор ol ol ol вибере всі списки, які мають вже другий рівень вкладеності і т. д.
Поки на цьому ми зупинимося, більш цікавий спосіб оформлення я покажу вам пізніше за допомогою css. А поки ми повернемося до маркованими списками і створимо такий:
- Овочі
- картопля
- перець
- морква
- Фрукти
- яблука
- банани
Відмінність видно тільки в тому, що в даному випадку браузер змінив зовнішній вигляд маркерів у внутрішніх списків. Також в даному випадку ми зробили списку під кожен пункт. Ви повинні розуміти, що в html в принципі немає ніякого ліміту на кількість вкладених списків. Тобто ви можете створити їх хоч 10-15 в одному списку. Єдина проблема, з якою ви зіткнетеся – довга і дуже заплутана розмітка, в якій важко розібратися.
Змінюємо маркери для маркірованого списку з допомогою CSS
Якщо ми візьмемо стандартне оформлення списків, то, як бачите, воно дуже і дуже убоге. У 99% відсотків воно просто буде вас не влаштовувати і ви захочете його змінити. На щастя, для маркованих списків це зробити дуже легко, так як є властивість list-style-image, але я пропоную використовувати скорочену запис та записати так:
ul{
list-style: url(marker.jpg);
}
Попередньо я знайшов і помістив в папку потрібну картинку, ось що вийшло:
Як бачите, маркер применился до всіх елементів списків. Селектором ul ul можна прописати для вкладених пунктів інший маркер, якщо вам це потрібно.
Звичайно, найбільш оптимальний формат картинки-маркера я вважаю формат png. З його допомогою ви можете підбирати не тільки квадратні маркери. Та й взагалі png-картинка буде краще виглядати.
Я думаю, за 5 хвилин пошуку в інтернеті ви зможете знайти чимало таких маркерів, які потім можна застосовувати у верстці. Звичайно, найбільш оптимальним варіантом буде намалювати самому, якщо не обділені талантом, або замовити у дизайнера, щоб дизайн маркерів відповідав загальному дизайну сайту.
Прибираємо маркери та нумератори повністю
В деяких випадках потрібно просто прибрати маркери або нумератори списки, тому що їх не повинно бути по дизайну. Наприклад, вертикальні і горизонтальні менюшки в 90% випадків роблять саме через список. Відповідно, маркери нам в такому меню ні до чого. Щоб прибрати, пишемо так:
ol або ul{
list-style-type: none;
}
Або скороченого запису – list-style: none.
Стилізуємо нумерований список
Те, що я покажу далі, вже є більш складною фішкою, яка дозволяє створити будь оформлення для нумераторів. По-перше, ми повністю приберемо стандартні нумератори, так як їх все одно нормально не оформиш, краще буде взагалі повністю від них позбутися.
Далі в css напишемо такий код, нижче я його поясню:
ol{
list-style-type: none;
counter-reset: number;
}
ol li{
font-size: 18px;
}
ol li:before {
color: #fff;
background: #62CB91;
display: inline-block;
text-align: center;
margin: 3px 3px;
line-height: 22px;
width: 22px;
height: 22px;
counter-increment: number;
content:counter(number);
border-radius: 3px;
box-shadow: 2px 2px 0 0 #ccc;
}
Найголовніше те, яку красу він створив:
Так, це явно цікавіше, причому ви можете зробити будь-який, абсолютно будь-який дизайн для ваших нумераторів. Але я обіцяв вам пояснити код.
Отже, левова частка властивостей прописана для селектора ol li:before. По-перше, нам треба розібратися, як він працює. Псевдоэлемент before дозволяє помістити вміст перед зазначеним елементом. У нашому випадку це всі пункти нумерованих списків.
Далі відбувається опис того, як буде виглядати елемент, який розміщується перед пунктами. Задаємо колір фону, тексту, ширину, висоту, відступи, вирівнювання і т. д. З цими налаштуваннями розібратися можна.
А тепер найголовніше! Щоб виставлялися правильні цифри в списках, потрібно поставити лічильник-інкремент для псевдоелемент пунктів списку. Це робиться рядком:
counter-increment: number;
Через двокрапку прописується назва лічильника. Воно може бути довільним, не обов’язково number. Добре, це ми просто поставили лічильник, але поки його значення ніяк не виводиться. Якщо ви вивчали псевдоелементи after та before, то знаєте, що текстове вміст задається в них за допомогою властивості content. Отже, пишемо так:
content:counter(number);
Тепер у псевдоэлементах буде виводитися значення лічильника. У першому елементі – 1, у другому – 2. Тобто те, що потрібно для списку. Які ще властивості я вказав, щоб завершити оформлення? Наприклад, border-radius – це закруглення кутів, box-shadow – невелика тінь, display: inline-block – дуже важливе правило, воно дозволить псевдоэлементу відображатися на одному рядку з контентом пункту li.
Але і це не все!) Ось такий код ще у нас прописаний для нумерованих списків в цілому:
counter-reset: number;
Що він означає і для чого потрібен? По суті, це скидання лічильника. Тобто для кожного нумерованого списку значення буде скинуто до нуля і з нього почнеться відлік. Якщо б цього правила не було, то було б ось що:
Як бачите, у вкладеного списку вже відлік пішов би неправильно, не з одного, а з двох. Ну і взагалі все працювало б невірно. Так що обов’язково додайте скидання лічильника для кожного окремого лічильника.
Власне, ось вам і вся фішка. Головне, зрозуміти трюк зі счечиками, а дизайн нумератором можна переробити буквально за пару секунд. Наприклад, ось буквально за хвилину переробив їх, додавши більше скруглення, градієнт та іншу тінь.
Як бачите, вам навіть дизайнер може не знадобитися, щоб зробити цілком собі симпатичні списки. Все впирається у ваші знання з css: чим їх більше, тим простіше вам створювати класне оформлення будь-яких елементів на веб-сторінці.
Коротше, пропоную вам серйозно взятися за вивчення css3 і освоїти ще десятки дуже класних фішок, які можна реалізувати з допомогою цієї технології. А навчання ви можете почати у нас, пройшовши наш курс з CSS3, в якому розкриваються практично всі нововведення цієї версії.
Більшість властивостей css3 на даний момент вже дуже добре підтримуються в браузерах, так що використовувати їх ви зможете без всяких побоювань.
