没有引导程序的Bootstrap汉堡包菜单

Question

汉堡包菜单有没有现成的解决方案，类似于bootstrap菜单但没有bootstrap？或者如何切入引导菜单样式？

Answer 1

我碰巧有一个用jQuery编写的例子：

＆＃13;

＆＃13;

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

＆＃13;

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

#settings {
  cursor:pointer;
}

.open {
	right:0;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Bootstrap 汉堡包菜单

/* 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">
	<span class="bar"></span>
</button>

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