Bootstrap 4 Connect a side menu with toggle button (responsive)

user_7153224 0
Viewed 705

I am trying to add a side menu to a webpage, which acts responsive similar to a navbar (unfortunately I have still a navbar on top).

In https://jsfiddle.net/ralfavatar/crve8nxb/ I posted the code and if you size up the result window you should see on the left side (yellow) a menu, which is hidden down to a certain screen size --> good.

But I want to have instead a toggle button (like the hamburger button from the navbar), which shows me this menu like a dropdown.

I didn't find any hints and I have no idea how I can connect a toggle button with a menu to the existing menu, or, which I would appreciate, to toggle the existing menu with this button.

Does anybody an idea for this?

Here is the code:

<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>

bootstrap-4 css html jquery javascript
1 Answers

The way to influence yellow placeholder for sidebar with toggle (hamburger) button is simply to change data-target html attribute for that button with target id (#debug1). This way you can move menu to sidebar in yellow area and toggle it. In your example case yellow area will appear/disappear but you can build menu sidebar on top of that.

<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">

UPDATE :

I have added (copy/paste) hamburger button from navbar and placed it in yellow section and targeted red area that should simulate dropdown menu. Reordering of HTML you can place it inside of yellow section too. I hope this helps.

<!-- 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>

UPDATE 2 (I have now targeted sidebar menu to toggle with button inside yellow section sidebar) :

<!-- 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>

UPDATE 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>
user_89662020
Related