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

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

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

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

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

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

Слухи про нетбук от Apple подтвердились!

Восстановленный, обычно его пишут если ноут не прошел на фабрике какой-то из тестов и его отправили на переборку. После переборки его снова протестировали, и если он прошел тест, то он идет в продажу.

Мне с отключенными картинками сразу подозрения вкрались…

В корзине нет товаров? Положим туда изюминку!

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

Неизвестные злоумышленники похитили карму

Акция по прочистке мозгов началсь ) особо нервным лучше сегодня не заходить на хабр, а то вдруг чего чувства разыграются… вседозволенность почуствуете ещё…

Неизвестные злоумышленники похитили карму

Ох, я тоже удивился аж топик в попыхах со скрином заделал. Оказывается первое апреля мы уже встречаем!

Чует мое сердце, сегодня еще будут приколы непредсказуемые...

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

Я пытался с разгону прямо сйчас переделать скрипт под измененный 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.

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

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

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

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

Продолжение идеи записи гитарных аккордов в HTML. Версия 3, оптимизированные варианты

Это еще надо изучить для начала. Потратить опять же время, я просто взял и сделал как знаю.

Мне проще взять степплер и сшить эти два листика вместе, чем нести их в типографию. Конечно, когда я захочу продвинутого и красивого я посмотрю в строну решения на векторе.

Продолжение идеи записи гитарных аккордов в HTML. Версия 3, оптимизированные варианты

ИМХО на ИМХО.
Мне не нужно это в данный момент.

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

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

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

Превосходно. Надеюсь после прикручивания Javascript также все будет работать.

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

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

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


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

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

Продолжение идеи записи гитарных аккордов в HTML. Версия 3, оптимизированные варианты

Да я им написал, и прикинь мне ответили на русском! Они скоро заменят этот индекс просто на теги, тогда будет нормально искать сразу.

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

Спасибо за отчет по браузерам! )

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

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

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

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

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

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

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