Question

我在尝试使边栏/导航内容（使用Bootstrap）在桌面上默认显示（展开）并在移动设备上默认关闭并且仅在移动设备上显示图标时遇到了一些麻烦。我似乎无法使它正常工作。

<nav class="menu menu-open" id="theMenu">
      <div class="menu-wrap">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i>
            </button>
          <div id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </div>
          <div id="navbarToggleExternalContent">
          <ul id="main-menu">
              <a href="#">Home</a>
              <a href="#">About</a>
              <a href="#">Writing</a>
              <a href="#">Events</a>
              <a href="#">Speaking</a>
              <a href="#">Music</a>
          </ul>
          <ul id="social-icons">
              <li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
              <li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
              <li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
          </ul>
        </div>
      </div>
  </nav>

我尝试使用此javascript代码，但无济于事：

 $('.menu-close').on('click', function(){
    $('#menuToggle').toggleClass('active');
    $('body').toggleClass('body-push-toright');
    $('#theMenu').toggleClass('menu-open');
    alert("Test");
    });

Answer 1

似乎在这里已回答以下问题：https://stackoverflow.com/a/36289507/378779 基本上，将navbar-expand-*类之一添加到<nav>中，例如：

<nav class="menu menu-open navbar-expand-md" id="theMenu">

Answer 2

您可以使用CSS Media Query在不同的视口/设备上隐藏/显示内容。

Answer 3

这是您确实需要的链接。我为你制作了笔。请查看下面的链接。

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="theMenu">
  <a class="navbar-brand" id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </a>      
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto" id="main-menu">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Writing</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Events</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Speaking</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Music</a></li>
            <li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
              <li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
              <li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
          </ul>
  </div>
  </nav>

https://codepen.io/pgurav/pen/abbQZJL

Answer 4

首先只有几点：

您说的是补充工具栏，但对我而言，您的标记实际上并不像补充工具栏，而是响应式的topnav。我会尽力去理解它，并且在您真正想要的情况下，我还将演示一个可以正常工作的侧边栏。
您的菜单项位于<ul>（无序列表）中，没有任何<li>（列表项）。 bootsrap js / css可能需要<li>才能正常运行。从技术上讲，没有任何<ul>的{{1}}是有效的html，但是<li>中唯一允许的内容是<ul>，因此可以在{{1}内锚定（或其他任何内容） }必须包含在<li>内才能有效。
我不确定您到底想使用社交图标做什么，所以我只是以一种似乎明智的方式对其进行了微调。
我在<ul>元素上添加了<li>，这样，当您在小屏幕上打开菜单时，如果添加滚动条，则不会引起移位。根据您的网站设计和内容布局，可能不需要。

因此，让我们从一个非常基本的响应式菜单开始。

基本Bootstrap响应菜单

overflow-y: scroll;

<html>

好的，看起来还可以，但是菜单中有一张图片。因此，我将图像放在菜单中，然后给它一点CSS样式。然后，通过图像，我们需要一些额外的CSS才能很好地放置菜单元素：

将汉堡包按钮定位在导航栏的底部。我将使用图片的200px减去一些rem。您可以将html { overflow-y: scroll; } .social { padding: 4px 8px; }更改为<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <nav class="navbar navbar-expand-md bg-dark navbar-dark">  <a class="navbar-brand" href="#">Navbar</a>  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button>  <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Writing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Events</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Speaking</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Music</a> </li> </ul> <a class="social" href="#"><i class="fa fa-facebook fa-2x"></i></a> <a class="social" href="#"><i class="fa fa-twitter fa-2x"></i></a> <a class="social" href="#"><i class="fa fa-instagram fa-2x"></i></a> </div> </nav>以将汉堡包放在顶部，如果您希望即使打开汉堡包也将其粘贴到导航栏的底部，则可以将top: calc(100px - 1rem);更改为top: 1rem;。或只是删除整个规则，以使用引导程序默认值即可将汉堡包放置在垂直中间。



将菜单项放置在未折叠时也位于菜单栏的底部。



还将社交图标放置在底部，但将其推到右侧。



上面的数字2和3仅在菜单未折叠时才适用于中等断点以上，因此我将它们放入媒体查询中，以定位超过768px（引导程序的中等断点）的目标。这也可以通过bootstrap sass断点mixins来完成，但是我们这里只使用普通的CSS。您可以在CSS的@media查询规则中看到这些元素的位置，可以在其中进行更改以将其推到栏的顶部。或者只是删除这些规则以恢复为引导程序默认设置，该默认设置将菜单元素垂直居中放置，并将社交图标置于其下方。如果您只是希望像其他菜单项一样，将社交图标放入菜单bottom: 1rem;中的<li>元素中，则也可以。



菜单中有图片
<ul>
html {
  overflow-y: scroll;
}
.social {
  padding: 4px 4px;
}
.nav-logo {
  width: 200px;
  height: 100%;
}
.navbar-toggler {
  position: absolute;
  top: calc(100px - 1rem);
  right: 1rem;
}

@media all and (min-width: 768px) {
  .navbar-nav {
    position: absolute;
    bottom: 0;
  }
  .social-list {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
  }
}

好的，但是您说那是边栏。我对bootstrap不太熟悉，但是我发现v3和v4默认都不提供边栏导航。可以在here上找到一些自举边栏教程。我只是使用上面链接的教程中最基本的版本在此处创建示例。

可折叠的侧边栏

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#"><img class="nav-logo" src="https://i.postimg.cc/nckTrT6T/21.jpg"></a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Writing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Events</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Speaking</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Music</a>
      </li>
    </ul>
    <div  class="social-list">
      <a class="social" href="#"><i class="fa fa-facebook fa-2x"></i></a>
      <a class="social" href="#"><i class="fa fa-twitter fa-2x"></i></a>
      <a class="social" href="#"><i class="fa fa-instagram fa-2x"></i></a>
    </div>
  </div>
</nav>

$(document).ready(function () {

    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });

});

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}

Answer 5

我根据有关外部内容的bs4文档为您创建了一个示例。

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark navbar-expand-lg">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

在此示例中，代码从顶部折叠-而不是从右侧折叠。实际上，我正在休假，将尝试完成该示例以适合您的需求。

其他JavaScript：

var externalContent = $('#navbarToggleExternalContent'),
    execOnResize = function(){
// also the next line was only for use in jsfiddle
// in the real world you need to use window.outerWidth
// 992 pixel is the width of breakpoint corresponding to the class "navbar-expand-lg". Feel free to adapt it to fit your needs.
    if(window.innerWidth >= 992){
        externalContent.addClass('show');
    }else{
        externalContent.removeClass('show');
    }
};
// the next line was only addded for jsfiddle       
execOnResize();

window.onresize = function(event) {
    execOnResize();
};

window.addEventListener('load', function() {
    execOnResize();
})

我还创建了一个小提琴fiddle 要查看实际效果，请在jsfiddle中调整内部窗口的大小

Answer 6

无论设备如何，您当前的Javascript代码将始终运行。您需要的是一种检查设备是计算机还是手机的方法。

一种方法是使用浏览器的UserAgent：

$('.menu-close').on('click', function(){
    if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
        //mobile
        $('#menuToggle').toggleClass('active');
        $('body').toggleClass('body-push-toright');
        $('#theMenu').toggleClass('menu-open');
        alert("Test");
    }
});

或者，您可以仅依靠窗口的宽度（但是小型桌面窗口将被视为移动版本）：

if(window.innerWidth <= 767) { // a certain threshold value, in pixels
    //mobile
    //do something
}

侧边栏默认在桌面上打开，在移动设备上关闭

6 个答案:

基本Bootstrap响应菜单

菜单中有图片

可折叠的侧边栏