Bootstrap-Hamburger-Menü ohne Bootstrap

Question

Gibt es eine fertige Lösung für Hamburger-Menü ähnlich Bootstrap-Menü, aber ohne Bootstrap? Oder wie man einen Bootstrap-Menü-Stil einschneidet?

Answer 1

ich zufällig schon ein Beispiel in jQuery geschrieben haben:

$("#settings").click(function() { 
 
\t $(".panel").stop(true,true).toggleClass("open",500); 
 
});

.panel { 
 
\t right:-200px; 
 
\t position:fixed; 
 
\t width:200px; 
 
\t height:100%; 
 
\t position:fixed; 
 
\t background:orange; 
 
} 
 

 
#settings { 
 
    cursor:pointer; 
 
} 
 

 
.open { 
 
\t right:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"> 
 

 
<div class="panel"></div> 
 

 
<i class="fa fa-bars" id="settings"></i>

Answer 2

Bootstrap Hamburger Menü

/* A simple and scalable hamburger menu using css transitions. */ 
 
var isActive = false; 
 

 
$('.js-menu').on('click', function() { 
 
    if (isActive) { 
 
    $(this).removeClass('active'); 
 
    $('body').removeClass('menu-open'); 
 
    } else { 
 
    $(this).addClass('active'); 
 
    $('body').addClass('menu-open'); 
 
    } 
 

 
    isActive = !isActive; 
 
});

html { 
 
    font-size: 10px; 
 
} 
 

 
.menu { 
 
    -webkit-transition: 0.1s -webkit-transform linear; 
 
    transition: 0.1s -webkit-transform linear; 
 
    transition: 0.1s transform linear; 
 
    transition: 0.1s transform linear, 0.1s -webkit-transform linear; 
 
    position: relative; 
 
    background: 0; 
 
    float: left; 
 
    margin: 2rem; 
 
    height: 2.7rem; 
 
    width: 3.5rem; 
 
    z-index: 1; 
 
    outline: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 

 
.bar, 
 
.bar::before, 
 
.bar::after { 
 
    -webkit-transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s -webkit-transform linear; 
 
    transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s -webkit-transform linear; 
 
    transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s transform linear; 
 
    transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s transform linear, 0.2s -webkit-transform linear; 
 
    position: absolute; 
 
    background: #000; 
 
    margin: auto; 
 
    width: 100%; 
 
    height: 0.3rem; 
 
    content: ''; 
 
    top: 50%; 
 
    left: 0; 
 
} 
 

 
.bar { 
 
    margin-top: -0.2rem; 
 
} 
 

 
.bar::before { 
 
    top: -1.2rem; 
 
} 
 

 
.bar::after { 
 
    top: 1.2rem; 
 
} 
 

 
.bar::before, 
 
.bar::after { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
} 
 

 
.active .bar { 
 
    background: 0; 
 
} 
 

 
.active .bar::before { 
 
    -webkit-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 
.active .bar::after { 
 
    -webkit-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
} 
 

 
.active .bar::before, 
 
.active .bar::after { 
 
    top: 0; 
 
} 
 

 
.active .bar, 
 
.active .bar::before, 
 
.active .bar::after { 
 
    -webkit-transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s -webkit-transform linear 0.2s; 
 
    transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s -webkit-transform linear 0.2s; 
 
    transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s transform linear 0.2s; 
 
    transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s transform linear 0.2s, 0.2s -webkit-transform linear 0.2s; 
 
} 
 

 
nav { 
 
    width: 250px; 
 
    height: 100%; 
 
    background: #eaeaea; 
 
    position: fixed; 
 
    -webkit-transform: translateX(-250px); 
 
    transform: translateX(-250px); 
 
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91); 
 
    transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91); 
 
    transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91); 
 
    transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91), -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91); 
 
    padding-top: 6.2rem; 
 
} 
 

 
.menu-open nav { 
 
    -webkit-transform: translateX(0); 
 
    transform: translateX(0); 
 
} 
 

 
nav ul { 
 
    margin: 0; 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
nav ul li { 
 
    padding: 20px 5px; 
 
    font-size: 2rem; 
 
} 
 

 
nav ul li:hover { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="js-menu menu" type="button"> 
 
\t <span class="bar"></span> 
 
</button> 
 

 
<nav> 
 
    <ul> 
 
    <li>Link</li> 
 
    <li>Link</li> 
 
    <li>Link</li> 
 
    <li>Link</li> 
 
    </ul> 
 
</nav>