Bootstrap 3, two sidebar navigation menus

Question

What i'm trying to do is create two sidebar navigation menus. One is actually going to be a menu but i want the other for functional usage.

There is also a right sidebar so i can't go over to the other side.

Now i have no problem creating a siderbar that is going to overlapse the main container but i'm having trouble making the sidebar "push" the main container inside and with the other sidebar already in place it's getting kinda confusing.

Any help is appreciated.

Thanks

Answer 1

Will this help you? I am still working on the jQuery animation.

$(function () {
  $(".pri-sidebar nav ul li:first-child a").click(function () {
    $(".content").toggleClass("open");
    return false;
  });
});

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
* {font-family: Segoe UI;}
a {text-decoration: none;}
nav ul,
nav ul li {margin: 0; padding: 0; list-style: none;}
.content {padding-left: 50px; position: relative; overflow: hidden; min-height: 400px;}
.pri-sidebar {position: absolute; left: 0; top: 0; background-color: #000; padding: 5px; height: 10000px;}
.pri-sidebar a {color: #fff; padding: 5px; display: block;}
.sub-sidebar {position: absolute; left: 35px; background-color: #333; width: 100px; height: 1000px; display: none;}
.sub-sidebar a {color: #fff; padding: 5px; display: block; line-height: 1; text-align: center;}
h1, h2, p {margin: 0 0 10px; line-height: 1.5;}
.content.open {padding-left: 150px;}
.content.open .sub-sidebar {display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="content">
  <div class="pri-sidebar">
    <nav>
      <ul>
        <li><a href=""><i class="fa fa-tachometer"></i></a></li>
        <li><a href="#"><i class="fa fa-android"></i></a></li>
        <li><a href="#"><i class="fa fa-apple"></i></a></li>
        <li><a href="#"><i class="fa fa-drupal"></i></a></li>
      </ul>
    </nav>
  </div>
  <div class="sub-sidebar">
    <nav>
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
      </ul>
    </nav>
  </div>
  <h1>Hello! How are you?</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus a, neque quae nobis eos aperiam ratione maxime, magni molestias amet commodi, ducimus doloremque error consequuntur possimus dolore placeat ut voluptate.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil saepe id iusto eaque exercitationem culpa nostrum perferendis quaerat aliquid, nemo quis earum, repellat, consequuntur quas accusamus vel quasi odit eveniet.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus debitis, excepturi, laborum sequi et eaque expedita? Ut laborum expedita, molestiae totam culpa suscipit laudantium dolor. Nobis quo alias, similique repudiandae!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti, facilis harum voluptates voluptate vitae, blanditiis voluptatibus error quod nesciunt expedita, aperiam accusamus nam numquam necessitatibus quaerat cumque aut sequi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In provident dolor commodi possimus harum tempore facere atque illo dolore, vel soluta accusamus, sapiente, totam blanditiis adipisci expedita aspernatur officiis saepe.</p>
</div>

With Animation (working partially for open):

$(function () {
  $(".pri-sidebar nav ul li:first-child a").click(function () {
    $(".content").animate({
      "padding-left": 150
    }, 1000);
    $(".sub-sidebar").css({
      display: "block",
      width: "0px"
    }).animate({
      width: 100
    }, 1000);
    return false;
  });
});

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
* {font-family: Segoe UI;}
a {text-decoration: none;}
nav ul,
nav ul li {margin: 0; padding: 0; list-style: none;}
.content {padding-left: 50px; position: relative; overflow: hidden; min-height: 400px;}
.pri-sidebar {position: absolute; left: 0; top: 0; background-color: #000; padding: 5px; height: 10000px;}
.pri-sidebar a {color: #fff; padding: 5px; display: block;}
.sub-sidebar {position: absolute; left: 35px; background-color: #333; width: 100px; height: 1000px; display: none; overflow: hidden;}
.sub-sidebar a {color: #fff; padding: 5px; display: block; line-height: 1; text-align: center;}
h1, h2, p {margin: 0 0 10px; line-height: 1.5;}
.content.open {padding-left: 150px;}
.content.open .sub-sidebar {display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="content">
  <div class="pri-sidebar">
    <nav>
      <ul>
        <li><a href=""><i class="fa fa-tachometer"></i></a></li>
        <li><a href="#"><i class="fa fa-android"></i></a></li>
        <li><a href="#"><i class="fa fa-apple"></i></a></li>
        <li><a href="#"><i class="fa fa-drupal"></i></a></li>
      </ul>
    </nav>
  </div>
  <div class="sub-sidebar">
    <nav>
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
      </ul>
    </nav>
  </div>
  <h1>Hello! How are you?</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus a, neque quae nobis eos aperiam ratione maxime, magni molestias amet commodi, ducimus doloremque error consequuntur possimus dolore placeat ut voluptate.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil saepe id iusto eaque exercitationem culpa nostrum perferendis quaerat aliquid, nemo quis earum, repellat, consequuntur quas accusamus vel quasi odit eveniet.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus debitis, excepturi, laborum sequi et eaque expedita? Ut laborum expedita, molestiae totam culpa suscipit laudantium dolor. Nobis quo alias, similique repudiandae!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti, facilis harum voluptates voluptate vitae, blanditiis voluptatibus error quod nesciunt expedita, aperiam accusamus nam numquam necessitatibus quaerat cumque aut sequi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In provident dolor commodi possimus harum tempore facere atque illo dolore, vel soluta accusamus, sapiente, totam blanditiis adipisci expedita aspernatur officiis saepe.</p>
</div>