On mobile devices, Bootstrap 3 by default reduces the navigation bar (navbar) to a hamburger icon. When clicking the hamburger, a JavaScript toggles the display of the navigation menu items - either expanding or collapsing the navbar. But
how to toggle the bootstrap mobile navbar collapse/expand without requiring JavaScript?
If this were possible, it would have nice performance advantages: users can already navigate before JavaScript is executed (a good plus on flaky mobile connections), and smaller projects may be able to drop the dependency on jQuery + bootstrap javascript entirely, saving around 45k on first page load. Plus, the site becomes more robust in case of JS errors - at least the page navigation stays usable.
Alternatively, one could re-implement the bootstrap JS without jQuery dependency - done here for the navbar.
For reference, this is what the static navbar top example looks like in mobile mode:
Yes, it's possible!
Getting the BS3 mobile navbar to toggle without JavaScript
creating a hidden checkbox that contains the navbar state (expand if checked)
changing the navbar button to a label for this invisible checkbox
use the CSS General Sibling Selector to toggle display of the navbar.
How to change CSS attributes without JavaScript was discussed before on SO, and the principle shown there 1. Applying this bootstrap is straightforward.
Try the Live demo thanks to rawgit or see it in production on flexponsive
A full demo is available on Github project bs3-navbar-collapse-without-javascript.
Browser Support
the CSS general sibling selector is widely supported
successfully tested in mobile: Android 5 and iOS 8
also works on desktop: Chrome 43 and Firefox 38
Limitations
dropdowns still require JS, if you decide to use them
Steps in detail
First, custom CSS you need to add:
/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
display: block;
}
/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
display:none
}
Then change the navbar HTML as follows:
<!-- insert checkbox -->
<input type="checkbox" id="navbar-toggle-cbox">
<!-- change the "hamburger" icon from being a button to a label for checkbox -->
<div class="navbar-header">
<label for="navbar-toggle-cbox" 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>
</label>
<!-- end label not button -->
Related
I have tabs menu bottom of the page (footer) which is set to as accordion on responsive (<768px) but it works broken if you try to click accordion links and that's why I want to expanded false on default all accordion must be false. and I'm using tabCollapse plugin and it makes my tab menu to accordion on responsive with this code
JS
$('.footer-tabs-to-accordion').tabCollapse();
I tried every way on css and jquery but I couldn't achieve because of I'm new in web design and keen on
You need to add the class .collapsed to the <a> that is using the .accordian-toggle class in your HTML. Something like this:
<a class="accordion-toggle collapsed" data-toggle="collapse">Popüler Oteller</a>
I am working with a page featuring a Bootstrap accordion. It works correctly, but I was asked to implement a feature whereby a specific collapsible element is "open" when linked from various other pages - so "www.whatever.tld#e2" would take you to the second element already opened. There was no problem getting something to behave like this, it's adequately covered by various other pages on StackOverflow and elsewhere. The implementation I tried was as follows:
$(window.location.hash + '.collapse').collapse('toggle');
This functions as desired, it opens the correct section of the accordion. However, after navigating to the page like this, it "locks" the page in that form - it no-longer responds to any clicks on accordion elements and you cannot close the opened element or open others. Nobody else seems to have been experiencing this problem or did not mention it if they did e.g. here:
Bootstrap Collapse - open the given id fragment
bootstrap-collapse.js hide and show events
I have attempted variations on this code, e.g.
var anchor = window.location.hash;
$(".collapse").collapse('hide');
$(anchor).collapse('show');
This behaves unexpectedly - all elements are forced open, and cannot close. Removing the second line fixes this issue, but then otherwise behaves as the original code I specified does - it opens the targeted element, but freezes the accordion.
The following is an excerpt of the structure of the accordion I am working with. I would prefer not to have to modify this unless I can't avoid it, since I'm trying to stick with organisational style guides and this accordion code is a standard accordion that people use on our CMS:
<div id="accordion-asset-listing" class="accordion" id="accordion" role="tabpanel">
<section class="accordion-group" role="tab" aria-selected="false">
<header class="accordion-heading">
<h3><a aria-controls="pharmacy" href="#pharmacy" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-asset-listing">Pharmacy</a></h3>
</header>
<div id="pharmacy" class="accordion-body collapse" aria-hidden="true" role="tabpanel">
<div class="accordion-inner">
<p><!-- content here --></p>
</div>
</div>
</section>
I am not amazing at JS or its use so any pointers people had to put me on the right track would be greatly appreciated.
Got it sorted in the end although I still don't understand why it originally broke. After jumping into the .js files that the site called upon, I ended up manually reconstructing the couple that I wanted and calling them in code. This is not a good solution but it has worked, at least.
Since the site (a university web-site managed on Squiz Matrix CMS) uses a sort of "customised version" of Bootstrap, Jquery and such that seems to strip out some elements of those things, there may have been some bugs introduced specific to our version of these things.
I am working on admin dashboard with html, css and javascripts. This is my first time working on it. I used bootstrap for the responsive layout and some bootstrap js (tabs, collaps). I also use chartjs for pie chart and line chart and sidr responsive menu. But the problem is with bootstrap tab and collaps function. They didn't work properly.When i click on the tab menu tabs are working but don't showing chart content in it. I spent lot of time to fix this. But i can't. I need your help.
Here is the link for the admin dashboard: http://demo.devkinz.com/admindashboard/
You are including the JavaScript, but aren't targeting the tab elements with it. From the docs, you also need to add in a bit of JavaScript to specifically target those tabs.
Alternatively, you should be able to add data-toggle="tab" to each of your dashboard_menu li elements.
In your code you have:
<ul class="list-inline pull-right" role="tablist">
<li class="active">Usage</li>
<li>Monthly</li>
</ul>
But you have no .tab-pane's with the id's: id="ussgemonth" & id="coletsmonth"
Not only do you have 2 missing .tab-pane with these ids -- since these are nested you have to follow the same structure as the parent.
Here is a link of the problem: http://jsfiddle.net/Rgd7Z/1/
The project uses ionicframework and angular(basically none yet) to create a simple swiping/sidemenu app. There are two pages that the user can swipe between with a header/navbar, then all of this moves over for the sidemenu.
I am attempting to use <ion-header-bar> in place of the <ion-nav-bar> so it will move with the sidemenu, but the buttons and text do not line up correctly. Am I missing some class on the buttons? I tried wrapping them all in on div with class="buttons" after checking the inspector, but that didn't work either.
Is the way that I am using the common method for a nav-bar that is going to be moved by the sidebar?
check out the updated jsfiddle
you needed to use <ion-header-bar type="bar-dark"> not <ion-header-bar="bar-dark">
Bootstrap has its own javascript version of checkboxes, radio buttons, collapse etc.
Example radio buttons:
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn">Left</button>
<button type="button" class="btn">Middle</button>
<button type="button" class="btn">Right</button>
</div>
This looks pretty great as long you have JS enabled. I like JS but I am also a NoScript user and I want that the page is also functional without JS.
As I can see twitter-bootstrap has no built-in fallback solution. I could use my own tags or show the bootstrap buttons only if JS is enabled but I somehow expected that bootstrap could handle this.
Only solution I have in mind is using standard radio buttons, checkboxes etc. and replacing/hiding them with some like code from above if JS is enabled.
I was also disappointed to see that some simple things like collapse have no fallback solution which would at least i.e. handle it with css3 transistions or at least just open all sub divs and keep them open.
Do you have some ideas/solutions for bootstrap without JS or is the only solutions writing a function to "hide radio buttons, show/create boostrap-divs if javascript enabled"?
You could handle it without javascript but that would require it to send it to a server side script or at least a form to submit it. As most user (I think about 99%) have javascript enabled, you should disable the function when no javascript is activated.