Как сделать меню с полосками?

Question

[Сергей Васенин]

Делал через бефоре и через border-left ничего не выходит подскажите как сделать... Активное меню сделал без проблем а вот по бокам не получается

Comments

[Юрий Смит]

Что именно не выходит?

Answer 1

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

https://jsfiddle.net/webirus/3q16r9ut/

Comments

[Сергей Васенин]

то что нужно спасибо))

[Сергей Васенин]

есть одна проблема в некоторых пунктах меню она явно жирнее чем в других с чем это связано ?

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

Сергей Васенин: Понятия не имею, там четко задано 3 пикселя.

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

Сергей Васенин: Ну, или 1 пиксель, если вертикальные. В общем, ничего там особенного нет)

[Сергей Васенин]

Сергей Горячев: я вот тоже думаю что там ничего такого нет но в некоторых видно что жирнее чем 1 px

Answer 2

[Юрий Есин]

.menu .menu_item {
  border-left: 1px solid #c0c0c0;
}

.menu .menu_item:first-child {
  border-left: 0 none;
}

или

.menu .menu_item {
  border-right: 1px solid #c0c0c0;
}

.menu .menu_item:last-child {
  border-right: 0 none;
}

Вариант для вашей вложенности меню: codepen.io

Comments

[Сергей Васенин]

делал так. верстка меню летит

[Юрий Есин]

emin313: так вы бы хоть верстку показали в codepen, может у вас там вложенные элементы, а вы пытаетесь рамку сделать их оберткам.

[Сергей Васенин]

Юрий Есин:

ul
	{
	padding: 30px 30px 0 0;
	}
	ul li
	{
		position: relative;
		display: inline-block;
		padding: 0 0 25px 25px;
	}
	
	ul li a
	{
		display: block;
		font-size: 12px;
		font-family: arial;
		text-decoration: none;
		font-weight: 400;
		color: #fff;
		line-height: 1;
		
	}

ul li a::after
{
	position: absolute;
	content: "|";
	padding-left: 20px;
}
	nav li a:hover
	{
		padding-bottom: 15px;
		border-bottom: solid 4px red;
		
	}

[Юрий Есин]

emin313: я добавил в ответ ссылку на ваш вариант вложенности меню. Мы применяем :first-child не к внутреннему элементу, вложенному в элемент списка, а к самому элементу списка, иначе правило применится ко всем элементам, т.к. все вложенные ссылки в элемент списка идут как первый дочерний элемент first-child. Это как раз то о чём я выше упомянул.

[Сергей Васенин]

Юрий Есин: не совсем понял...тоесть мне before. Не нужен нужно применить border left и отменить его у последнего элемента ?

[Юрий Есин]

emin313: и тот и другой вариант решает вашу задачу, просто мой не создаёт псевдоэлемент. Вариант с :before и :after удобен, если вам нужно еще и позиционирование разделителей настроить или как-то так стилизовать, как обычным border'ом не получится.

[Сергей Васенин]

Юрий Есин:

nav li a:hover {
  padding-bottom: 15px;
  border-bottom: solid 4px red;
}

замените на

ul li a:hover {
  padding-bottom: 15px;
  border-bottom: solid 4px red;
}

и активное меню то есть нижние бордеры начнут себя вести не так как надо

[Юрий Есин]

emin313:

ul li:hover {
  padding-bottom: 15px;
  border-bottom: 4px solid red;
}

Пэн обновил.

[Сергей Васенин]

Юрий Есин: не то)) в макете именно активное подчёркивание у текста а не всего элемента

[Юрий Есин]

emin313: тоже решаемо. Но текст должен быть обрамлён в тег, чтобы к нему не применялся отступ родителя. Всё полностью зависит от структуры вашей вёрстки, в данном случае удобнее будет как раз сделать через before-after, т.к. тогда не придется вносить правки в HTML-разметку. Если будет ситуация, когда не нужно будет работать с отступами и декорировать текст подобным образом, там можно вполне обойтись и обычным бордером. Всё от специфики задачи всегда зависит :)

[Сергей Васенин]

Юрий Есин: ок спасибо