Bootstrap dropdown menu
description
By Dropdown (dropdown menu) JavaScript plug-in, you can create a drop-down menu in Bootstrap Dropdown in any object. In the navigation bar , navigation (tags and labels capsules) provides a drop-down menu to create a complete support.
When using the plug-in, what is required
You must reference jquery.js and bootstrap-dropdown.js file. Both files are located in the twitter-bootstrap-v2 / docs / assets / js folder. You can then call the javascript drop-down menu. The following example demonstrates how to do this.
Examples
Examples
<Div class = "navbar-inner">
<Div class = "container">
<Ul class = "nav">
<a class="brand" href="#"> w3big </a>
<Li class = "active"> <a href="#"> Home </a> </ li>
<Li> <a href="#"> Blog </a> </ li>
<Li> <a href="#"> About </a> </ li>
<Li> <a href="#"> Contact </a> </ li>
<Li class = "dropdown" id = "accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> Tutorials <b class = "caret"> </ b> </a>
<Ul class = "dropdown-menu">
<Li> <a href="#"> PHP </a> </ li>
<Li> <a href="#"> MySQL </a> </ li>
<Li class = "divider"> </ li>
<Li> <a href="#"> JavaScript </a> </ li>
<Li> <a href="#"> HTML5 </a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Div>
<Div class = "container-fluid">
<H1> Dropdown Example Examples drop-down menu </ h1>
</ Div>
<Script type = "text / javascript" src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / jquery.js"> </ script>
<Script type = "text / javascript" src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-dropdown.js"> </ script>
<Script type = "text / javascript">
$ (Document) .ready (function () {
. $ ( '. Dropdown-toggle') dropdown ();
});
</ Script>
View online examples
In the example above, we demonstrate how to create plug-ins created by JavaScript drop-down menu on the navigation bar.
You can also apply Dropdown (dropdown menu) JavaScript plug-in navigation (label and capsule tab). The following example demonstrates how to do this.
Examples
Examples
<Li class = "dropdown all-camera-dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Tutorials
<B class = "caret"> </ b>
</a>
<Ul class = "dropdown-menu">
<Li data-filter-camera-type = "all"> <a data-toggle="tab" href="#"> HTML5 </a> </ li>
<Li data-filter-camera-type = "Alpha"> <a data-toggle="tab" href="#"> PHP </a> </ li>
<Li data-filter-camera-type = "Zed"> <a data-toggle="tab" href="#"> MySQL </a> </ li>
<Li data-filter-camera-type = "Bravo"> <a data-toggle="tab" href="#"> JavaScript </a> </ li>
</ Ul>
</ Li> </ ul>
<Script type = "text / javascript" src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / jquery.js"> </ script>
<Script type = "text / javascript" src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-dropdown.js"> </ script>
View online examples
Click here to download the tutorial to use all the HTML, CSS, JS and image files.