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

Привет.

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

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

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

Спасибо.
  • Вопрос задан
  • 459 просмотров
Решения вопроса 4
julia_amake
@julia_amake
Front-end разработчик
задайте такой же border и остальным li, а не только активному. Только под цвет фона или прозрачный
Ответ написан
Комментировать
evgeniy2194
@evgeniy2194
PHP, js developer
Ответ написан
Комментировать
LittleFatNinja
@LittleFatNinja
горе девелопер, любитель лютой садомии
добавте
.main .sidebar .active:hover {
  border-left: 0.3em solid #3498DB;
}


codepen.io/anon/pen/RPgBOe
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
hoOstel
@hoOstel
nav li{
 poistion:relative;
}

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


я бы сделал вот так
Ответ написан
serjikz
@serjikz
web-developer
em не лучший вариант для бордеров по-моему, но дело ваше. Сюда .main .sidebar nav li добавьте это border-left: 0.3em solid transparent; и всё прекрасно заработает.
Ответ написан
vanya_beseda
@vanya_beseda
Front End
Ответ написан
Комментировать
@Fox_zp
Электроника, програмирование
Можно без бордюра, только отступами )
codepen.io/anon/pen/YXQOjo
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы