Как выполнить такое меню?

Question

[nluparev]

Привет.

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

вот что у меня получилось на данный момент codepen.io/SuperManEver/pen/gpRoMV?editors=110

Как вы видете граница слева двигает текст внутри li, что не есть гуд.
Вообщем, хочу как на картинке :-)

Спасибо.

Answer 1

[Юлия Старченко]

задайте такой же border и остальным li, а не только активному. Только под цвет фона или прозрачный

Answer 2

[Евгений Перин]

codepen.io/seoperin/pen/RPgBJB

Comments

[nluparev]

тоесть весь секрет в том чтобы иметь прозрачную border-left ?

[Евгений Перин]

nluparev: ну это один из вариантов, тут ничего секретного) Можно с псевдоэлементом :before делать, но там тоже надо скорее всего делать бесцветный у неактивных и цветной у активных. Способов куча, я просто привел пример, чтобы сильно не переделывать твой код

[nluparev]

Евгений Перин: понял, спасибо :-)

Answer 3

[Евгений Одинец]

codepen.io/anon/pen/yNXqqY

Answer 4

[LittleFatNinja]

добавте

.main .sidebar .active:hover {
  border-left: 0.3em solid #3498DB;
}

codepen.io/anon/pen/RPgBOe

Answer 5

[rhost]

nav li{
 poistion:relative;
}

nav li.active:before{
  content:"";
  background:#3498DB;
  position: absolute;
  width:4px;
  height:100%;
}

я бы сделал вот так

Comments

[Дмитрий Б]

Срочно удалите это сообщение, не разрушайте психику людей

[rhost]

Дмитрий Байбухтин: а что собственно не так?

[Дмитрий Б]

rhost: это быдлокод. Зачем такое полотно, когда там бордюр 100%?

[rhost]

Дмитрий Байбухтин: зачем добавлять прозрачный бордер ВСЕМ элементам если можно воспользоваться ":before" ( кстати на тостере сделано так же :D )

[nluparev]

Я не давно начал своё знакомство с CSS, правильно понимаю что это добавляет некий контент ширины 4px перед элементом класса active?

[rhost]

nluparev: немного не так, в li c классом active добавится псевдоэлемент :before

[nluparev]

rhost: псевдоэлемент? Где можно больше об этом почитать?

[rhost]

nluparev: htmlbook.ru/css/before

[nluparev]

rhost: спасибо :-)

Answer 6

[Сергей ZSA]

em не лучший вариант для бордеров по-моему, но дело ваше. Сюда .main .sidebar nav li добавьте это border-left: 0.3em solid transparent; и всё прекрасно заработает.

Comments

[nluparev]

я только учусь верстать, а что Вы порекомендуете ?

[Сергей ZSA]

nluparev: px

Answer 7

[Nikbes]

codepen.io/Vanyabeseda/pen/doRjLe

Answer 8

[Виталий Волович]

Можно без бордюра, только отступами )
codepen.io/anon/pen/YXQOjo

Comments

[nluparev]

то-есть вы тоже самое решили с помощью padding, верно?

[Виталий Волович]

да, три padding'a и один margin
по ссылке- мои правки правее основного кода