Bootstrap 4 使用切换按钮连接侧面菜单（响应式）

Posted 2023-03-05

技术标签:

【中文标题】Bootstrap 4 使用切换按钮连接侧面菜单（响应式）【英文标题】：Bootstrap 4 Connect a side menu with toggle button (responsive) 【发布时间】：2021-05-14 20:51:57 【问题描述】：

我正在尝试向网页添加一个侧边菜单，该菜单的响应类似于导航栏（不幸的是，我仍然在顶部有一个导航栏）。

我在https://jsfiddle.net/ralfavatar/crve8nxb/ 中发布了代码，如果您放大结果窗口，您应该会在左侧（黄色）看到一个菜单，该菜单被隐藏到一定的屏幕尺寸 --> 很好。

但我想要一个切换按钮（如导航栏中的汉堡包按钮），它会像下拉菜单一样显示这个菜单。

我没有找到任何提示，也不知道如何将带有菜单的切换按钮连接到现有菜单，或者，如果我愿意，可以使用此按钮切换现有菜单。

有人对此有想法吗？

代码如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Content -->
<section class="mainsection">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-1 col-sm-3" id="debug1">
        <nav class="nav nav-pills flex-column d-none d-lg-block">
          <a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
          <a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
          <a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
          <a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
        </nav>
      </div>
      <div class="col-xs-pull-12 col-sm-9" id="debug2">
        <div class="maincontent align-content-lg-center">
          <div class="tab-content">
            <div class="tab-pane active fade in" id="aboutme">
              Hallo 1
            </div>
            <div class="tab-pane active fade in" id="location">
              Hallo 2
            </div>
            <div class="tab-pane fade" id="products">
              Hallo 3
            </div>
            <div class="tab-pane fade" id="interestingthings">
              Hallo 4
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

【问题讨论】：

【参考方案1】：

使用切换（汉堡）按钮影响侧边栏黄色占位符的方法是简单地更改具有目标 id (#debug1) 的按钮的 data-target html 属性。这样您就可以将菜单移动到黄色区域的侧边栏并进行切换。在您的示例中，黄色区域将出现/消失，但您可以在其上构建菜单侧边栏。

<a href="index.html" class="navbar-brand">Moin</a>
  <button type="button" class="navbar-toggler ml-auto" 
     data-toggle="collapse" data-target="#debug1" aria-expanded="false" 
         aria-controls="navbarResponsive" aria-label="Toogle navigation">

更新：

我已经从导航栏中添加（复制/粘贴）汉堡包按钮并将其放置在黄色部分和目标红色区域中，该区域应模拟下拉菜单。对 HTML 进行重新排序，您也可以将其放在黄色部分内。我希望这会有所帮助。

<!-- Content -->
<section class="mainsection">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-1 col-sm-3" id="debug1">
                <button type="button" class="navbar-toggler ml-auto"
data-toggle="collapse" data-target="#debug2" aria-expanded="false" aria-controls="navbarResponsive" aria-label="Toogle navigation">
                   <span class="sr-only">Toggle navigation</span>
                   <span class="navbar-toggler-icon"></span>
                </button>
                <nav class="nav nav-pills flex-column d-none d-lg-block">
                    <a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
                    <a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
                    <a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
                    <a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
                </nav>
            </div>
            <div class="col-xs-pull-12 col-sm-9" id="debug2">
                <div class="maincontent align-content-lg-center">
                    <div class="tab-content">
                        <div class="tab-pane active fade in" id="aboutme">
                            Hallo 1
                        </div>
                        <div class="tab-pane active fade in" id="location">
                            Hallo 2
                        </div>
                        <div class="tab-pane fade" id="products">
                            Hallo 3
                        </div>
                        <div class="tab-pane fade" id="interestingthings">
                            Hallo 4
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

更新 2（我现在有针对性的侧边栏菜单来切换黄色部分侧边栏中的按钮）：

<!-- Content -->
<section class="mainsection">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-1 col-sm-3">
                <button type="button" class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#debug3" aria-expanded="false" aria-controls="navbarResponsive" aria-label="Toogle navigation">
            <span class="sr-only">Toggle navigation</span>
            <span class="navbar-toggler-icon"></span>
        </button>
                <nav class="nav navbar-collapse collapse nav-pills flex-column d-none d-lg-block" id="debug3">
                    <a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
                    <a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
                    <a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
                    <a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
                </nav>
            </div>
            <div class="col-xs-pull-12 col-sm-9" id="debug2">
                <div class="maincontent align-content-lg-center">
                    <div class="tab-content">
                        <div class="tab-pane active fade in" id="aboutme">
                            Hallo 1
                        </div>
                        <div class="tab-pane active fade in" id="location">
                            Hallo 2
                        </div>
                        <div class="tab-pane fade" id="products">
                            Hallo 3
                        </div>
                        <div class="tab-pane fade" id="interestingthings">
                            Hallo 4
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

更新 3：

<!-- Content -->
<section class="mainsection">
   <div class="container-fluid">
      <div class="row">
         <div class="col-xs-1 col-sm-3" style="background-color: #000">
            <button type="button" class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#debug3" aria-expanded="false" aria-controls="navbarResponsive" aria-label="Toogle navigation">
            <span class="sr-only">Toggle navigation</span>
            <span class="navbar-toggler-icon"></span>
            </button>
         </div>
      </div>
      <div class="row">
         <div class="col-xs-1 col-sm-3" id="debug3">
            <nav class="nav navbar-collapse collapse nav-pills flex-column d-none d-lg-block">
               <a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
               <a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
               <a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
               <a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
            </nav>
         </div>
         <div class="col-xs-pull-12 col-sm-9" id="debug2">
            <div class="maincontent align-content-lg-center">
               <div class="tab-content">
                  <div class="tab-pane active fade in" id="aboutme">
                     Hallo 1
                  </div>
                  <div class="tab-pane active fade in" id="location">
                     Hallo 2
                  </div>
                  <div class="tab-pane fade" id="products">
                     Hallo 3
                  </div>
                  <div class="tab-pane fade" id="interestingthings">
                     Hallo 4
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

【讨论】：

感谢您的回复，但我不想将导航栏移到黄色区域。我想要另一个菜单，它可以切换与导航栏相对应的屏幕大小，但有另一个功能。所以，最后我需要两个按钮 - 一个用于导航栏（它有效），一个用于我自己的侧面菜单（问题意图）。最好的问候，拉尔夫再次感谢您的支持。我将您的代码添加到小提琴中，但它不起作用。我认为有隐形按钮（我尝试添加 navbar-light/navbar-dark 类，但它不起作用）并且按下按钮似乎没有效果。最好的问候，拉尔夫我已经更新了答案，希望它是您的目标。您可以将侧边栏的切换按钮放置在任何您希望重新排序布局 html 和 css 的地方，只要有设计问题。这只是触发任何 div 目标属性的快速方法。对不起，我做了另一个更新（汉堡按钮不是它应该看起来的样子）但我希望现在它更清晰一些，只需要对按钮颜色进行一些处理......现在它是希望能展示出这样的方式。希望对您有所帮助。非常感谢，这表明方向正确。我会玩一点......最好的问候，拉尔夫

以上是关于Bootstrap 4 使用切换按钮连接侧面菜单（响应式）的主要内容，如果未能解决你的问题，请参考以下文章

如何为移动屏幕的导航栏项目添加切换按钮，并使用 HTML、CSS 和 Bootstrap v4 将它们切换为下拉菜单

Bootstrap 4 导航栏切换损坏

Bootstrap 4打开多个导航栏下拉菜单，无需切换

在 ionic 4 中从单页视图导航到侧面菜单布局

Bootstrap 4.0.0右对齐导航栏下拉菜单打开时超出视口[重复]

Bootstrap 4，在导航菜单项中使用多个下拉按钮