1

Я делаю выпадающее меню, вот оно

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {height: 100%;}
body {
    height: 100%;
    background-color: #909090;
}


.wrapper {
    position:  relative;
    height:  200px;
    width:  100%;
    padding:  30px;
    background-color:  rosybrown;
}

/* MAIN-MENU */

.menu {
    margin: 0;
    font-family: arial, sans-serif;
    white-space: nowrap;
    padding: 0;
    line-height: 0.9em;
}
.main-menu {
    position:  absolute;
    bottom:  0;
    right: 0;
    padding: 30px;
    text-align: center;
}
.menu-item {
    /* position: relative; */
    display: inline-block;
    text-transform: uppercase;
    cursor: pointer;
}
.main-menu .menu-item {
    margin-left: 30px;
}
.menu a {
    display:  block;
    position: relative;
    bottom: -2px;
    text-decoration: none;
    color: inherit;
    transition: color ease-in-out 0.4s;
}

.menu-item a:after {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -5px;
    content: '';
    display: block;
    height: 2px;
    border-radius: 2px;
    background-color: white;
    visibility: hidden;
    -webkit-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -o-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -moz-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
}

.menu-item a:hover::after {
    visibility: visible;
    -webkit-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -o-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -moz-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}

.dropdown:hover .dropdown-menu {
    max-height: 132px;
}
.dropdown-menu .menu-item {
    display: block;
    margin: 0;
    padding: 0 15px;
    padding-bottom: 15px;
    background-color:  gray;
}
.dropdown-menu .menu-item:first-child {
    padding-top: 15px;
}

/* проблемный кусок */

.dropdown-menu {
    position: absolute;
    left: -30px;
    top: 100%;
    z-index: 1000;
    /* MAX-HEIGHT должен быть ноль. сейчас стоит не ноль, чтобы выпадайка не пряталась */
    max-height: 102px;
    overflow: hidden;
    -webkit-transition: max-height ease-in-out .4s;
    -moz-transition: max-height ease-in-out .4s;
    -ms-transition: max-height ease-in-out .4s;
    -o-transition: max-height ease-in-out .4s;
    transition: max-height ease-in-out .4s;
}
<div class="wrapper">
    <nav class="main-menu">
        <ul class="menu">
            <li class="dropdown menu-item">
                <a href="#">dropdown</a>
                <ul class="menu dropdown-menu">
                    <li class="menu-item">
                        <a href="#">sub item</a>
                    </li>
                    <li class="menu-item">
                        <a href="#">sub item sub item </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">sub item sub item sub item...</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item"><a href="#">item</a></li>
            <li class="menu-item"><a href="#">item</a></li>
        </ul>
    </nav>
</div>

:

Подменю у меня шире, чем элемент, которые его открывает. Кроме того, находится в position: absolute, чтобы не попадать на отступ шапки. Он и его триггер должны быть выровнены по вертикали по центру (за неимением лучших дизайнерских идей). Я не нашёл ничего лучше, чем установить ему сдвиг в пикселях. (см. конец стайлшита). Но это, конечно же, не решение: поменяй текст - всё уедет. Как решить? Возможно, я не с того края вообще к решению подхожу? Нужен скрипт?

2
  • А еще было бы не плохо услышать, как ты хочешь, чтобы было...
    – Air
    23 янв 2018 в 10:34
  • 1
    Да, действительно, не дописал... Исправляю. 23 янв 2018 в 10:37

1 ответ 1

3

Способ с transform и calc

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {height: 100%;}
body {
    height: 100%;
    background-color: #909090;
}


.wrapper {
    position:  relative;
    height:  200px;
    width:  100%;
    padding:  30px;
    background-color:  rosybrown;
}

/* MAIN-MENU */

.menu {
    margin: 0;
    font-family: arial, sans-serif;
    white-space: nowrap;
    padding: 0;
    line-height: 0.9em;
}
.main-menu {
    position:  absolute;
    bottom:  0;
    right: 0;
    padding: 30px;
    text-align: center;
}
.menu-item {
    position: relative;
    /*Позиционировать относительно непосредственного родителя*/
    display: inline-block;
    text-transform: uppercase;
    cursor: pointer;
}
.main-menu .menu-item {
    margin-left: 30px;
}
.menu a {
    display:  block;
    position: relative;
    bottom: -2px;
    text-decoration: none;
    color: inherit;
    transition: color ease-in-out 0.4s;
}

.menu-item a:after {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -5px;
    content: '';
    display: block;
    height: 2px;
    border-radius: 2px;
    background-color: white;
    visibility: hidden;
    -webkit-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -o-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -moz-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
}

.menu-item a:hover::after {
    visibility: visible;
    -webkit-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -o-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -moz-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}

.dropdown:hover .dropdown-menu {
    max-height: 132px;
}
.dropdown-menu .menu-item {
    display: block;
    margin: 0;
    padding: 0 15px;
    padding-bottom: 15px;
    background-color:  gray;
}
.dropdown-menu .menu-item:first-child {
    padding-top: 15px;
}

/* (не)проблемный кусок */

.dropdown-menu {
    position: absolute;
    /*выравниваем левый край по центру родителя*/
    left: 50%;
    /*смещаем элемент влево на 50% ширины*/
    transform:translateX(-50%);
    /*Учитываем отступ шапки*/
    top: calc(100% + 30px);
    z-index: 1000;
    /* MAX-HEIGHT должен быть ноль. сейчас стоит не ноль, чтобы выпадайка не пряталась */
    max-height: 102px;
    overflow: hidden;
    -webkit-transition: max-height ease-in-out .4s;
    -moz-transition: max-height ease-in-out .4s;
    -ms-transition: max-height ease-in-out .4s;
    -o-transition: max-height ease-in-out .4s;
    transition: max-height ease-in-out .4s;
}
<div class="wrapper">
    <nav class="main-menu">
        <ul class="menu">
            <li class="dropdown menu-item">
                <a href="#">dropdown</a>
                <ul class="menu dropdown-menu">
                    <li class="menu-item">
                        <a href="#">sub item</a>
                    </li>
                    <li class="menu-item">
                        <a href="#">sub item sub item </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">sub item sub item sub item...</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item"><a href="#">item</a></li>
            <li class="menu-item"><a href="#">item</a></li>
        </ul>
    </nav>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.