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


#1

На выполнение этого задания я потратил всего 1 проверку и получил 100% результат.:slight_smile: Начнем.
Первым делом зададим стили основному меню:

.main-menu {
   width: 200px;
   margin: 0;
   padding: 0;
   display: inline-block;
}

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

.main-menu li {
   display: block;
   background: #2980b9;
   border-bottom: 2px solid #2c3e50;
   position: relative;
   list-style: none;
}

:man_student: так и не понял, нужно ли задавать display: block; или нет, но работает и без него.

Далее убираем у ссылок подчеркивание и меняем цвет текста, выбираем режим отображения и задаем отступы.

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

Переходим к оформлению выпадающего блока меню. Задаем абсолютное позиционирование, чтобы мы могли разместить его где угодно, убираем маркеры, z-index чтобы меню было поверх основного и координаты и ширину.

.main-menu .sub-menu {
   position: absolute;
   z-index: 1;
   top: 0;
   left: 140px;
   width: 200px;
   display: none; - (только чтобы показать работу моего бонуса, а для решения не надо)
}

Элементам выпадающего меню изменим фон и цвет рамки:

.main-menu .sub-menu li {
   background: #1abc9c;
   border-bottom: 2px solid #2ecc71;
}

И наконец изменим фон активного элемента меню:

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

:checkered_flag: Готово! Задание выполнено на 100%. Мне кажется, что мой код можно улучшить и сделать короче, хотя-бы на 1 строку убрав свойство display: block; у элементов меню, но правильно ли мне кажется? :slight_smile:
P.S. Небольшой бонус от меня: для создания полноценного меню с выпадающим списком при наведении на пункт “Курсы” нужно последнюю строку заменить на:

.main-menu .opened:hover .sub-menu {
   display: block;
}

и дописать свойства:

.main-menu li:hover {
   background: #1abc9c;
}
.main-menu .sub-menu li:hover {
   background: #2ecc71;
}

Таким образом мы получим подсвечивание всех пунктов меню при наведении, а так-же выпадающее саб-меню при наведении на 2й пункт :slight_smile:
Спасибо за внимание!


#2

Здесь будут замечания. Не рекомендуется ограничивать ширину текстовых элементов. Может возникнуть неприятность в виде вывалившегося текста. List-style прописывается в целом списку меню. Display: block конечно лишнее, элемент li является блочным по умолчанию. Размеры пунктов меню (отступы) задаются ссылкам.
И еще вопрос, почему относительное позиционирование задается элементам списка, а не списку в целом?


#3

Изначально я задал List-style списку меню, но у саб-меню остались маркеры и я решил убрать их у элементов списка дабы повторно не писать это же свойство для саб меню. В предыдущей инструкции 20\28 я тоже не понял почему нужно отступы задавать ссылкам, а не элементам, если они работают одинаково. Но если задать их ссылкам, то им же дополнительно нужно присваивать display: block; Ширину задал главному меню и сабменю.
Про относительное позиционирование не могу ответить, я задал списку, но оно сработало от верхней границы, а когда элементам сработало от 2-го пункта :slight_smile: почему так, не знаю.


#4

Здесь могу согласиться, это разумно.
Отступы задаются ссылкам. Об этом не раз уже говорили. Таким образом мы увеличиваем зону клика по ссылке.
Вопрос об относительном позиционировании достаточно простой. Вы сможете разобраться сами.
Раз пишете инструкции, значит должны знать, что и почему именно так.


#5

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


#6

У меня такой код получился:

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

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

.main-menu > li {
position: relative;
}

.main-menu .sub-menu {
position: absolute;
display: block;
left: 180px;
list-style: none;
background: #1abc9c;
z-index: 10;
top: 0;
padding: 0;
width: 200px;
}

.opened {
background: #1abc9c;
}

.sub-menu a {
border-bottom: 2px solid #2ecc71;
}


#7

Я сделал так:

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

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

.main-menu {
width: 200px;
list-style: none;
padding: 0;
margin: 0;
}

.main-menu > li {
position: relative;
background: #2980b9;
}

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

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

.main-menu .sub-menu {
display: block;
position: absolute;
top: 0;
z-index: 1;
left: 180px;
width: 200px;
margin: 0;
padding: 0;
list-style: none;
background: #1abc9c;
}

.main-menu .sub-menu a {
border-bottom: 2px solid #2ecc71;
}

W15 не понимаю зачем используете здесь:

функцию:

display: inline-block;

объясните пожалуйста там и без нее все получается.
и если можно оцените мой ваирант. Спасибо.


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

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

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

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

.main-menu > li {
    position: relative;
}

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

.main-menu .sub-menu a {
    border-bottom: 2px solid #2ecc71;
}

.main-menu .sub-menu {
    position: absolute;
    width: 200px;
    background-color: #1abc9c;
    top: 0;
    left: 180px;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 10;
}

Проверьте мой код правильно ли всё?


#9

Почему не группируете общие правила у списков?


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

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

.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 200px;
}

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

.main-menu > li {
    border-bottom: 2px solid #2c3e50;
}

.main-menu .opened {
    position: relative;
}

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

.main-menu .opened .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    position:absolute;
    top: 0;
    left: 180px;
    width: 200px;
}

.main-menu .sub-menu a {
    border-bottom: 2px solid #2ecc71;
}

#11

100 %…но мне кажется что-то не так…слишком примитивно что ли? нет?

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

.main-menu li {
border-bottom: 2px solid #2c3e50;
display: block;
position: relative;

}

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

.main-menu .sub-menu {
list-style: none;
background-color: #1abc9c;
z-index: 10;
}

.main-menu .sub-menu li {
border-bottom: 2px solid #2ecc71;
background-color: #1abc9c;
}

.main-menu .opened .sub-menu {
list-style: none;
margin: 0;
padding: 0;
position:absolute;
top: 0;
left: 180px;
width: 200px;
}

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