html - 可折叠侧导航

Question

我创建了一个两列布局，左侧有一个sidenav，用于链接到其他页面，并使其具有响应性，以便所有内容都堆叠在小屏幕上。我的客户对小屏幕上的外观不满意，并希望侧导航折叠为小屏幕上的图标或切换按钮。

我根本没有使用框架，我希望创建与此 Bootstrap sidenav相同的效果。有没有办法在没有框架的情况下做到这一点？

Answer 1

这是您所追求的快速示例。大/中桌面分辨率的全宽导航栏和小分辨率的汉堡菜单。

$("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>