Пройдено на 100%. Мастерская: создаём меню / Испытание: многоуровневое меню [15/28]

Bonauze · 25.Октябрь.2015 13:19:42

Доброго времени суток всем.

Хотел бы получить обратную связь от опытных разработчиков, по логике и качеству кода.

Заранее благодарен всем.

Nurzadakhan · 19.Июль.2017 12:43:26

выводит 94%

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

.main-menu > li {

border-bottom:3px solid #2c3e50;
margin-bottom: -1px;

}

.main-menu a {
display: block;
padding: 10px 14px;
text-decoration: none;
color: #0088cc;

}

.main-menu a:hover {
background: #f5f5f5;
}

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

.main-menu ul {
margin: 0;
padding: 10px 0;

list-style: none;

}

.main-menu li li a {
padding: 5px 0;
padding-left: 35px;
text-decoration: underline;
position:relative;
right:20px;
color: #2980b9;
}
.main-menu li ul{
background:#ffffff;
border-top:2px solid #2c3e50;}

.main-menu li li a:hover {
text-decoration: underline;
background: none;
}
.main-menu> li >a{
color:#ffffff;
background:#2980b9;}

Alexey_Ivanov · 19.Июль.2017 17:38:06

Выводит 94%, потому что Вы не учли условий задания:

Все отступы кратны “5”. А у Вас уже в .main-menu a {padding: 10px **14**px;} - это во-первых;
Толщина рамок у пунктов меню - 2px (у Вас в .main-menu > li {border-bottom: **3**px solid …;}) - это во-вторых;
И после этих преобразований абсолютно бессмысленен отступ “минус 1px” в том же .main-menu > li. Это в-третьих
Вот Ваши потерянные 6%.

Eduard_Pruglo · 24.Сентябрь.2017 11:08:42

Вывело 100%, но не исключено, что есть ошибки.

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

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

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

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

.main-menu > .active > ul {
padding: 10px 0px;
}

.main-menu ul {
margin: 0;
padding: 0;
list-style: none;
}

.main-menu li li a {
padding: 5px 0;
padding-left: 15px;
background: white;
color: #2980b9;
text-decoration: underline;
}

.main-menu li ul {
background:#ffffff;
border-top:2px solid #2c3e50;
}

denisdovgalyuk · 03.Апрель.2018 06:45:42

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

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

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

.main-menu .active > a {
background-color: #1abc9c;
text-decoration: none;
display: block;
padding: 10px 15px;
color: #fff;
border-bottom: 2px solid #2c3e50 ;
}

.active ul {
background-color: #fff;
padding: 10px 15px;
border-bottom: 2px solid #2c3e50 ;
}

.active ul li {
list-style: none;
padding: 5px 0;
}

.active ul li a {
text-decoration: underline;
color: #2980b9;
}

.main-menu > li > a {
text-decoration: none;
background-color: #2980b9;
color: #fff;
display: block;
border-bottom: 2px solid #2c3e50;
padding: 10px 15px;
}

100%

lexbrd · 30.Апрель.2018 16:19:45

Разве не надо делать появление подменю, при наведении мышью на верхний пункт?

Valery_S · 30.Апрель.2018 16:32:02

Нет, в этом испытании не нужно!

Но, могу предложить один из вариантов…

Меню с выпадающим подменю

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

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

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

.main-menu a {
    display: block;
}

.main-menu > li > a {
    padding: 10px 15px;
    text-decoration: none;
    color: #fff;
    background: #2980b9;
    border-bottom: 2px solid #2c3e50;
}

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

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

.main-menu ul {
    display: none;
    margin: 0;
    padding:10px 0;
    list-style: none;
    background: #fff;
    border-bottom: 2px solid #2c3e50;
}

.main-menu .active:hover ul {
    display: block;
}

.main-menu ul a {
    color: #2980b9;
    padding: 5px 0 5px 15px;     
}

.main-menu ul a:hover {
    text-decoration: none;
}

volkoff5566 · 17.Май.2018 22:35:08

91%. Дайте несколько советов. В чем основные ошибки?

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

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

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

.active a {
background: #ffffff;
border: none;
color: #2980b9;
}

.active li {
list-style: none;
text-decoration: underline;
}

.active > a {
background: #1abc9c;
border-bottom: 2px solid #2c3e50;
color: #ffffff;
}

.main-menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 1.2;
border-bottom: 2px solid #2c3e50;
}

Skaizy · 08.Май.2019 14:25:31

кто мне может подсказать, есть 2 проблемы в коде.

не закрашивает 1-й пункт меню
не могу загнать “серый” задний фон в рамку.
Почему так, не могу понять(
вот код:

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

body {
width: 400px;
height: 300px;
padding: 0px;
margin:0;
font-size: 14px;
line-height: 1.4;
font-family: “Arial”, sans-serif;
border: 1px solid black;
background: #ecf0f1;
}

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

.main-menu ul {
list-style: none;
margin: 0;
padding: 0;
}

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

.main-menu li li a {
padding: 5px 0;
padding-left: 15px;
background: white;
color: #2980b9;
text-decoration: underline;
}

.main-menu .active ul{
border-top: 2px solid black;

.main-menu .active a {
text-decoration: underline;
background-color: #ffffff;
color: #2980b9;
list-style: none;
border: none;

}

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

Skaizy · 14.Май.2019 07:08:31

В итоге у меня вышло на все 100%
долго не мог выровнять внутреннее меню
вот мой результат:

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

}

.active li{
list-style-type: none;

}

.main-menu{

margin: 0;
padding: 0;
width: 200px;

}

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

border-bottom: 2px solid #2c3e50;
}

.main-menu a{
display: block;
padding: 10px;
padding-left: 15px;
color: white;
text-decoration: none;
list-style: none;

}
.main-menu > .active > ul {
padding: 10px 0px;
background: white;
}

.main-menu .active > a{
background: #1abc9c;
padding: 10px 15px;
border-bottom: 2px solid #2c3e50;
}

.main-menu li li a{
padding: 5px 0px;
padding-left: 15px;
display: block;
background: white;
color: #2980b9;
text-decoration: underline;

}

Mikenama · 02.Октябрь.2020 10:44:55

100%, короче варианта не нашел!

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

body {
width: 280px;
min-height: 280px;
padding: 10px;
font-size: 14px;
line-height: 1.4;
font-family: “Arial”, sans-serif;
background-color:#ecf0f1;
}
.main-menu {
width: 200px;
padding: 0;
margin: 0;
}

.main-menu ul {
background-color: white;
padding: 10px 0 10px 0;
border-bottom: 2px solid #2c3e50;
}

.main-menu > li > a {
background-color: #2980b9;
border-bottom: 2px solid #2c3e50;
padding: 10px 15px;
}

.main-menu a {
color: white;
display: block;
text-decoration: none;
padding: 5px 15px 5px;
}

.main-menu .active li a {
border: none;
list-style: none;
text-decoration: underline;
color: #2980b9;
}

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

Pavel_Kruglik · 19.Декабрь.2020 14:15:51

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

body {
width: 280px;
min-height: 280px;
padding: 10px;

font-size: 14px;
line-height: 1.4;
font-family: “Arial”, sans-serif;

background-color: #ecf0f1;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 200px
}

.main-menu > li > a {
display: block;
color: white;
text-decoration: none;
background: #2980b9;
padding: 10px 0 10px 15px;
border-bottom: 2px solid #2c3e50;
}

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

.active > ul {
background: #ffffff;
padding: 10px 0;
border-bottom: 2px solid #2c3e50;
}

.active li a {
display: block;
color: #2980b9;
padding: 5px 0 5px 15px
}