Bootstrap3 Left Sidebar Right Toggle
Question
I want to develop a web application with bootstrap.I have a left sidebar menu. I want that menu toggle from right while this page is opened from phone browser.
I want to create like this: https://formstone.it/
My example is here: https://jsfiddle.net/gd39damu/3/
html code:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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>
</nav>
<div class="container">
</div>
<div class="sidebar">
<div class="navigation">
<ul>
<li><a href="aa">aa</a></li>
<li><a href="bb">bb </a></li>
<li><a href="cc">cc</a></li>
<li><a href="dd">dd</a></li>
</ul>
</div>
</div> <!-- // Sidebar -->
</body>
css code:
@import url('https://getbootstrap.com/dist/css/bootstrap.min.css');
.sidebar {
background-color: #aaaaaa;
}
@media (min-width: 800px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
}
.navigation {
width: 240px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 5;
}
}
.navigation {
background: #455a64;
overflow-y: auto;
padding: 30px;
}
@media (max-width: 800px){
.sidebar {
display: none;
}
}
4 answers
solution1
1 2016-04-05 11:30:16
I recommend using another jQuery Plugin for that, to make the menu smoother: http://ascott1.github.io/bigSlide.js/
It's a lightweight lib with around 1kb size.
solution2
1 ACCPTED 2016-04-05 12:09:57
我已经使用jQuery切换和CSS来实现此目的。您可以在pastebin上查看完整的代码
solution3
0 2016-04-05 11:08:16
与此一起使用jQuery切换功能
if ($(window).width() < 768){});
solution4
0 2016-04-05 12:53:18
Use an off-canvas overlay menu for Bootstrap.
Example: http://codeply.com/go/zyKyFfeUcH
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.