CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3off-canvas-menu
nesvarbu
nesvarbu

Reputation: 1016

Bootstrap offcanvas example on both (left and right) sides

I am trying to make bootstrap offcanvas example work for both sides. So far I managed to make it slide on both sides, but as I am not very good with css for some reason menus are not in place where they should be. There was very similar template in bootply so here is very similar example where I am here

$(document).ready(function() {
  $('[data-toggle="offcanvas"]').click(function () {
            $('.row-offcanvas-both').toggleClass('leftActive');
  });
  $('[data-toggle="offcanvas-right"]').click(function () {
    $('.row-offcanvas-both').toggleClass('rightActive');
  });
});
body {
  padding-top: 51px;  
}
.text-center {
  padding-top: 20px;
}
.col-xs-12 {
  background-color: #fff;
}
#sidebar {
  height: 100%;
  padding-right: 0;
  padding-top: 20px;
}
#sidebar .nav {
  width: 95%;
}
#sidebar li {
  border:0 #f2f2f2 solid;
  border-bottom-width:1px;
}

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -41.6%;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -41.6%;
  }
  .row-offcanvas-right.active {
    right: 41.6%;
  }
  .row-offcanvas-left.active {
    left: 41.6%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 41.6%;
  }
  #sidebar {
    padding-top:0;
  }


  /* something that I tried to make both sides work */
      .row-offcanvas-both
    .sidebar-offcanvas-rigth {
        right: -75%; /* 9 columns */
    }

    .row-offcanvas-both
    .sidebar-offcanvas-left {
        left: -75%; /* 9 columns */
    }
	
  	.row-offcanvas-both.rightActive {
        right: 75%; /* 9 columns */
    }

    .row-offcanvas-both.leftActive {
        left: 75%; /* 9 columns */
    }

  #sidebar-right {
    height: 100%;
    padding-right: 0;
    padding-top: 20px;
  }
  #sidebar-right .nav {
    width: 95%;
  }
  #sidebar-right li {
    border:0 #f2f2f2 solid;
    border-bottom-width:1px;
  }

#sidebar-right {
    padding-top:0;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-container">
  
	<!-- top navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container">
    	<div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="offcanvas-right" data-target=".sidebar-nav">
             right
           </button>
           <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
             left
           </button>
           <a class="navbar-brand" href="#">Project Name</a>
    	</div>
       </div>
    </div>
      
    <div class="container">
      <div class="row row-offcanvas row-offcanvas-both">
        
        <!-- sidebar -->
        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>              
            </ul>
        </div>
  	
        <!-- main area -->
        <div class="col-xs-12 col-sm-6">
          <h1>Shrink Width to Collapse Sidebar</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
            Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
            Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec 
            arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel 
            semper. Sed a risus purus. Fusce pulvinar, velit eget rhoncus facilisis, enim elit vulputate nisl, a 
            euismod diam metus eu enim. Nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis. 
            Nam neque tellus, tristique in est vel, sagittis congue turpis. Aliquam nulla lacus, laoreet dapibus 
            odio vitae, posuere volutpat magna. Nam pulvinar lacus in sapien feugiat, sit amet vestibulum enim 
            eleifend. Integer sit amet ante auctor, lacinia sem quis, consectetur nulla.</p>
    
          <p>Vestibulum porttitor massa eget pellentesque eleifend. Suspendisse tempor, nisi eu placerat auctor, 
            est erat tempus neque, pellentesque venenatis eros lorem vel quam. Nulla luctus malesuada porttitor. 
            Fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. Quisque facilisis risus 
            in lacus sagittis malesuada. Suspendisse non purus diam. Nunc commodo felis sit amet tortor 
            adipiscing varius. Fusce commodo nulla quis fermentum hendrerit. Donec vulputate, tellus sed 
            venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem.</p>
    
          <p>Fusce sollicitudin lacus lacinia mi tincidunt ullamcorper. Aenean velit ipsum, vestibulum nec 
            tincidunt eu, lobortis vitae erat. Nullam ultricies fringilla ultricies. Sed euismod nibh quis 
            tincidunt dapibus. Nulla quam velit, porta sit amet felis eu, auctor fringilla elit. Donec 
            convallis tincidunt nibh, quis pellentesque sapien condimentum a. Phasellus purus dui, rhoncus 
            id suscipit id, ornare et sem. Duis aliquet posuere arcu a ornare. Pellentesque consequat libero 
            id massa accumsan volutpat. Fusce a hendrerit lacus. Nam elementum ac eros eu porttitor. 
            Phasellus enim mi, auctor sit amet luctus a, commodo fermentum arcu. In volutpat scelerisque 
            quam, nec lacinia libero.</p>
    
          <p>Aliquam a lacinia orci, iaculis porttitor neque. Nullam cursus dolor tempus mauris posuere, eu 
            scelerisque sem tincidunt. Praesent blandit sapien at sem pulvinar, vel egestas orci varius. 
            Praesent vitae purus at ante aliquet luctus vel quis nibh. Mauris id nulla vitae est lacinia 
            rhoncus a vel justo. Donec iaculis quis sapien vel molestie. Aliquam sed elementum orci. 
            Vestibulum tristique tempor risus et malesuada. Sed eget ligula sed quam placerat dapibus. 
            Integer accumsan ac massa at tempus.</p>
          
        </div><!-- /.col-xs-12 main -->
        
        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar-right" role="navigation">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Right Link 1</a></li>
              <li><a href="#">Right Link 2</a></li>
              <li><a href="#">Right Link 3</a></li>              
            </ul>
        </div>
        
    </div><!--/.row-->
  </div><!--/.container-->
</div><!--/.page-container-->

Upvotes: 2

Views: 2093

Answers (2)

David Augustus
David Augustus

Reputation: 420

I made many fixes to Bootstrap Offcanvas menu example after having the same problem you asks about it . I really think that bug is proposital, as an mission to developers .

Main content :

  • Layout: Removed: Header and footer .
  • Logic: Changed: Script closes the other menu before opening .
  • Style: Removed: Everything else .

Click to check my final version at Codepen

Main

enter image description here I positioned 2 buttons on main canvas, that are displayed only on small width .

Inside both offcanvas menus : I changed the position of the buttons inside the offcanvas menu .

Left Menu

enter image description here

On the left menu: First button is a close button, positioned to left by default classes . Second is a Toggle to Right button with an arrow " > " using Glyphcons. Positioned to the right using float:right; .

   <p class="visible-xs">

    <button type="button" class="btn btn-danger btn-lg" data-toggle="offcanvas"> <i class="glyphicon glyphicon-remove"></i> </button>

            <button class="btn btn-lg" type="button" data-toggle="offcanvasRight" style="float:right;">
  Toggle Right
              <i class="glyphicon glyphicon-chevron-right"></i>

              </button>
   
   </p>

I changed the buttons like this because : If user give 2 clicks the menu is going to open and close .

Right Menu

Right menu is exactly the same as left offcanvas menu, same positioning, inverted . Right Offcanvas Menu

Script

            $(document).ready(function () {
$('[data-toggle=offcanvas]').click(function() {
  $('.row-offcanvas-left').toggleClass('active');
  $('.row-offcanvas-right').removeClass('active');
});

$('[data-toggle=offcanvasright]').click(function() {
  $('.row-offcanvas-right').toggleClass('active');
  $('.row-offcanvas-left').removeClass('active');
});
        });

Upvotes: 0

Emre Bolat
Emre Bolat

Reputation: 4562

There were some serious errors and unneeded css in your code.

First of all, you are calling the classes leftActive and rightActive by;

$('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas-both').toggleClass('leftActive');
});

$('[data-toggle="offcanvas-right"]').click(function () {
    $('.row-offcanvas-both').toggleClass('rightActive');
});

But in your HTML class name is active for both left and right menus;

<ul class="nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>              
</ul>

I corrected all the bugs I found in your code and made a working example for you, which you can see in this Bootply.

Upvotes: 3

Related Questions