需要 Bootstrap 左侧导航示例 [英] Bootstrap left side navigation example needed

问题描述

寻找一些干净简单的示例来设置响应式左侧导航，几乎与 Foundation 在其版本中使用的完全一样.4 文档页面位于 http://foundation.zurb.com/docs/v/4.3.2/index.html 需要能够链接到页面，如果下面有分组的子页面，还需要扩展.有什么好的 Bootstrap 示例可以做到这一点?

Looking for some clean and simple examples to set up a responsive left side navigation, almost exactly like Foundation uses for their ver. 4 docs page at http://foundation.zurb.com/docs/v/4.3.2/index.html Needs to be able to link to pages and and also expand if there are sub pages grouped below it. Any good Bootstrap examples that do this?

推荐答案

看看这个例子.这是一个带有可折叠子菜单的左侧画布菜单..

Take a look at this example. It's a left side off-canvas menu with collapsible submenu..

引导程序 3: http://www.bootply.com/129625

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -41.6%;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -41.6%;
  }
  .row-offcanvas-right.active {
    right: 41.6%;
  }
  .row-offcanvas-left.active {
    left: 41.6%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 41.6%;
  }
  #sidebar {
    background-color:#3b3b3b;
    padding-top:0;
  }
  #sidebar .nav>li {
    color: #ddd;
    background: linear-gradient(#3E3E3E, #383838);
    border-top: 1px solid #484848;
    border-bottom: 1px solid #2E2E2E;
  }
  #sidebar .nav>li:first-child {
    border-top:0;
  }
  #sidebar .nav>li>a {
    color: #ddd;
  }
  #sidebar .nav>li>a>img {
    max-width: 14px;
  }
  #sidebar .nav>li>a:hover, #sidebar .nav>li>a:focus {
    text-decoration: none;
    background: linear-gradient(#373737, #323232);
    color: #fff;  
  }
  #sidebar .nav .caret {
    border-top-color: #fff;
    border-bottom-color: #fff;
  }
  #sidebar .nav a:hover .caret{
    border-top-color: #fff;
    border-bottom-color: #fff;
  }
}

引导程序 4: https://www.codeply.com/go/JbaVzJCNLJ/bootstrap-4-off-canvas-sidebar

这篇关于需要 Bootstrap 左侧导航示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！