r3code 28 мар 2009 в 14:18

Многоуровневое дерево с маркерами (только HTML, CSS, без Javascript)

5 мин

23K

CSS*

+103

Комментарии 81

illuzii 28 мар 2009 в 14:47

Хорошая реализация.
Было бы неплохо еще и javascript легкий прикрутить, чтобы меню съезжалось/разъезжалось.

r3code 28 мар 2009 в 19:45

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

leonard 30 мар 2009 в 14:17

Код с jquery:

$(document).ready(function () { $('#multi-derevo li span').click(function () { if (ul=$($('ul',this.parentNode)[0])) { ul.toggle(300); var em=$($('em',this)[0]); em.hasClass('open')?em.removeClass('open'):em.addClass('open'); } }); }) * This source code was highlighted with Source Code Highlighter.

leonard 30 мар 2009 в 14:19

Пардон, вместо $($('ul',this.parentNode)[0])) логичнее будет $('ul:first',this.parentNode), сразу не сообразил.

leonard 30 мар 2009 в 14:25

Еще одно изменение=)
Вот это:
if (ul=$('ul:first',this.parentNode)) {
я бы заменил на:
var ul=$('ul:first',this.parentNode);
if (ul.length) {

r3code 30 мар 2009 в 15:34

Спасибо, надо будет привинтить )

r3code 31 мар 2009 в 17:42

Попробовал, для первого уровня все нормально, но для внутренних неверно срабатывает будто нажал на предыдущий узел.
Я так понимаю нужно toggle повесить на все узлы, но как в jQuery сделать это я пока не разобрался.

leonard 31 мар 2009 в 17:46

Все вроде верно срабатывало… Ссылку дадите? И в каком браузере?

r3code 1 апр 2009 в 00:42

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

leonard 1 апр 2009 в 14:09

Код который я добавлял в head страницы.

<script language="javascript" src="/jquery.pack.js"></script> <script> $(document).ready(function () { $('#multi-derevo li span').click(function () { var ul=$('ul:first',this.parentNode); if (ul.length) { ul.toggle(300); var em=$($('em',this)[0]); em.hasClass('open')?em.removeClass('open'):em.addClass('open'); } }); }) </script> * This source code was highlighted with Source Code Highlighter.

Под изменившийся ХТМЛ сейчас поправлю…

r3code 1 апр 2009 в 18:48

Жду поправленный. А то я никак не разберусь как мне от span перейти на уровень выше и к li добавить/удалить класс «open».

leonard 1 апр 2009 в 18:55

Блин, я заменил html на ваш новый, все свалилось=( Вы и css меняли? У меня просто времени разбираться особо не было…
В общих чертах, чтобы сменить класс для li yepyj заменить строчки
var em=$($('em',this)[0]);
em.hasClass('open')?em.removeClass('open'):em.addClass('open');
на
var li=$(this.parentNode);
li.hasClass('open')?li.removeClass('open'):li.addClass('open');
Должно работать.

r3code 1 апр 2009 в 20:22

При замене вложенный узел ведет себя также как и тот на который жмешь, такое ощущение что оно захватывает все li.marker

r3code 1 апр 2009 в 23:37

Блин это CSS виноват был — наследование не ограниченно было.

r3code 1 апр 2009 в 01:04

Я пытался с разгону прямо сйчас переделать скрипт под измененный HTML, но чего-то никак не удается из-за того что мркер перместил из em в li родителя, как до него добраться не пойму.
Какой будет JS в случае такого HTML:

<div id="multi-derevo"> <h4><a href="#">Ствол дерева</a></h4> <ul> <li class="marker open"><span><a href="#1" class="current" ><em></em>1. Ветка</a></span> <ul> <li class="marker"><span><a href="#11"><em></em>1.1. Ветка</a></span> <ul> <li><span><a href="#111">1.1.1. Листик</a></span></li> <li><span><a href="#112">1.1.2. Листик</a></span></li> </ul> </li> <li><span><a href="#12">1.2. Ветка</a></span></li> </ul> </li> <li class="marker"><span><a href="#2"><em></em>2. Ветка</a></span></li> <li class="marker"><span><a href="#3"><em></em>3. Ветка</a></span></li> <li class="marker"><span><a href="#4"><em></em>4. Ветка</a></span></li> <li class="marker last"><span><a href="#5" title="Послледняя ветка"><em></em>5. Ветка, верхушка</a></span> <ul> <li><span><a href="#1">5.1. Ветка</a></span></li> <li><span><a href="#1">5.2. Ветка</a></span></li> </ul> </li> </ul> </div> * This source code was highlighted with Source Code Highlighter.

egorinsk 30 мар 2009 в 15:24

Неэффективный код, вешает много обработчиков.

Лучше повесить один, на #multi-derevo (почему не tree????) ;) И обойтись без jquery.

leonard 30 мар 2009 в 15:32

Почему не tree это не ко мне. Я согласен, что лучше повесить на один элемент обработчик и смотреть target, но 1) при небольшом количестве элементов тормозов не будет, 2) если тормозов нет, то эффективней ток код который проще написать. Согласитесь этот проще чем и читабильней, чем с проверками типа

var targetTagName=e.targetTagName;
switch (targetTagName) { ...

Можно конечно обойтись и без jquery, никаких проблем, просто код опять же станет не настолько интуитивно понятным, и писать его несколько дольше. Что для меня непростительная роскошь при комментировании на хабре)

r3code 30 мар 2009 в 15:37

а не tree, потому что для меня звучало неприятно оно и все :)

egorinsk 30 мар 2009 в 15:50

Все же на дереве с 200-300 элементами чувствую jquery будет просто тормозить при загрузке… не люблю я его. И лишние 40 Кб((

По поводу времени — не спорю и понимаю)) Но пусть молодежь тут не думает, что для каждой мелочи надоиспользовать именно его!

leonard 30 мар 2009 в 16:02

Проверил на 281м элементе LI, тормоза не заметны даже в IE6 =) (комп не очень хороший)
Кстати, если обработчик включить через $.live() то скорее всего он и повесится на один элемент.
В общем jquery уже не тот(в лучшую сторону).

r3code 30 мар 2009 в 18:20

Почему я написал про jQuery, да потому что с ним сделать и показать СЕЙЧАС быстрее. В нем много уже сделано. Я не спорю что наверно оно будет 40кб тяжело кому-то, однако не всегда этот вопрос актуален.

Знаешь это вот как рисовать на доске, иногда быстрее нарисовать и рукой написать чем в графическом редакторе это делать. Вот и тут так берем велосипед и едем, кончено для данного конкретного примера мы не пользуемся ни 21 передачей этого велосипеда, ни вилкой с амортизаторами — зато нам не нужно этот велосипед собирать, чтобы прокатиться.
Вот такое вот сравнение )

leonard 30 мар 2009 в 15:49

Навскидку вам скажу, что код о котором вы говорите, состоял бы примерно из 70-100 строчек, вместо 9 здесь. И очень уж он зависит от используемых в проекте наработок (пусть даже своих).

НЛО прилетело и опубликовало эту надпись здесь

leonard 30 мар 2009 в 16:39

C анимацией конечно) Хотя конкретно анимация — строк 15-25. Но еще например нормальная работа с className, нормально добавление событий (addEventListener вроде в ie не работает + onclick везде атрибут а в ие через жопу) и т.д… Все это есть в jquery сразу.

shiko_1st 30 мар 2009 в 17:10

А зачем анимация?

leonard 30 мар 2009 в 17:36

Хороший вопрос.
Видимо чтобы jquery не зря подключать =) Просто анимация вклюачется в данной ситуации в jquery всего 3мя знаками.
А вообще, для красоты. Сейчас ведь в самой системе почти любое действие происходит с анимацией и пользователь к этому уже привык.

Wolfherz 28 мар 2009 в 16:00

Красивое решение

r3code 28 мар 2009 в 19:58

Спасибо, очень приятно )

НЛО прилетело и опубликовало эту надпись здесь

r3code 28 мар 2009 в 19:59

Спасибо.

Да подчас лень творит чудеса и мозг ищет нестандартное )

Q2W 28 мар 2009 в 16:47

> Проверено в FF3, IE7, Opera 9, Google Chrome.
А в IE6 не работает?

acy 28 мар 2009 в 18:19

А вы не можете посмотреть? Нет.

r3code 28 мар 2009 в 19:47

IE 6 нет под рукой, потому не проверял. Думаю это можно устроить, но чуть позже как отдельную модификацию.

r3code 28 мар 2009 в 19:52

Попробуйте посмотреть снова, я внес коррективы по совету alemiks теперь и в IE 6 должно работать.
Пожалуйста отпишите о результате.

Gaen 28 мар 2009 в 17:32

Не работает =/

Opera 9.60 build 10447

r3code 28 мар 2009 в 19:48

У меня Opera 9.62 — работает.
Приложи скриншот чтобы посмотреть в чем проблема.

Gaen 28 мар 2009 в 21:52

Все выглядит как надо, просто не раскрывается/закрывается.

-5

r3code 29 мар 2009 в 00:04

Ява скрипт раскрывается здесь не используется, я это еще не сделал, вот потому и не открвается.

НЛО прилетело и опубликовало эту надпись здесь

r3code 28 мар 2009 в 19:49

Спасибо — приладим.

НЛО прилетело и опубликовало эту надпись здесь

r3code 29 мар 2009 в 00:05

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

НЛО прилетело и опубликовало эту надпись здесь

aps 29 мар 2009 в 00:30

Отечественная классика жанра
vitaly.harisov.name/example/simple-tree/
vitaly.harisov.name/example/tree/

-5

r3code 29 мар 2009 в 16:12

simple-tree даже соединительные линии картинками сделаны и не настроишь тут по быстрому цвет и вид этх линий, опять лезь в редактор и рисуй.
tree — аналогично, не будет работать без картинок и это скорее не tree, а treegrid.

vithar 3 апр 2009 в 01:58

Я это делал почти четыре года назад, есличо.

r3code 3 апр 2009 в 22:59

Ниче. Все прекрасно, но по другому.

indalive 29 мар 2009 в 13:01

что за красота!

sunnybear 30 мар 2009 в 13:50

outline:none бы для ссылок добавили, а то не очень смотрится

Chesheer 30 мар 2009 в 14:11

4-й safari это не съел. Жаль.

Chesheer 30 мар 2009 в 14:13

Почитал внимательнее и понял, что тупанул: отображается все нормально.
А ступил на моменте открытия/закрытия, которое собственно отсутствует =)

r3code 30 мар 2009 в 15:38

Да чето все по умолчанию ожидают такого поведения, сделаю пост продолжиение или этот обновлю когда скрипт прикручу.

onix74 30 мар 2009 в 14:19

Интересно. Поместил в избранное

crwin 30 мар 2009 в 14:55

весьма хороший код, если конечно не считать пустой спан с маркером (за бордер-арт конечно зачот :), очень хорошее применение) и отсутствие реагирования на :active

r3code 30 мар 2009 в 15:39

Отсутсвие реагирования на :active? А что хотелось бы видеть?

crwin 30 мар 2009 в 15:51

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

r3code 30 мар 2009 в 18:21

Лады. Сделаю тогда что-нибудь.

r3code 31 мар 2009 в 00:15

В Firefox :active как-то не так срабатывает.
Сделал так:

a:active, a:focus { color: #666; background-color: #f4f4f4; }

Но в FF остается выделенным элемент, если ссылку выбрать, а потом переходить по TAB далее

Что б с этим сделать? Пока так оставил.

r3code 31 мар 2009 в 00:32

Кстати для указания текущего пункта меню можно использовать стрелку & larr; (←) как доп. указатель на текущий пункт. Вот в моем комментарии на рисунке видно habrahabr.ru/blogs/css/55753/#comment_1500188.
Только естественно эту стрелочку придется или скриптом или сервером ставить, т.к. :after не везде поддерживается.

ScREW 30 мар 2009 в 15:02

Я в шоке. Я помню, что вы заранее оговорились, что картинки специально не используете, но я, наверное, погиб бы от оргазма мозга, если бы маркер раскрывающегося списка был через list-style-image.

r3code 30 мар 2009 в 15:40

> через list-style-image.
А что в этом такого захватывающего?

bolk 30 мар 2009 в 15:29

Opera 10alpha build 1355 — работает, IE6SP2 — работает, IE8 (релиз) — работает.

IE5.5 — не работает

r3code 30 мар 2009 в 15:41

IE 5.5 нужен? Можно пошаманить, IE 5.5 тока для этого нарыть надо.

bolk 30 мар 2009 в 15:42

Неа, это просто константация :)

vithar 3 апр 2009 в 01:59

Не нужен. Не надо его откапывать.

egorinsk 30 мар 2009 в 15:30

Автор никак не освоит графический редактор?;) Хотя сама идея нравится. Маркер border'ом — это прикольно))

-4

bolk 30 мар 2009 в 15:35

Это просто удобно. Потом оформление можно будет менять прямо из CSS. Кроме того, это быстрее грузится.

Жаль только, со сложным (например, градиентным) фоном это не взлетит.

egorinsk 30 мар 2009 в 16:15

Насчет удобства — не знаю. Попадет кому такой код, чувствую не одну голову сломает пока разберется((

bolk 30 мар 2009 в 16:20

Плохой верстальщик, негодный. Зачем такого держать. Я вёрсткой не занимаюсь, просто стараюсь быть в курсе, но и то, потыкав FireBug'ом, сразу врубился как это работает.

r3code 30 мар 2009 в 15:46

Автор кроме верстальщика уже более 5 лет делает сайты, при необходимости берет Fireworks и твроит когда надо.
Здесь цель обозначена — без картинок. Это, так сказать, тематическое направление у меня такое.