Испытание: горизонтальное меню [20/28]. Мое решение на 100% и подробная инструкция.

Курсы §13. Мастерская: создаём меню
1

Задание заставило меня немного задуматься, а стоит ли вообще в реальных проектах создавать меню с помощью списков, в следствии чего прописывать им разные свойства display, мучатся с отрицательными маргинами? Я посмотрел код многих сайтов и далеко не все строят меню через списки. Многие создают контейнер div просто напихивают туда ссылки через тег а, дают им display: block и позиционируют как угодно.

Это было небольшое отступление, а теперь перейдем к решению задачи. HTML-код у нас готов, нам остается только оформить меню.
Первым делом обнулим все отступы у нашего списка, уберем маркеры списка и зададим фон.

.main-menu {
   margin: 0;
   padding: 0;
   list-style: none;
   background: #2980b9; 
}

:point_up_2: Если фон задать не самому списку, а его элементам либо ссылкам, то в конце вы столкнетесь с проблемой, что последний пункт меню не будет растянут по всей ширине, а будет с учетом содержимого и отступов.

Дальше зададим режим отображения пунктов меню:

.main-menu li {
   display: inline-block;   
}

Теперь перейдем к оформлению ссылок: задаем режим отображения как display: block; чтобы наши ссылки смогли реагировать на горизонтальные отступы. Далее задаем эти отступы, убираем пробелы с помощью отрицательного марджина, задаем цвет, рамку и убираем подчеркивание ссылок.

.main-menu a {
   display: block;
   padding: 10px 15px;
   margin-right: -5px;
   color: #ffffff;
   border-left: 2px solid #2c3e50;
   text-decoration: none;
}

:point_up_2: Я не увидел разницы между тем, кому задавать отрицательный отступ и рамку слева, эти свойства одинаково работают как для элементов списка li, так и для ссылок a.

Теперь покрасим наш активный пункт меню:

.main-menu .active a {
  background: #1abc9c;
}

:checkered_flag: Готово! Задание выполнено на 100%. Будут рад, услышать комментарии по поводу кода и по поводу моих мыслей. Спасибо за внимание.

19 лайков
2

Исходя из того, что видела я, могу сказать, что вкладывать ссылки в div - это старый прием. Теперь используют семантический подход. А значит будет или nav>a*5, или nav>ul>li*5>a, например.
Оба варианта подходят.
По коду испытания вопросов не имею.

3

Спасибо за комментарий. Т.е. нет разницы кому задавать отрицательный отступ и рамку слева, эти свойства одинаково работают как для элементов списка li, так и для ссылок a?

4

Отрицательный отступ убирает пробелы у блочно-строчных элементов. Значит по логике его надо писать для li. А рамку не важно, я думаю.

1 лайк
5

А нужно ли указывать значение “none” для list-style в списке, если после указания на блочно-строчный тип отображения пунктов меню, маркеры сами исчезают? И почему они исчезают, так всегда происходит? Можно ли их вернуть как-нибудь при необходимости?

6

Они никуда не исчезают, просто не видны. Возможно из-за отрицательного отступа.

7

а на flex-ax?

8

100% код

html, body {
margin: 0;
padding: 0;
}

body {
width: 430px;
min-height: 280px;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}

.main-menu {
margin: 0;
padding: 0;
list-style: none;
background: #2980B9;
}

.main-menu li {
margin-right: -4px;
display: inline-block;
border-left: 2px solid #2C3E50;
}

.main-menu a {
display: block;
padding: 10px 14px 10px 15px;
color: white;
text-decoration: none;
text-align: center;
}

.main-menu .active a {
background: #1ABC9C;
}

10

по заданию “все размеры и отступы кратны 5.” а у Вас не кратны. смотрите решение выше, оно наиболее корректно.

11

я бы на Вашем месте (исключительно из красоты и корректности кода) использовал в последнем блоке: .main-menu > .active > a Как по мне, так будет более корректно.

12

Почему?

13

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

14

Что конкретно вы имеете в виду?

15

Если у данного меню будет подменю, то к нему также будут применены все описанные стили.

16

“Теперь перейдем к оформлению ссылок: задаем режим отображения как display: block; чтобы наши ссылки смогли реагировать на горизонтальные отступы.” Если я не ошибаюсь, вроде строчные элементы и так на горизонтальные отступы реагируют.

17

спасибо, Андрей :slightly_smiling_face:

18

Мой код немного отличается, насколько он актуальный на реальных сайтах?
html,
body {
margin: 0;
padding: 0;
}

body {
width: 430px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}

.main-menu {
margin: 0;
padding: 0;
list-style: none;
background-color: #2980b9;
margin-left: 5px;
}

.main-menu li {
display: inline-block;
white-space: nowrap;
background-color: #2980b9;
border-left: 2px solid #2c3e50;
margin-left: -5px;
}

.main-menu a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 10px 15px;
}

.main-menu > .active > a {
background-color: #1abc9c;
}

19

Привет, а у меня вот такой код, и пара вопросов.
При наведении на последний пункт меню вот так, это нормально?

Безымянныйжжжж
Безымянныйжжжж.png819×460 3.55 KB 

.main-menu {
 width: 410px;
  background-color: #2980b9;
  margin: 0px;    
}
.main-menu li{
display:inline-block;
 list-style: none;
 border-left: 2px solid #2c3e50;
 padding: 10px 15px;
 margin-right: -5px;

}
 .main-menu li:first-child {
margin-left: -40px; 
}
 .main-menu a{
 color:#ffffff;
 text-decoration: none;

}
.main-menu li:hover{
  background-color:  #1abc9c; 
}

Я не знаю, почему при изменении .main-menu li:hover на .main-menu a:hover окрашиdается не вся ячейка, а только фон у букв.

А при использовании класса active получается вот такая картина

;Безымянный
;Безымянный.png819×460 3.27 KB

20

Это что-то совсем лишнее.
Фон у букв окрашивается при наведении, потому что это и есть размер ссылки, ведь внутренние отступы вы написали для li, а не для ссылок.

21

Переделала. Задала отступы не li, а ссылкам
вот что получилось:
участники

Без margin-left: -40px:

Безымянный0
Безымянный0.png819×460 3.24 KB