Bootstrap navbar + efekt dla navbar-toggler

pytanie zadane 20 października 2019 w Rozwój zawodowy, nauka, praca przez rice Początkujący (440 p.)

Witam

Mógłby mi ktoś wytłumaczyć jak dla standardowego menu w BS:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Document</title>

    <link rel="stylesheet" href="./bootstrap-4.3.1-dist/css/bootstrap.min.css">
</head>

<body>

    <head id="paper-back">
        <nav class="navbar bg-primary navbar-dark navbar-expand-md">
            <a href="#" class="navbar-brand">
                <img src=project-management%20(1)%2064x64.png width="40px" height="40px" class="mr-1 d-inline-block align-bottom" alt="">
                Projekt X
            </a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MojeMenu" aria-controls="MojeMenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="MojeMenu">
                asda
            </div>
        </nav>
    </head>




    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="./bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
</body>

</html>

Dodać taki efekt jak tutaj.

O ile do całego headera mogę dodać id paper-back. Tak znów nie wiem jak poradzić sobie z drugą częścią kodu, a mianowicie przenieść do niej navbar-toggler aby wszystko działało.

Za pomoc bardzo serdecznie z góry dziękuję.
Pozdrawiam - P

1 odpowiedź

odpowiedź 20 października 2019 przez DawidK Nałogowiec (37,910 p.)

Nie jest to może do końca to o co Ci chodziło, ale realizuje efekt tzn - odsłaniane menu:

index.html

Do kontenera o id container-back możesz wrzucić menu, ikonki hamburgera i close są zastąpione png a nie zrobione w css, jak zrobić ikonki w css znajdziesz np w linku który przeslałeś. Do ikonek dodane sa funkcje js odsłaniające i zasłaniające diva poniżej.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Pochyłe menu</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
    <div id='front-container' class='container container-front'>
        <img class='hamburger' src='hamburger-icon.png' alt='hamburger' onclick='rotateGo();'/>
    </div>
    <div class='container container-back'>
        <img class='ikon' src='close-icon.png' alt='hamburger' onclick='rotateBack();'/>
    </div>

    <script type='text/javascript' src='main.js'></script>
</body>
</html>

main.css

stylowanie kontenerów i animacje:

a) rotate-go : odsłania diva przesuwając się o 10stopni i według x center i y 200% po animacji zachowane jest ustawienie ostatniej klatki (animation-fill-mode: forwards;),

b) rotate-back : przysłania diva ma ustawienia ostatniej klatki rotate-go jako początkowe i ma powrócić do pozycji 0deg według x center i y 200%

* {
    margin: 0;
    padding: 0;
}

.container {
    height: 100vh;
    width: 100%;
    left: 0;
    position: fixed;
	top: 0;
}

.container-front {
    background-color: #FAEBD7;
}

.container-back {
    background-color: #ADFF2F;
    z-index: -1;
}

.ikon {
    left: 20px;
    cursor: pointer;
    position: fixed;
    top: 20px;
}

.rotate-go {
    animation: rotate-go 2s linear;
    animation-fill-mode: forwards;
}

@keyframes rotate-go {
    100% {
        transform: rotate(10deg);
        transform-origin: center 200%;
    }
}

.rotate-back {
    animation: rotate-back 2s linear;
    animation-fill-mode: forwards;
    transform: rotate(10deg);
    transform-origin: center 200%;
}

@keyframes rotate-back {
    100% {
        transform: rotate(0deg);
        transform-origin: center 200%;
    }
}

main.js

Funkcje uruchamiające animacje za pomocą dodawania i usuwania klas

const frontContainer = document.querySelector('#front-container');

function rotateGo() {
    if(frontContainer.classList.contains('rotate-back')){
        frontContainer.classList.remove('rotate-back');
    }
    frontContainer.classList.add('rotate-go');
}

function rotateBack() {
    if(frontContainer.classList.contains('rotate-go')){
        frontContainer.classList.remove('rotate-go');
    }
    frontContainer.classList.add('rotate-back');
}

linki do ikonek:

https://www.iconfinder.com/icons/134216/hamburger_lines_menu_icon (hamburger) ,

https://www.iconfinder.com/search/?q=close&from=navbar (close)

komentarz 21 października 2019 przez rice Początkujący (440 p.)

Jeśli można wiedzieć, to Twoje rozwiązanie jest zgodne z bootstrapem czy nie ? Bo nie wiem czy nastawiać się na menu zrobione w takim stylu przy pomocy BS czy jednak będę musiał sam to pisać (tzw sam robić RWD dla navbaru)..

komentarz 21 października 2019 przez DawidK Nałogowiec (37,910 p.)

Można korzystać z innych klas bootstrapa, nadpisywać je itd - link do zasobów z własnymi klasami lub musi być pod tym z klasami bootstrapa.

Nie wiem do końca co rozumiesz pod pojęciem RWD dla navbaru tzn jak miałoby to wyglądać? Wszystkie linki w navbar i po zmniejszeniu hamburger? Trochę byłoby to dziwne (subiektywna opinia) w przypadku większych ekranów miałbyś wtedy 2 menu - to odsłonięte i drugie (nie widoczne w całości) zawarte w tym divie , które się przesuwa na bok.