0

Нужно сделать так, чтобы при нажатии на кнопку открывалось меню (появление по width, как бы от 0 до 280Px)

<div class="container uk-margin-remove">

        <button type="button" class="menu-for-phone">Тыкни и вылезет менюшка</button>

        <div class="dropdown-left-menu">
            <ul>
                <li><a href="">Пункт 1</a></li>
                <li><a href="">Пункт 2</a></li>
                <li><a href="">Пункт 3</a></li>
                <li><a href="">Пункт 4</a></li>
                <li><a href="">Пункт 5</a></li>
                <li><a href="">Пункт 6</a></li>
                <li><a href="">Пункт 7</a></li>
                <li><a href="">Пункт 8</a></li>
                <li><a href="">Пункт 9</a></li>
                <li><a href="">Пункт 10</a></li>
            </ul>
        </div>

    </div>

Стили:

.dropdown-left-menu {
    /* top: 0; */
    left: 0;
    position: absolute;
    width: 280px;
    height: 100%;
    background: #F2F2F2;
}

.dropdown-left-menu ul {
    padding: 10px 0 0 30px;
    list-style: none;
}

Пытаюсь сделать с помощью встроенных функций jquery:

$(document).ready(function() {

$('.dropdown-left-menu').hide();

$('.menu-for-phone').on('click', function() {
    $('.dropdown-left-menu').toggle('slide');
});

});

Но здесь возникает проблема, что меню изменяется и по ширине и по высоте.

Есть ли какие-то методы для появления менюшки по ширине?

И необходимо еще реализовать, чтобы при нажатии на пространство вне меню, оно скрывалось также по ширине.

$(this).mouseup(function (e){ // событие клика по веб-документу
        var leftMenu = $(".dropdown-left-menu"); // тут указываем ID элемента
        if (!leftMenu.is(e.target) // если клик был не по нашему блоку
            && leftMenu.has(e.target).length === 0) { // и не по его дочерним элементам
            leftMenu.slideDown(400);
        }
    });

Делал так, но тоже не то, что нужно..

3
  • $('.dropdown-left-menu').css({ width: '0', opacity: '0' }); $('.menu-for-phone').on('click', function() { $('.dropdown-left-menu').animate({'width': '280px', 'opacity': '1'}, 1000); }); еще есть такой вариант с помощью animate, но тогда текст сначала съезжает, потом встает на месте.. 4 окт 2019 в 13:03
  • "Но здесь возникает проблема, что меню изменяется и по ширине и по высоте" - так вы же сами пишите .slideDown().
    – Gonzo
    4 окт 2019 в 13:13
  • @Gonzo да, я уже понял. Написал функцию animate, все работает, но текст съезжает при начале анимации 4 окт 2019 в 13:18

1 ответ 1

1

Можно сделать так.

$('.menu-for-phone').on('click', function() {
    $('.dropdown-left-menu').toggleClass('dropdown-left-menu_opened');
});
.dropdown-left-menu {
    /* top: 0; */
    left: 0;
    position: absolute;
    width: 0px;
    height: 100%;
    background: #F2F2F2;
    overflow: hidden;
    transition: width 1s ease;
}

.dropdown-left-menu ul {
    padding: 10px 0 0 30px;
    list-style: none;
    width: 280px;
}


.dropdown-left-menu_opened {
  width: 280px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container uk-margin-remove">

        <button type="button" class="menu-for-phone">Тыкни и вылезет менюшка</button>

        <div class="dropdown-left-menu">
            <ul>
                <li><a href="">Пункт 1</a></li>
                <li><a href="">Пункт 2</a></li>
                <li><a href="">Пункт 3</a></li>
                <li><a href="">Пункт 4</a></li>
                <li><a href="">Пункт 5</a></li>
                <li><a href="">Пункт 6</a></li>
                <li><a href="">Пункт 7</a></li>
                <li><a href="">Пункт 8</a></li>
                <li><a href="">Пункт 9</a></li>
                <li><a href="">Пункт 10</a></li>
            </ul>
        </div>

    </div>

13
  • Действительно, так работает. Но текст съезжает при начале анимации (если поставить transition 1s) 4 окт 2019 в 13:24
  • Хотя, думаю, такая slow анимация будет излишне. Спасибо за помощь! 4 окт 2019 в 13:27
  • На будущее просто хотелось бы знать, как реализовать такой момент с съезжанием текста 4 окт 2019 в 13:28
  • Ну я поставил там 1s, вроде не съезжает. Чтобы текст не дергался я специально задал фиксированную ширину внутренней части меню (самому списку). Так же можно для блоков с текстом для которых не допустим переход на другую строку при раскрытии ставит white-space: nowrap;
    – Gonzo
    4 окт 2019 в 13:30
  • Не совсем понятно что имеется ввиду под съезжающим текстом.
    – Gonzo
    4 окт 2019 в 13:30

Ваш ответ

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

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