A responsive sidebar plugin for bootstrap 3. if your menus are too big to fit into a horizontal menubar, or you need to have a responsive sidebar that is compatible with bootstrap, then this is the plugin for you.
The plugin is amazing, unfortunately in IE8 plugin doesn't work; is there a workaround to fix it?
Thanks!
a.
Navbar:
<div class="navbar navbar-inverse navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle toggle-left hidden-md hidden-lg" data-toggle="sidebar" data-target=".sidebar-left">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">test</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
Sidebar:
<div class="container-fluid">
<div class="row">
<div class="col-xs-7 col-sm-3 col-md-2 sidebar sidebar-left sidebar-animate sidebar-md-show">
<ul class="nav navbar-stacked">
<li>
Steps to reproduce:
would be very helpful
It occurs when sidebar content is longer than window:
http://stackoverflow.com/questions/36132020/bootstrap-columns-has-separate-scrollbars/36138241#36138241
May I suggest that for the zip downloaded version that the files are fetched from CDN? Makes it easier for quick demo locally....
Demo.html:
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="dist/js/sidebar.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="dist/js/sidebar.css"/>
</head>Index.html:
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="dist/js/sidebar.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="dist/css/sidebar.css"/>
</head>With the latest changes in code, Right sidebar not working. I checked the code and found mistake in sidebar.css, https://github.com/asyraf9/bootstrap-sidebar/blob/master/dist/css/sidebar.css#L151
It should be '100%' not '-100%'
What if one wants to keep the toggle functionnality, but only set default state to open on large screens, and closed on mobile ?
I'm trying to modify the code of Bootstrap Sidebar:
http://jsfiddle.net/samtux/8djegrp6/35/
To display a fixed button that show and hide the menu sidebar. The start button with the plus sign when it is hidden and less when it is shown.
What I can suggest to achieve the fixed display button on the panel?
Thank you.
hi,
it looks like we get borderline effect with following lines
var startEvent = $.Event('hide.bs.sidebar')
this.$element.trigger(startEvent)at the end, style="display:none" is added on dom element.
I do not know if jquery hide() method is called...but as this event is not used in your code, I propose to remove it.
PR coming
I can hide the sidebar in printouts by using the "hidden-print" class. The problem is that due to the offsets, my page content is positioned offset to the right, as if the sidebar were there.
Any thoughts on how to print the page with the sidebar hidden and the page content taking the full width of the page and aligned to the left?
<div class="container-fluid">
<div class="row">
<div class="col-xs-7 col-sm-3 col-md-3 col-lg-2 sidebar sidebar-left sidebar-animate sidebar-sm-show hidden-print">
<ul class="nav navbar-stacked" id="ulMenu" runat="server">
<asp:Literal ID="ltrMenu" EnableViewState="false" runat="server"></asp:Literal>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-3 col-lg-10 col-lg-offset-2 main">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.