Как стать автором
Обновить

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

Хорошая реализация.
Было бы неплохо еще и javascript легкий прикрутить, чтобы меню съезжалось/разъезжалось.
Да я думал об этом, но я с ним ой мама родная, скока лет дела не имел уже — нужно время чтоб вспомнить или хотя бы посмотреть как jQuery приладить сюда.
Код с 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.
Пардон, вместо $($('ul',this.parentNode)[0])) логичнее будет $('ul:first',this.parentNode), сразу не сообразил.
Еще одно изменение=)
Вот это:
if (ul=$('ul:first',this.parentNode)) {
я бы заменил на:
var ul=$('ul:first',this.parentNode);
if (ul.length) {
Спасибо, надо будет привинтить )
Попробовал, для первого уровня все нормально, но для внутренних неверно срабатывает будто нажал на предыдущий узел.
Я так понимаю нужно toggle повесить на все узлы, но как в jQuery сделать это я пока не разобрался.
Все вроде верно срабатывало… Ссылку дадите? И в каком браузере?
Можешь дять полный код, с поправками, что ты вносил?
Я думаю может как то не так или не туда засунул строки. Браузер любой.
Код который я добавлял в 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.

Под изменившийся ХТМЛ сейчас поправлю…
Жду поправленный. А то я никак не разберусь как мне от span перейти на уровень выше и к li добавить/удалить класс «open».
Блин, я заменил 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');

Должно работать.
При замене вложенный узел ведет себя также как и тот на который жмешь, такое ощущение что оно захватывает все li.marker
Блин это CSS виноват был — наследование не ограниченно было.
Я пытался с разгону прямо сйчас переделать скрипт под измененный 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><!-- /multi-derevo -->


* This source code was highlighted with Source Code Highlighter.

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

Лучше повесить один, на #multi-derevo (почему не tree????) ;) И обойтись без jquery.
Почему не tree это не ко мне. Я согласен, что лучше повесить на один элемент обработчик и смотреть target, но 1) при небольшом количестве элементов тормозов не будет, 2) если тормозов нет, то эффективней ток код который проще написать. Согласитесь этот проще чем и читабильней, чем с проверками типа

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


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

По поводу времени — не спорю и понимаю)) Но пусть молодежь тут не думает, что для каждой мелочи надоиспользовать именно его!
Проверил на 281м элементе LI, тормоза не заметны даже в IE6 =) (комп не очень хороший)
Кстати, если обработчик включить через $.live() то скорее всего он и повесится на один элемент.
В общем jquery уже не тот(в лучшую сторону).
Почему я написал про jQuery, да потому что с ним сделать и показать СЕЙЧАС быстрее. В нем много уже сделано. Я не спорю что наверно оно будет 40кб тяжело кому-то, однако не всегда этот вопрос актуален.

Знаешь это вот как рисовать на доске, иногда быстрее нарисовать и рукой написать чем в графическом редакторе это делать. Вот и тут так берем велосипед и едем, кончено для данного конкретного примера мы не пользуемся ни 21 передачей этого велосипеда, ни вилкой с амортизаторами — зато нам не нужно этот велосипед собирать, чтобы прокатиться.
Вот такое вот сравнение )
Навскидку вам скажу, что код о котором вы говорите, состоял бы примерно из 70-100 строчек, вместо 9 здесь. И очень уж он зависит от используемых в проекте наработок (пусть даже своих).
70-100 строк это с анимацией или только сворачивание/разворачивание?
C анимацией конечно) Хотя конкретно анимация — строк 15-25. Но еще например нормальная работа с className, нормально добавление событий (addEventListener вроде в ie не работает + onclick везде атрибут а в ие через жопу) и т.д… Все это есть в jquery сразу.
А зачем анимация?
Хороший вопрос.
Видимо чтобы jquery не зря подключать =) Просто анимация вклюачется в данной ситуации в jquery всего 3мя знаками.
А вообще, для красоты. Сейчас ведь в самой системе почти любое действие происходит с анимацией и пользователь к этому уже привык.
Красивое решение
Спасибо, очень приятно )
НЛО прилетело и опубликовало эту надпись здесь
Спасибо.

Да подчас лень творит чудеса и мозг ищет нестандартное )
> Проверено в FF3, IE7, Opera 9, Google Chrome.
А в IE6 не работает?
А вы не можете посмотреть? Нет.
IE 6 нет под рукой, потому не проверял. Думаю это можно устроить, но чуть позже как отдельную модификацию.
Попробуйте посмотреть снова, я внес коррективы по совету alemiks теперь и в IE 6 должно работать.
Пожалуйста отпишите о результате.
Не работает =/

Opera 9.60 build 10447
У меня Opera 9.62 — работает.
Приложи скриншот чтобы посмотреть в чем проблема.
Все выглядит как надо, просто не раскрывается/закрывается.
Ява скрипт раскрывается здесь не используется, я это еще не сделал, вот потому и не открвается.
Для IE6 нужно сделать следующее:
— в HTML убрать все white-space между тегами в меню (сделать одной строкой)
— в CSS добавить
* html #multi-derevo * { height: 1%;}
* html .marker { border-style: dotted dotted dotted solid; }
* html .open { border-style: solid dotted dotted dotted; }
Спасибо — приладим.
НЛО прилетело и опубликовало эту надпись здесь
Вы что хотите увидеть раскрытие узла? Пока ява скрипт к нему я не сделать не успел, подождите — будет в следующей модификации.
НЛО прилетело и опубликовало эту надпись здесь
Отечественная классика жанра
vitaly.harisov.name/example/simple-tree/
vitaly.harisov.name/example/tree/
simple-tree даже соединительные линии картинками сделаны и не настроишь тут по быстрому цвет и вид этх линий, опять лезь в редактор и рисуй.
tree — аналогично, не будет работать без картинок и это скорее не tree, а treegrid.
Я это делал почти четыре года назад, есличо.
Ниче. Все прекрасно, но по другому.
что за красота!
outline:none бы для ссылок добавили, а то не очень смотрится
4-й safari это не съел. Жаль.
Почитал внимательнее и понял, что тупанул: отображается все нормально.
А ступил на моменте открытия/закрытия, которое собственно отсутствует =)
Да чето все по умолчанию ожидают такого поведения, сделаю пост продолжиение или этот обновлю когда скрипт прикручу.
Интересно. Поместил в избранное
весьма хороший код, если конечно не считать пустой спан с маркером (за бордер-арт конечно зачот :), очень хорошее применение) и отсутствие реагирования на :active
Отсутсвие реагирования на :active? А что хотелось бы видеть?
чтобы как-то реагировало. тут уже надо наверное смотреть по общей стилистике. а бы сделал чтобы оно выделялось жирным, хотя в данном случае жирным выделяется второй уровень, так что тут надо подумать как сделать лучше :)
Лады. Сделаю тогда что-нибудь.
В Firefox :active как-то не так срабатывает.
Сделал так:
a:active, a:focus {
color: #666;
background-color: #f4f4f4;
}

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

Что б с этим сделать? Пока так оставил.
Кстати для указания текущего пункта меню можно использовать стрелку & larr; (←) как доп. указатель на текущий пункт. Вот в моем комментарии на рисунке видно habrahabr.ru/blogs/css/55753/#comment_1500188.
Только естественно эту стрелочку придется или скриптом или сервером ставить, т.к. :after не везде поддерживается.
Я в шоке. Я помню, что вы заранее оговорились, что картинки специально не используете, но я, наверное, погиб бы от оргазма мозга, если бы маркер раскрывающегося списка был через list-style-image.
> через list-style-image.
А что в этом такого захватывающего?
Opera 10alpha build 1355 — работает, IE6SP2 — работает, IE8 (релиз) — работает.

IE5.5 — не работает
IE 5.5 нужен? Можно пошаманить, IE 5.5 тока для этого нарыть надо.
Неа, это просто константация :)
Не нужен. Не надо его откапывать.
Автор никак не освоит графический редактор?;) Хотя сама идея нравится. Маркер border'ом — это прикольно))
Это просто удобно. Потом оформление можно будет менять прямо из CSS. Кроме того, это быстрее грузится.

Жаль только, со сложным (например, градиентным) фоном это не взлетит.
Насчет удобства — не знаю. Попадет кому такой код, чувствую не одну голову сломает пока разберется((
Плохой верстальщик, негодный. Зачем такого держать. Я вёрсткой не занимаюсь, просто стараюсь быть в курсе, но и то, потыкав FireBug'ом, сразу врубился как это работает.
Автор кроме верстальщика уже более 5 лет делает сайты, при необходимости берет Fireworks и твроит когда надо.
Здесь цель обозначена — без картинок. Это, так сказать, тематическое направление у меня такое.
НЛО прилетело и опубликовало эту надпись здесь
Спасибо за отчет по браузерам! )
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Превосходно. Надеюсь после прикручивания Javascript также все будет работать.
НЛО прилетело и опубликовало эту надпись здесь
В чем же баг? Ваш браузер укажите и ОСь.
НЛО прилетело и опубликовало эту надпись здесь
Это не баг — это особенность реализации. Можно при необходимости переделать.
Не понял твое замечание сразу — ты имел ввиду много строчные записи что переносятся по частям?
НЛО прилетело и опубликовало эту надпись здесь
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.