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

Question

[Владислав Довгань]

Напишите пожалуйста правильный код верстки меню, которое на картинке )

Answer 1

[Евгений]

.menu li { 
	background: #1881C6;
	display: inline;
}
.menu a { 
	display: block;
	padding: 2%;
	position: relative;
}

.menu a:after { 
	background: #FFFFFF;
	content: " ";
	display: block;
	height: 10px;
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translate(0, -50%);
	width: 1px;
}
.menu li:last-child a:after {
display:none;
}

Comments

[Владислав Довгань]

Вы не могли бы мне подсказать как можно сделать выпадающее меню ?

Answer 2

[Кирилл]

Эм...вы бы хоть показали как у вас получилось, чтоб дать совет. А так делать за вас смысла нет. Пробуйте, скидывайте и получите совет.

Comments

[Владислав Довгань]

Так я уже пробовал, просто я с помощью бутстрапа и я не знаю как сделать вот эти вертикальные маленькие линии (

[Виталий Инчин ☢]

Владислав Довгань: это бордер, либо псевдоэлемент.

[Кирилл]

псевдокласс :before

например так -

.element-menu-li-a:before{
             content: "url(...)";
}

[Владислав Довгань]

Кирилл: а что нужно вписывать в content: "url(...)" ?

[Кирилл]

Виталий Инчин: Помоему бордером будет значительно сложнее, чем через псевдо

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

Владислав Довгань: нифига себе хотелки, сделайте-ка мне меню ровненько...

[Кирилл]

Владислав Довгань: Это как вариант. Можете вырезать вертикальный разделитель. Или вместо url вставить просто "|". Исключительно на ваше усмотрение. Почитайте про псевдоэлементы.

[Владислав Довгань]

Евгений Перин: чёто не устраивает не читай, я тебя не заставляю, я просто попросил помощи у людей.

[Владислав Довгань]

Кирилл: а какими параметрами сделать выравнивание иконок к пунктам меню ?

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

Владислав Довгань: "Напишите пожалуйста правильный код верстки меню" это не просьба о помощи, это просьба поработать за тебя. А просьба о помощи это когда ты говоришь как ты пытаешься делать и что именно не получается.

[Кирилл]

Владислав Довгань: Смотря как вы их организовали. Говорю же, скидывайте как у вас получилось, там в коде и понятно будет что подправить и как лучше сделать.

[Владислав Довгань]

Кирилл: Я ссылку на сайт сброшу, где я сделал это меню, ок ?
А Вы уже там по коду посмотрите.

[Владислав Довгань]

Евгений Перин: Это не так, я свой код пару раз переписывал и у меня ничего не получалось, может я изначально все не правильно сделал, вот и попросил у тех, кому не тяжело помочь !

[Кирилл]

Владислав Довгань: кидайте

[Владислав Довгань]

Кирилл: www.ucbc.org.ua/home.html

[Кирилл]

Владислав Довгань: попробуйте выравнять иконки через margin-top с отрицательным значение. Но вероятнее всего при адаптиве это скажется.

[Владислав Довгань]

Кирилл: Я пробовал, реакции 0.

[Кирилл]

Владислав Довгань: И, кстати, в меню ссылку лучше на весь блок растянуть, а не только на текст, а то не особо удобно тыкать.

[Aleksandr]

Владислав Довгань: я бы li через float сделал. А черточки сделайте псевдоэлементом.

[Кирилл]

Владислав Довгань: Ну как не получается? Вот же - prntscr.com/8f2i6a

[Aleksandr]

Владислав Довгань: https://jsfiddle.net/Ls0wchr4/ тип такого

[Владислав Довгань]

Кирилл: А как сделать ссылку на весь блок ?

[Владислав Довгань]

Кирилл: Да-да, получилось, это я не там применял просто )))

[Кирилл]

Владислав Довгань: растение a на весь li. То есть, добавьте размеры блоку с ссылкой.

[Владислав Довгань]

Кирилл: А как сделать выпадающее меню ?

[Кирилл]

Владислав Довгань: hover или через js. Почитайте, там достаточно просто, тем более куча инфы есть по этому поводу. Потратьте 30 минут на чтение и все получится.

[Владислав Довгань]

Кирилл: А можно поподробней как сделать ссылку на весь блок ?