Menu
Do we have events for the navbar-toggle that appears when we are on the smaller screen?
For instance,
$('#myDropdown').on('shown.bs.navbar-toggle', function () { // do something… }); $('#myDropdown').on('hide.bs.navbar-toggle', function () { // do something… }); html,
<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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="#">Home</a>--> </div> Otherwise, how can we detect if that navbar-toggle exists on the smaller screen?
519
To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".
Example Explained. Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.
The navbar-toggle methods emit the Collapse events:
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
Event Type Description show.bs.collapse This event fires immediately when the show instance method is called. shown.bs.collapse This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). hide.bs.collapse This event is fired immediately when the hide method has been called. hidden.bs.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). $('#myCollapsible').on('hidden.bs.collapse', function () { // do something… }) Docs: http://getbootstrap.com/javascript/#collapse
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
