Складной сиденав

Question

Я создал макет из двух колонок с sidenav слева для ссылок на другие страницы и сделал его отзывчивым, чтобы все складывалось на маленьких экранах. Мой клиент не доволен видом на маленьких экранах и хочет, чтобы боковая навигация свернулась в значок или кнопку переключения на маленьких экранах.

Я вообще не использую фреймворк и надеюсь создать тот же эффект, что и у этого Bootstrap sidenav. Есть ли способ сделать это без рамки?

Answer 1

Вот быстрый пример того, что вы ищете. Полноразмерная Navbar в большом / среднем разрешении рабочего стола и меню Hamburger в небольшом разрешении.

$("nav").click(function() {
  $(this).toggleClass("active");
});

* {
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
}

.wrapper {
  max-width: 960px;
  margin: 0 auto;
  color: #ecf0f1;
  height: 100%;
}

.wrapper h1 {
  padding: 20px;
  text-align: center;
}

nav {
  background: #3498db;
}


/* Flex Nav Bar */

.flex-nav {
  display: flex;
  list-style-type: none;
}

.flex-nav li {
  flex: 1;
  text-align: center;
  color: inherit;
  transition: all 0.2s ease;
}

.flex-nav li:not(:first-child) {
  border-left: 2px solid #ecf0f1;
}

.flex-nav li:hover {
  background: #2980b9;
  flex: 1.1;
}

.flex-nav li a {
  display: block;
  padding: 20px 0;
  color: inherit;
  text-decoration: none;
}


/* Hamburger Icon */

nav .hamburger {
  height: 36px;
  width: 36px;
  margin: 5px;
  display: none;
  border: 3px solid #ecf0f1;
  border-radius: 5px;
}

nav .hamburger i,
nav .hamburger i:before,
nav .hamburger i:after {
  cursor: pointer;
  content: '';
  width: 25px;
  height: 4px;
  background: #ecf0f1;
  border-radius: 4px;
  transition: transform 0.2s ease;
}

nav .hamburger i {
  display: block;
  position: relative;
  top: 16px;
  left: 6px;
}

nav .hamburger i:before {
  position: absolute;
  top: -8px;
}

nav .hamburger i:after {
  position: absolute;
  top: 8px;
}

nav.active .hamburger {
  border-radius: 50%;
}

nav.active .hamburger i {
  background: transparent;
}

nav.active .hamburger i:before {
  top: 0;
  transform: rotate(45deg);
}

nav.active .hamburger i:after {
  top: 0;
  transform: rotate(-45deg);
}

@media screen and (max-width: 600px) {
  .flex-nav {
    flex-direction: column;
  }
  .flex-nav li {
    display: none;
    height: 0;
    transition: height 1s ease;
    color: transparent;
  }
  .flex-nav>li:not(:first-child) {
    border-left: none;
  }
  nav .hamburger {
    display: inline-block;
  }
  nav.active .flex-nav li {
    display: block;
    height: initial;
    color: inherit;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
  <nav>
    <div class="hamburger"><i></i></div>
    <ul class="flex-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Plans</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>
  </nav>
</div>