CSS. Как сделать такой же список, как и на тостере?

Question

[DTX]

Нужен способ попроще)


Вот тут начинал пробовать:
https://jsfiddle.net/DTX_/og884s4j/

1) Не понял, почему при указанной высоте 1px, блок занимает больше px. Border-box пробовал установить..
2) Как сдвинуть .spanner в право без использования right? Float:right не помогло

Answer 1

[Elwen]

У меня есть несколько иное решение, чем сейчас используется на тостере. Этот вариант первым пришел в голову и мне кажется несколько проще. По сути это единый список, но по умолчанию отображается только активная ссылка. Однако при этом отсутствует анимация перекрытия названия страницы. Если не из-за нее все делается, то вам сюда - https://jsfiddle.net/WebKasumi/7gutvms7/
p.s. Если вы решите использовать этот вариант меню для полноценного перехода по страницам, то используйте кусок js, который сейчас закомментирован, что бы избавиться от лишней анимации. Анимацию сделала что бы можно было посмотреть как будет раскрываться меню на других страницах. И при желании ее можно использовать для перехода по табам или при использовании ajax, но в этом случае я бы еще поразмыслила над целесообразностью использования тегов .

Answer 2

[Shane Matte]

В родителе 2 блока, 95% и 5% примерно, даешь обтекание каждому блоку. А высоту лучше не давать. Если не понятно, утричком могу кинуть

Comments

[DTX]

При разворачивании родитель сворачивается, а стрелочка остаётся. Поэтому была попытка вынести её в absolute

Answer 3

[Сергей Горячев]

https://jsfiddle.net/og884s4j/1/

Comments

[DTX]

Аналогично, при разворачивании родитель сворачивается, а стрелочка остаётся. Поэтому была попытка вынести её в absolute

[Сергей Горячев]

DirecTwiX: не понимаю, что у вас за проблема. У меня все как надо)

[DTX]

Sergey Goryachev: ну посмотрите, как на тостере это выглядит на узком экране. Там при нажатии основной блок сворачиваются, а остльные выезжают. Так, если выбрано Item2, он будет и среди разворачиваемого списка (т.е. присутствует дважды в html)

[Сергей Горячев]

DirecTwiX: нашел. никогда его не видел.
в принципе, логика та же почти.

[DTX]

Sergey Goryachev: вот с почти я разобраться и не могу) В (0) описал проблемы..