Простий деревовидний список і список, що розкривається
каскадний список
Каскадний список можна створити за допомогою маркованих списків вкладених один в одного, але такий список буде недостатньо наочним для Новомосковсктеля:
- Каскадний список;
- У кожного елемента списку є батько, крім елементів першого рівня;
- Кожен наступний рівень вкладеності зміщується всередину на фіксовану відстань;
- Наявність з'єднують ліній;
- Всі елементи "брати" повинні з'єднуватися лінією;
- Всі елементи "діти" повинні з'єднуватися лінією з батьком;
- Елементи деревовидного списку не повинні мати фонову заливку для можливості відображення списку над будь-яким градієнтним фоном;
- Список, що розкривається деревовидний список;
- Все той же що і у простого деревовидного списку;
- Наявність кнопок "плюсиков";
- Кожен елемент є батьком зліва від себе повинен мати керуючу кнопку "плюсик";
- При натисканні на цю кнопку дочірні елементи показуються, а кнопка набуває вигляду мінуса, при повторному натисканні дочірні елементи ховаються, кнопка набуває свій первісний вигляд.
Загалом, непогано і зрозуміло, але можна ще краще. Вихідний код такого списку наступний:
У цій статті ми розглянемо тільки як оформити html код в деревовидний список, а якщо вас цікавить як сформувати багаторівневу вкладеність HTML-списків за допомогою PHP, то вам в сусідню статтю Як за допомогою PHP вивести багаторівневе меню, що випадає або деревовидний ієрархічний список, що розкривається.
Простий деревовидний список
Перетворимо його в простій деревовидний. додавши клас ul-treefree:
- Каскадний список;
- У кожного елемента списку є батько, крім елементів першого рівня;
- Кожен наступний рівень вкладеності зміщується всередину на фіксовану відстань;
- Наявність з'єднують ліній;
- Всі елементи "брати" повинні з'єднуватися лінією;
- Всі елементи "діти" повинні з'єднуватися лінією з батьком;
- Елементи деревовидного списку не повинні мати фонову заливку для можливості відображення списку над будь-яким градієнтним фоном;
- Список, що розкривається деревовидний список;
- Все той же що і у простого деревовидного списку;
- Наявність кнопок "плюсиков";
- Кожен елемент є батьком зліва від себе повинен мати керуючу кнопку "плюсик";
- При натисканні на цю кнопку дочірні елементи показуються, а кнопка набуває вигляду мінуса, при повторному натисканні дочірні елементи ховаються, кнопка набуває свій первісний вигляд.
Приклад з jsfiddle (просили):
Простий розкривається деревовидний список
Якщо цей же список хочемо зробити розкривається. то слід додати ще клас ul-dropfree.
Цей блоковий елемент (
) Додається за допомогою jQuery, і вішається на нього подія click. по якому розкривається або ховається список дочірніх елементів:Подивимося на моє меню у вигляді списку:
Точний деревовидний список
У списках представлених вище є невелика неточність, для мене вона некритична. Порівняйте з точним деревовидним списком нижче:
Для того, щоб у нас вийшов точний деревовидний список необхідно вихідний код трохи модифікувати, додавши додатковий тег, наприклад тег
, навколо кожного тексту в елементі списку. Далі, я поясню, для чого цей тег потрібен. HTML структура точного деревовидного списку наступна:додатковий тег
необхідний для того, щоб опустити текст нижче елемента списку
зміщений вниз і його горизонтальна риса стосується вертикальної риси дочірнього
Ліній стало начебто більше, мені не дуже подобається, але нехай буде ...
Точний список, що розкривається деревовидний список
Додаємо клас ul-drop, і, вуаля:
У кожного елемента списку є батько, крім елементів першого рівня;
Кожен наступний рівень вкладеності зміщується всередину на фіксовану відстань;
Наявність з'єднують ліній;
Всі елементи "брати" повинні з'єднуватися лінією;
Всі елементи "діти" повинні з'єднуватися лінією з батьком;
Елементи деревовидного списку не повинні мати фонову заливку для можливості відображення списку над будь-яким градієнтним фоном;
Список, що розкривається деревовидний список;
Все той же що і у простого деревовидного списку;
Наявність кнопок "плюсиков";
Кожен елемент є батьком зліва від себе повинен мати керуючу кнопку "плюсик";
При натисканні на цю кнопку дочірні елементи показуються, а кнопка набуває вигляду мінуса, при повторному натисканні дочірні елементи ховаються, кнопка набуває свій первісний вигляд.
Краса! От би ще як-небудь прибрати border у самого першого елемента.
Який браузер або бордер точніше, для мене все красиво
Свіжий Chrome, FF 25, IE 8. Я про місце обведений кружком
Можна прибрати штучно, накладенням білого прямокутника, але це милицю ul.ul-treefree> li: after
Спасибі вам за туторіал по деревовидним списками.
Добрий день. Будь ласка, будьте ласкаві розпишіть польностью, як вбудовувати код явискріпта, у мене не виходить зробити список, що розкривається. Дякуємо.
Список хороший, але працює не до кінця. Підключив всі файли, він розкривається при натисканні, але додавання div drop не розкриває потрібну гілку :(
Дуже класно, спасибі!
Дуже класно, спасибі! Але будь другом, виклади исходник простого списку, повір не мені одному знадобиться.
Підкажіть будь ласка, як зробити, щоб список був за замовчуванням розкритий?
Наприклад прибрати рядок з js яка його згортає: $ ( ". Ul-dropfree"). Find ( "ul"). SlideUp (400).
Спробував підключити "Точний розкривається деревовидний список" але не працює: _betonenergo.com.ua/spravochnik1/ можливо плагіни або шаблон WP блокує щось, але пробував також на jsfiddle повторити, там також просто текст у вигляді списку відображає (((
Мені коли потрібен деревовидний список я заходжу сюди і копіюю стиль, у мене все працює, як ви так цікаво робите - не знаю, але обов'язково додам сюди приклад з jsfiddle. Як руки дійдуть)
а реально реалізувати розкривається в одному html фалі? js адже можна вбудувати в сам html? Що в підсумку я хочу отримати: Є дуже великий текстовий файл і я хочу частина файлу як би скласти (сплюснути, згрупувати) за допомогою списку. І пересилати даний файл поштою. Ніяких стилів, картинок, квітів, шріфтоав не потрібно. просто текст і "плюсик" скласти пару сотень рядків.
Файл можна пересилати поштою, але це не зручно - викачувати файл потім відкривати його барузер.