Question

我认为这很容易，但我似乎无法弄清楚如何在较大的设备上获得与TOP导航栏相同的菜单，并使用Jasny Bootstrap插件在较小的设备上滑动SIDE。所有的例子似乎都在SIDE上，只是在完整（侧面）和汉堡包之间切换。我需要TOP上的“桌面”和左边的“滑动”作为滑入。任何想法或一个例子的链接都会很棒！这是example，两者都在旁边。

Answer 1

我认为这就是你所说的：

＆＃13;

true
true

＆＃13;

$(document).ready(function() {
  var sideslider = $('[data-toggle=collapse-side]');
  var sel = sideslider.attr('data-target');
  sideslider.click(function(event) {
    $(sel).toggleClass('in');
  });
});

＆＃13;

body {
  padding-top: 60px;
}
.navbar-default {
  padding-right: 8px;
}
.navbar .navbar-toggle {
  border: none;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background: #f5f5f5;
}
.navbar-header .navbar-toggle .icon-bar {
  background: #444;
}
.navbar-header .navbar-toggle .icon-bar:hover {
  background: #444;
}
.side-collapse-container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  -webkit-border-radius: 0;
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 0;
  border-radius: 0;
  background: #ddd;
  -webkit-box-shadow: inset 0 0 6px #ddd;
}
::-webkit-scrollbar-thumb:window-inactive {
  background: #ddd;
}
@media screen and (max-width: 768px) {
  .side-collapse {
    top: 50px;
    bottom: 0;
    left: 0;
    width: 256px;
    position: fixed;
    overflow: auto;
    transition: all 0.6s cubic-bezier(.87, -.41, .19, 1.44);
  }
  .side-collapse.in {
    width: 0;
  }
  .navbar-nav li.dropdown {
    padding-right: 0;
  }
  .navbar-default {
    padding-right: 0;
  }
  .navbar .navbar-default {
    border-right: 1px solid #ddd;
  }
}

＆＃13;

寻找Jasny Bootstrap插件相同的菜单桌面TOP和off-canvas SIDE示例

1 个答案: