Bootstrap Off Canvas Show Full Height
I am trying to use Bootstrap off canavas left side bar to toggle on small devices.
here is the bootply code example:
www.bootply.com/C2wQEkdSAn
The p
-
I was trying to achieve the same thing you were. Here is how I solved it.
Basically I think the difference is that I change the position of both the .row-offcanvas and .sidebar-offcanvas in the CSS. I set the left and right to 0 on the .sidebar-offcanvas.active
$(document).ready(function() { $('[data-toggle=offcanvas]').click(function() { $('.row-offcanvas').toggleClass('active'); $('.sidebar-offcanvas').toggleClass('active'); return false; }); });/** * Base structure */ body { overflow-x:hidden; padding-top:50px; } /** * Top navigation */ .navbar-fixed-top { border:0; } .sidebar-offcanvas { background-color:#f5f5f5; border-right:1px solid #eee; bottom:0; display:block; left:0; position:fixed; overflow-x:hidden; overflow-y:auto; top:50px; transition:all .25s ease-in-out; width:250px; z-index:1000; } .main { left:250px; padding:20px; padding-left:40px; padding-right:40px; position:absolute; width:calc(100% - 250px); } .main .page-header { margin-top:0; } @media screen and (max-width: 768px) { .main { left:0; padding:20px; position:relative; width:100%; } .row-offcanvas { position:relative; transition:all .25s ease-in-out; } .row-offcanvas-right { right:0; } .row-offcanvas-left { left:0; } .row-offcanvas-right .sidebar-offcanvas { right:-250px; } .row-offcanvas-right .sidebar-offcanvas.active { right:0; } .row-offcanvas-left .sidebar-offcanvas { left:-250px; } .row-offcanvas-left .sidebar-offcanvas.active { left:0; } .row-offcanvas-right.active { right:250px; } .row-offcanvas-left.active { left:250px; } .sidebar-offcanvas { display:block; position:fixed; width:250px; } }<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content=""> <meta name="author" content="dansek"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Project name</title> <!-- Bootstrap --> <link rel="stylesheet" href="/assets/css/bootstrap.min.css" /> <link rel="stylesheet" href="/assets/css/bootstrap-theme.min.css" /> <link rel="stylesheet" href="/assets/css/font-awesome.min.css" /> <script src="/assets/js/jquery-2.1.3.min.js"></script> <script src="/assets/js/holder.min.js"></script> <script src="/assets/js/bootstrap.min.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="/assets/js/html5shiv.min.js"></script> <script src="/assets/js/respond.min.js"></script> <![endif]--> <link href="/assets/css/light-theme-demo.css" rel="stylesheet" /> <script src="/assets/js/dashboard.js"></script> <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="/dashboard/settings">Settings</a></li> <li><a href="/dashboard/profile">Profile</a></li> <li><a href="/dashboard/help">Help</a></li> <li><a href="/account/signout"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Sign out</a></li> </ul> <form class="navbar-form navbar-right"> <input type="text" class="form-control" placeholder="Search..."> </form> </div> </div> </nav> <div class="container-fluid"> <div class="row row-offcanvas row-offcanvas-left"> <div class="sidebar-offcanvas" id="sidebar"> <ul class="nav"> <li class="active"><a href="/dashboard"><i class="fa fa-fw fa-tachometer"></i> Dashboard <span class="sr-only">(current)</span></a></li> <li><a href="/dashboard/reports"><i class="fa fa-fw fa-file"></i> Reports</a></li> <li><a href="/dashboard/analytics"><i class="fa fa-fw fa-pie-chart"></i> Analytics</a></li> <li><a href="/dashboard/export"><i class="fa fa-fw fa-floppy-o"></i> Export</a></li> <li class="nav-spacer"></li> <li><a href="/dashboard/users"><i class="fa fa-fw fa-user"></i> Users</a></li> <li><a href="/dashboard/groups"><i class="fa fa-fw fa-users"></i> Groups</a></li> <li><a href="/dashboard/permissions"><i class="fa fa-fw fa-unlock-alt"></i> Permissions</a></li> </ul> </div> <div class="main"> <h2 class="page-header">Header</h2> <p><button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button></p> </div> </div> </div> </body> </html>讨论(0) -
The problem you're experiencing with the stock offcanvass.css is that it sets the off canvas side bar to
position:absolute, which effectively takes the column out of the flow of the page and causes it to overlay the footer when pulled into view. Use the following 3 steps for a simple CSS solution that requires no additional JS.1. Use static positioning
To get the outcome you're wanting, i.e., to keep the side bar in the flow of the document so it forces the footer down when it comes into view, override the default offcanvas CSS by setting the side bar to
position:static.2. Set the height
Static positioning will put the side bar back in the document flow, but that also means it will cause the content area to be as tall as the side bar even when the side bar is off canvas. To correct that, set the side bar to
height:0when it's off canvas and back toheight:autowhen it's in view.3. Set a width and negative margin
I also set a definite size for the side bar (so it doesn't default to the standard offcanvas.css size of 50%), and used an equal width negative left margin to pull it off the page.
Wrap it all in a media query for mobile screens, and you get:
@media (max-width: 767px) { .row-offcanvas-left .sidebar-offcanvas { position: static; width: 200px; margin-left: -200px; overflow: hidden; height: 0; } .row-offcanvas-left.active .sidebar-offcanvas { height: auto; } .row-offcanvas-left.active { left: 200px; } }See this JS Fiddle for the full example. I included a Bootstrap nav bar, a separate offcanvas toggle button that only shows when the side bar is off canvas, and a simple footer for the sake of completeness.
P.S.: I should mention that this method causes the footer to immediately jump to the bottom of the height of the side bar as soon as the side bar comes into view, and some users may not like that. However, it is possible to use CSS transitions and max-height to animate the expansion of the side bar as demonstrated in this SO post, but the result is less than ideal. I only mention it because it might be something others would like to use. Personally, I'm OK with the footer just instantly popping down lower.
讨论(0) -
Her's a complete page:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="IE=edge" http-equiv="X-UA-Compatible"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="" name="description"> <meta content="" name="author"> <link href="../../docs-assets/ico/favicon.png" rel="shortcut icon"> <title>Starter Template for Bootstrap</title><!-- Bootstrap core CSS --> <link href= "http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel= "stylesheet"> <link href= "http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <style> body { padding-top: 50px; } .content_wrap { padding: 40px 15px; text-align: center; } footer { background-color: #222; color: #777; } /* * Off Canvas * -------------------------------------------------- */ @media screen and (max-width: 768px) { .row-offcanvas { } #sidebar { display:none; } #sidebar.in { display:block; position: fixed; z-index: 1030; top: 0px; bottom: 0px; overflow-y: auto; border-radius: 0px; padding:0px; min-height:100%; width:300px; } #sidebar.in .well { margin:0px; border-radius: 0px; border:none; min-height:100%; } } </style> </head> <body> <div class="navmenu navmenu-default navmenu-fixed-left offcanvas"> <a class="navmenu-brand" href="#">Project name</a> <ul class="nav navmenu-nav"> <li> <a href="../navmenu/">Slide in</a> </li> <li class="active"> <a href="./">Push</a> </li> <li> <a href="../navmenu-reveal/">Reveal</a> </li> <li> <a href="../navbar-offcanvas/">Off canvas navbar</a> </li> </ul> <ul class="nav navmenu-nav"> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href= "#">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu navmenu-nav"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li> <a href="#">Separated link</a> </li> <li> <a href="#">One more separated link</a> </li> </ul> </li> </ul> </div> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button"><span class= "icon-bar"></span> <span class="icon-bar"></span> <span class= "icon-bar"></span></button> <a class="navbar-brand" href= "#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#about">About</a> </li> <li> <a href="#contact">Contact</a> </li> </ul> </div><!--/.nav-collapse --> </div> </div> <div class="container content_wrap"> <div class="row"> <div class="col-xs-6 col-sm-3" id="sidebar"> <div class="well sidebar-nav"> <ul class="nav"> <li>Sidebar</li> <li class="active"> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li>Sidebar</li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li>Sidebar</li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> </ul> <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-parent= "#accordion2" data-toggle="collapse" href= "#collapseOne">Collapsible Group Item #1</a> </div> <div class="accordion-body collapse" id= "collapseOne"> <div class="accordion-inner"> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-parent= "#accordion2" data-toggle="collapse" href= "#collapseTwo">Collapsible Group Item #2</a> </div> <div class="accordion-body collapse" id= "collapseTwo"> <div class="accordion-inner"> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> Sidebar text...<br> </div> </div> </div> </div> </div><!--/.well --> </div><!--/span--> <div class="col-xs-12 col-sm-9" id="main"> <p class="pull-left visible-xs"><button class= "btn btn-primary btn-xs glyphicon glyphicon-chevron-left" data-canvas="body" data-target="#sidebar" data-toggle= "offcanvas" style="font-style: italic" type= "button"></button></p> <div class="jumbotron"> <h1>Hello, world!</h1> <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p> </div> <div class="row"> <div class="col-lg-4"> <h2>Heading</h2> <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript.</p> <p><a class="btn btn-default" href="#">View details »</a></p> </div> <div class="col-lg-4"> <h2>Heading</h2> <p>Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript. Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design.</p> <p><a class="btn btn-default" href="#">View details »</a></p> </div> <div class="col-lg-4"> <h2>Heading</h2> <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript.</p> <p><a class="btn btn-default" href="#">View details »</a></p> </div> </div><!--/row--> <div class="row"> <div class="col-lg-4"> <h2>Heading</h2> <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript.</p> <p><a class="btn btn-default" href="#">View details »</a></p> </div> <div class="col-lg-4"> <h2>Heading</h2> <p>Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript. Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design.</p> <p><a class="btn btn-default" href="#">View details »</a></p> </div> <div class="col-lg-4"> <h2>Heading</h2> <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript.</p> <p><a class="btn btn-default" href="#">View details »</a></p> </div> </div><!--/row--> </div> </div><!--/row--> </div> <footer> <div class="container"> <div class="row-fluid" style="padding-top:1em;"> <div class="col-md-3 col-sm-6 col-xs-12"> <ul class="list-unstyled"> <li> <a href="#">Home</a> </li> <li> <a class="navbar-link" href="#">Ccontact us</a> </li> <li> <a class="navbar-link" href="#">Announcements</a> </li> <li> <a class="navbar-link" href="#">About us</a> </li> </ul> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <p class="navbar-text">Text and links</p> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <p class="navbar-text">Text and links</p> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <p class="navbar-text">copyright</p> </div> </div> </div><!--row--> </footer> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script> </body> </html>Here's a solution using offcanvas.js from http://jasny.github.io/bootstrap/javascript/#offcanvas
and some custom CSS:
body { padding-top: 50px; } .content_wrap { padding: 40px 15px; text-align: center; } footer { background-color: #222; color: #777; } /* * Off Canvas * -------------------------------------------------- */ @media screen and (max-width: 768px) { .row-offcanvas { } #sidebar { display:none; } #sidebar.in { display:block; position: fixed; z-index: 1030; top: 0px; bottom: 0px; overflow-y: auto; border-radius: 0px; padding:0px; min-height:100%; width:300px; } #sidebar.in .well { margin:0px; border-radius: 0px; border:none; min-height:100%; } }you can see full code here
and a full-screen result here
UPDATE - to match your code
/* * Off Canvas * -------------------------------------------------- */ @media screen and (max-width: 768px) { .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-left.sidebar-offcanvas { margin-left: -50%; } .sidebar-offcanvas { width: 50%; } }讨论(0) -
After 11 month, I was able to do the Bootstrap off canvas right as it should with simple jquery code. This does work exactly the same as Jasny bootstrap off canvas extension.
For LTR sidebar:
<!doctype html> <html lang="en"> <head> <title>Test</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function () { jQuery('[data-toggle=offcanvas]').click(function () { // add this line to change the position of sidebar jQuery('.row-offcanvas').hasClass( "active" ) ? jQuery('.sidebar-offcanvas').css("position","absolute") : jQuery('.sidebar-offcanvas').css("position","relative"); // end modif /*$(".content-div").css({"position":"absolute","top":"0"});*/ $(".content-div").toggleClass("postion"); jQuery('.row-offcanvas').toggleClass('active') }); }); </script> </head> <body> <style> .main-div{ float:left; width:100%; overflow:hidden; } @media(max-width:767px){ .row-offcanvas { position: relative; -webkit-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; } .row-offcanvas-right { right: 0; } .row-offcanvas-left { left: 0; } .row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ } .row-offcanvas-left .sidebar-offcanvas { left: -50%; /* 6 columns */ } .row-offcanvas-right.active { right: 50%; /* 6 columns */ } .row-offcanvas-left.active { left: 50%; /* 6 columns */ } .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ } .postion{ position:relative; margin-left:-50%; } } </style> <div class="container-fluid"> <div class="row"><h1>Top section</h1></div> <div class="main-div"> <div class="container"> <div class="row row-offcanvas row-offcanvas-left"> <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> <ul> <li class="activez"><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> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> <li><a href="#">Link 11</a></li> <li><a href="#">Link 12</a></li> <li><a href="#">Link 13</a></li> <li><a href="#">Link 14</a></li> <li><a href="#">Link 15</a></li> <li><a href="#">Link 16</a></li> <li><a href="#">Link 17</a></li> <li><a href="#">Link 18</a></li> <li><a href="#">Link 19</a></li> <li><a href="#">Link 20</a></li> <li><a href="#">Link 21</a></li> <li><a href="#">Link 22</a></li> <li><a href="#">Link 23</a></li> <li><a href="#">Link 24</a></li> <li><a href="#">Link 25</a></li> <li><a href="#">Link 26</a></li> <li><a href="#">Link 27</a></li> <li><a href="#">Link 28</a></li> <li><a href="#">Link 29</a></li> <li><a href="#">Link 30</a></li> <li><a href="#">Link 31</a></li> <li><a href="#">Link 32</a></li> <li><a href="#">Link 33</a></li> <li><a href="#">Link 34</a></li> <li><a href="#">Link 35</a></li> <li><a href="#">Link 36</a></li> <li><a href="#">Link 37</a></li> <li><a href="#">Link 38</a></li> <li><a href="#">Link 39</a></li> <li><a href="#">Link 40</a></li> <li><a href="#">Link 41</a></li> <li><a href="#">Link 42</a></li> <li><a href="#">Link 43</a></li> </ul> </div> <div class="col-xs-12 col-sm-9 content-div"> <p class="pull-left hide-p visible-xs"> <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button> </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p> </div> </div> </div> </div> <div class="row"><h1>Bottom section</h1></div> </div> </body> </html>For right to left (Arabic, etc) the code is:
<!doctype html> <html lang="en"> <head> <title>Test</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function () { jQuery('[data-toggle=offcanvas]').click(function () { // add this line to change the position of sidebar jQuery('.row-offcanvas').hasClass( "active" ) ? jQuery('.sidebar-offcanvas').css("position","absolute") : jQuery('.sidebar-offcanvas').css("position","relative"); // end modif $(".content-div").toggleClass("postion"); jQuery('.row-offcanvas').toggleClass('active') }); }); </script> </head> <body> <style> .main-div{ float:left; width:100%; overflow:hidden; } .postion{ position:relative; margin-right:-50%; } @media(max-width:767px){ .row-offcanvas { position: relative; -webkit-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; } .row-offcanvas-right { right: 0; } .row-offcanvas-left { left: 0; } .row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ } .row-offcanvas-left .sidebar-offcanvas { left: -50%; /* 6 columns */ } .row-offcanvas-right.active { right: 50%; /* 6 columns */ } .row-offcanvas-left.active { left: 50%; /* 6 columns */ } .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ } } </style> <div class="container-fluid"> <div class="row"><h1>Top section</h1></div> <div class="main-div"> <div class="container"> <div class="row row-offcanvas row-offcanvas-right"> <div class="col-xs-12 col-sm-9 content-div"> <p class="pull-right hide-p visible-xs"> <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button> </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p> </div> <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> <ul> <li class="activez"><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> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> <li><a href="#">Link 11</a></li> <li><a href="#">Link 12</a></li> <li><a href="#">Link 13</a></li> <li><a href="#">Link 14</a></li> <li><a href="#">Link 15</a></li> <li><a href="#">Link 16</a></li> <li><a href="#">Link 17</a></li> <li><a href="#">Link 18</a></li> <li><a href="#">Link 19</a></li> <li><a href="#">Link 20</a></li> <li><a href="#">Link 21</a></li> <li><a href="#">Link 22</a></li> <li><a href="#">Link 23</a></li> <li><a href="#">Link 24</a></li> <li><a href="#">Link 25</a></li> <li><a href="#">Link 26</a></li> <li><a href="#">Link 27</a></li> <li><a href="#">Link 28</a></li> <li><a href="#">Link 29</a></li> <li><a href="#">Link 30</a></li> <li><a href="#">Link 31</a></li> <li><a href="#">Link 32</a></li> <li><a href="#">Link 33</a></li> <li><a href="#">Link 34</a></li> <li><a href="#">Link 35</a></li> <li><a href="#">Link 36</a></li> <li><a href="#">Link 37</a></li> <li><a href="#">Link 38</a></li> <li><a href="#">Link 39</a></li> <li><a href="#">Link 40</a></li> <li><a href="#">Link 41</a></li> <li><a href="#">Link 42</a></li> <li><a href="#">Link 43</a></li> </ul> </div> </div> </div> </div> <div class="row"><h1>Bottom section</h1></div> </div> </body> </html>讨论(0)
加载中...
- 热议问题