Реально ли сверстать такое меню?

Нужно сверстать такое меню.
5d513c26c0ba4911756355.png
Суть в том что нужно учесть следующее:
1. Количество пунктов меню не фиксированное
2. Все пункты меню должны быть одной ширины
3. Пункты меню должны занимать всю ширину родителя (т.е. если их 5 то ширина 1/5 и т.д)
4. Отступ в выпадающем меню слева, должен быть равен отступу слева у основного пункта (см. скрин)

Вопрос реально ли сделать такое? Если да, то как (можно в двух словах).
  • Вопрос задан
  • 240 просмотров
Решения вопроса 1
Все пункты меню должны быть одной ширины

Отступ в выпадающем меню слева, должен быть равен отступу слева у основного пункта (см. скрин)

С этим сложности, так как один пункт немного противоречит другому.
Если ширина у всех одинаковая, значит отступы разные.
И чтобы сделать у выпадающего списка отступы как у главного меню, нужно наверное через JS высчитывать.
А в остальном, как-то так получается.

https://codepen.io/hisbvdis/pen/GVPxap
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Lord_Dantes
@Lord_Dantes Куратор тега CSS
Чат джунов t.me/developersjunior
Родителю задаете нужную ширину + display: flex; align-items: center; justify-content: center; , пунктам меню задаете 100 процентную ширину. На первый выпадающий делаете абсолютом у первого пункта и ему просто задаете фикс ширину и padding ну и все что.
Ответ написан
DcFanoiD
@DcFanoiD
Full Stack : web
https://codepen.io/dcfanoid/pen/pMQZxp
<ul class="menu">
    <li class="menu__item"><a href="/">Item 1</a></li>
    <li class="menu__item"><a href="/">Item 2</a></li>
    <li class="menu__item"><a href="/">Item 3</a></li>
    <li class="menu__item"><a href="/">Item 4</a></li>
    <li class="menu__item"><a href="/">Item 5</a></li>
</ul>


.menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 50px;
    background-color: rgb(194, 194, 194);
    text-align: center;
}

.menu__item {
    flex: 1;
    margin: 0
}

.menu__item a {
    line-height: 50px;
    display: block;
    transition: background-color .2s ease
}

.menu__item a:hover {
    background-color: rgba(0, 0, 0, .1)
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы