Bootstrap 4 рушится вертикальное меню справа - PullRequest
0 голосов
/ 10 мая 2018

Я пытаюсь создать свертывающееся вертикальное меню справа, как на этом сайте: http://presentation.creative -tim.com /

Вы можете увидеть исходный код: view-source: http://presentation.creative -tim.com /

Это мое текущее состояние сайта:

enter image description here

Я хочу того же эффекта. Когда я нажимаю на третий значок (значок меню), я хочу создать меню справа, в котором есть элементы. В настоящее время он установлен в стандартном свернутом меню: enter image description here

Пока я хочу быть таким:

enter image description here

Как мне этого добиться, как называется этот эффект?

Это мой текущий код: https://jsfiddle.net/prozik/n12o3vhz/

Вот только навигационная панель:

        <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light navbar-burger">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">

            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.html">
                            <i class="material-icons md-36">shopping_cart</i>
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="prakse.html">
                            <i class="material-icons md-36">search</i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="kontakt.html">
                            <i class="material-icons md-36">menu</i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Я использую Bootstrap v4.1.0 & jQuery 3.3.1

1 Ответ

0 голосов
/ 10 мая 2018

Там у вас есть все, что вам нужно для этого: tympanus.net / codrops / 2013/04/17 / слайд-и-пуш-меню

Я надеюсь, что помог тебе,

Привет.

...