Question

我正在为我的BS网站创建一个Navbar，我刚刚意识到将它滑出左边看起来很吸引人。所以，要运行它，

用户点击.navbar-toggle。
然后Navbar滑出左边，覆盖整个页面的3/4。就像是 Airbnb 网站上的内容：

我该怎么做？我会告诉你，这与slideIn() jQuery函数有关，所以我也会添加该标记。请注意，此导航栏仅在用户使用移动设备时发生。这是我的代码：

http://codepen.io/aravind-forever/pen/ozGkWZ

Answer 1

嘿，根据你的条件你想要3/4侧边栏，这意味着如果整个页面宽度是100%你想要你的边栏到75%那个页面然后尝试下面的小提琴演示希望它可以帮助你 sidebar Fiddle

Answer 2

要实现您想要做的事情，您必须在代码中添加一些css规则和一些jquery。

以下是我创建的codepen的链接。可能会有所帮助：）

http://codepen.io/shashanksmaty/pen/pEWPaP

HTML：

<nav class="navbar navbar-default navbar-fixed-top">
 <div class="container-fluid">
 <div class="navbar-header">
  <button type="button" class="navbar-toggle">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">BrandName</a>
</div>
<div class="container-nav">
  <div class="nav-mask"></div>
  <div class="nav-list">
    <div class="nav-list-wrap">
      <ul class="list-unstyle">
        <li><strong>Home</strong></li>
        <li><strong>Downloads</strong></li>
        <li><strong>Contacts</strong></li>
        <li><strong>About Us</strong></li>
      </ul>
    </div>
  </div>
</div>

CSS：

.container-nav{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2000;
  visibility: hidden;
}

.nav-mask{
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #000;
  opacity: 0;
}

.nav-list {
  position: absolute;
  width: 285px;
  height: 100%;
  z-index: 2001;
  background: #000;
  color: #FFF;
  right: -285px;
}

.nav-list-wrap {
  padding: 30px 10px;
}

.list-unstyle {
  list-style-type: none;
}

.list-unstyle li {
  padding: 5px;
  font-size: 20px;
  cursor: pointer;
}

.list-unstyle li:hover {
   text-decoration: underline;
}

jQuery的：

$('.navbar-toggle').on('click', function(){
  $('.container-nav').css("visibility", "visible");
  $('.nav-mask').css({
    "opacity": "0.6",
    "-webkit-transition": "opacity 0.5s ease-in",
    "transition": "opacity 0.5s ease-in"
  });
  $('.nav-list').css({
    "right": "0px",
    "-webkit-transition": "right 0.5s cubic-bezier(.17,.67,.61,.98)",
    "transition": "right 0.5s cubic-bezier(.17,.67,.61,.98)"
  });
});

$('.nav-mask').on('click', function(){
  $('.container-nav').css("visibility", "hidden");
  $('.nav-mask').css({
    "opacity": "0",
    "-webkit-transition": "opacity 0.5s ease-in",
    "transition": "opacity 0.5s ease-in"
  });
  $('.nav-list').css({
    "right": "-285px",
    "-webkit-transition": "right 0.5s cubic-bezier(.17,.67,.61,.98)",
    "transition": "right 0.5s cubic-bezier(.17,.67,.61,.98)"
  });
});

将BS3 Navbar滑出左侧

2 个答案: