mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
add dropdown
This commit is contained in:
fat
parent
8bab38bb71
commit
bbb97a8660
11
Gruntfile.js
11
Gruntfile.js
@ -63,11 +63,12 @@ module.exports = function (grunt) {
|
||||
},
|
||||
dist: {
|
||||
files: {
|
||||
'js/dist/util.js': 'js/src/util.js',
|
||||
'js/dist/alert.js': 'js/src/alert.js',
|
||||
'js/dist/button.js': 'js/src/button.js',
|
||||
'js/dist/carousel.js': 'js/src/carousel.js',
|
||||
'js/dist/collapse.js': 'js/src/collapse.js',
|
||||
'js/dist/util.js' : 'js/src/util.js',
|
||||
'js/dist/alert.js' : 'js/src/alert.js',
|
||||
'js/dist/button.js' : 'js/src/button.js',
|
||||
'js/dist/carousel.js' : 'js/src/carousel.js',
|
||||
'js/dist/collapse.js' : 'js/src/collapse.js',
|
||||
'js/dist/dropdown.js' : 'js/src/dropdown.js'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
254
js/dist/dropdown.js
vendored
Normal file
254
js/dist/dropdown.js
vendored
Normal file
@ -0,0 +1,254 @@
|
||||
'use strict';
|
||||
|
||||
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0): dropdown.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Dropdown = (function ($) {
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var NAME = 'dropdown';
|
||||
var VERSION = '4.0.0';
|
||||
var DATA_KEY = 'bs.dropdown';
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
|
||||
var Event = {
|
||||
HIDE: 'hide.bs.dropdown',
|
||||
HIDDEN: 'hidden.bs.dropdown',
|
||||
SHOW: 'show.bs.dropdown',
|
||||
SHOWN: 'shown.bs.dropdown',
|
||||
CLICK: 'click.bs.dropdown',
|
||||
KEYDOWN: 'keydown.bs.dropdown.data-api',
|
||||
CLICK_DATA: 'click.bs.dropdown.data-api'
|
||||
};
|
||||
|
||||
var ClassName = {
|
||||
BACKDROP: 'dropdown-backdrop',
|
||||
DISABLED: 'disabled',
|
||||
OPEN: 'open'
|
||||
};
|
||||
|
||||
var Selector = {
|
||||
BACKDROP: '.dropdown-backdrop',
|
||||
DATA_TOGGLE: '[data-toggle="dropdown"]',
|
||||
FORM_CHILD: '.dropdown form',
|
||||
ROLE_MENU: '[role="menu"]',
|
||||
ROLE_LISTBOX: '[role="listbox"]',
|
||||
NAVBAR_NAV: '.navbar-nav',
|
||||
VISIBLE_ITEMS: '[role="menu"] li:not(.disabled) a, ' + '[role="listbox"] li:not(.disabled) a'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Dropdown = (function () {
|
||||
function Dropdown(element) {
|
||||
_classCallCheck(this, Dropdown);
|
||||
|
||||
$(element).on(Event.CLICK, this.toggle);
|
||||
}
|
||||
|
||||
_createClass(Dropdown, [{
|
||||
key: 'toggle',
|
||||
|
||||
// public
|
||||
|
||||
value: function toggle() {
|
||||
if (this.disabled || $(this).hasClass(ClassName.DISABLED)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var parent = Dropdown._getParentFromElement(this);
|
||||
var isActive = $(parent).hasClass(ClassName.OPEN);
|
||||
|
||||
Dropdown._clearMenus();
|
||||
|
||||
if (isActive) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ('ontouchstart' in document.documentElement && !$(parent).closest(Selector.NAVBAR_NAV).length) {
|
||||
|
||||
// if mobile we use a backdrop because click events don't delegate
|
||||
var dropdown = document.createElement('div');
|
||||
dropdown.className = ClassName.BACKDROP;
|
||||
$(dropdown).insertBefore(this);
|
||||
$(dropdown).on('click', Dropdown._clearMenus);
|
||||
}
|
||||
|
||||
var relatedTarget = { 'relatedTarget': this };
|
||||
var showEvent = $.Event(Event.SHOW, relatedTarget);
|
||||
|
||||
$(parent).trigger(showEvent);
|
||||
|
||||
if (showEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.focus();
|
||||
this.setAttribute('aria-expanded', 'true');
|
||||
|
||||
$(parent).toggleClass(ClassName.OPEN);
|
||||
$(parent).trigger(Event.SHOWN, relatedTarget);
|
||||
|
||||
return false;
|
||||
}
|
||||
}], [{
|
||||
key: '_jQueryInterface',
|
||||
|
||||
// static
|
||||
|
||||
value: function _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
var data = $(this).data(DATA_KEY);
|
||||
|
||||
if (!data) {
|
||||
$(this).data(DATA_KEY, data = new Dropdown(this));
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
data[config].call(this);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: '_clearMenus',
|
||||
value: function _clearMenus(event) {
|
||||
if (event && event.which === 3) {
|
||||
return;
|
||||
}
|
||||
|
||||
var backdrop = $(Selector.BACKDROP)[0];
|
||||
if (backdrop) {
|
||||
backdrop.parentNode.removeChild(backdrop);
|
||||
}
|
||||
|
||||
var toggles = $.makeArray($(Selector.DATA_TOGGLE));
|
||||
|
||||
for (var i = 0; i < toggles.length; i++) {
|
||||
var _parent = Dropdown._getParentFromElement(toggles[i]);
|
||||
var relatedTarget = { 'relatedTarget': toggles[i] };
|
||||
|
||||
if (!$(_parent).hasClass(ClassName.OPEN)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (event && event.type === 'click' && /input|textarea/i.test(event.target.tagName) && $.contains(_parent, event.target)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var hideEvent = $.Event(Event.HIDE, relatedTarget);
|
||||
$(_parent).trigger(hideEvent);
|
||||
if (hideEvent.isDefaultPrevented()) {
|
||||
continue;
|
||||
}
|
||||
|
||||
toggles[i].setAttribute('aria-expanded', 'false');
|
||||
|
||||
$(_parent).removeClass(ClassName.OPEN).trigger(Event.HIDDEN, relatedTarget);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_getParentFromElement',
|
||||
value: function _getParentFromElement(element) {
|
||||
var parent = undefined;
|
||||
var selector = Util.getSelectorFromElement(element);
|
||||
|
||||
if (selector) {
|
||||
parent = $(selector)[0];
|
||||
}
|
||||
|
||||
return parent || element.parentNode;
|
||||
}
|
||||
}, {
|
||||
key: '_dataApiKeydownHandler',
|
||||
value: function _dataApiKeydownHandler(event) {
|
||||
if (!/(38|40|27|32)/.test(event.which) || /input|textarea/i.test(event.target.tagName)) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (this.disabled || $(this).hasClass(ClassName.DISABLED)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var parent = Dropdown._getParentFromElement(this);
|
||||
var isActive = $(parent).hasClass(ClassName.OPEN);
|
||||
|
||||
if (!isActive && event.which !== 27 || isActive && event.which === 27) {
|
||||
|
||||
if (event.which === 27) {
|
||||
var toggle = $(parent).find(Selector.DATA_TOGGLE)[0];
|
||||
$(toggle).trigger('focus');
|
||||
}
|
||||
|
||||
$(this).trigger('click');
|
||||
return;
|
||||
}
|
||||
|
||||
var items = $.makeArray($(Selector.VISIBLE_ITEMS));
|
||||
|
||||
items = items.filter(function (item) {
|
||||
return item.offsetWidth || item.offsetHeight;
|
||||
});
|
||||
|
||||
if (!items.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var index = items.indexOf(event.target);
|
||||
|
||||
if (event.which === 38 && index > 0) index--; // up
|
||||
if (event.which === 40 && index < items.length - 1) index++; // down
|
||||
if (! ~index) index = 0;
|
||||
|
||||
items[index].focus();
|
||||
}
|
||||
}]);
|
||||
|
||||
return Dropdown;
|
||||
})();
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$(document).on(Event.KEYDOWN, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler).on(Event.KEYDOWN, Selector.ROLE_MENU, Dropdown._dataApiKeydownHandler).on(Event.KEYDOWN, Selector.ROLE_LISTBOX, Dropdown._dataApiKeydownHandler).on(Event.CLICK_DATA, Dropdown._clearMenus).on(Event.CLICK_DATA, Selector.DATA_TOGGLE, Dropdown.prototype.toggle).on(Event.CLICK_DATA, Selector.FORM_CHILD, function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Dropdown._jQueryInterface;
|
||||
$.fn[NAME].Constructor = Dropdown;
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return Dropdown._jQueryInterface;
|
||||
};
|
||||
|
||||
return Dropdown;
|
||||
})(jQuery);
|
||||
//# sourceMappingURL=dropdown.js.map
|
||||
1
js/dist/dropdown.js.map
vendored
Normal file
1
js/dist/dropdown.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
261
js/src/dropdown.js
Normal file
261
js/src/dropdown.js
Normal file
@ -0,0 +1,261 @@
|
||||
import Util from './util'
|
||||
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0): dropdown.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const Dropdown = (($) => {
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME = 'dropdown'
|
||||
const VERSION = '4.0.0'
|
||||
const DATA_KEY = 'bs.dropdown'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const Event = {
|
||||
HIDE : 'hide.bs.dropdown',
|
||||
HIDDEN : 'hidden.bs.dropdown',
|
||||
SHOW : 'show.bs.dropdown',
|
||||
SHOWN : 'shown.bs.dropdown',
|
||||
CLICK : 'click.bs.dropdown',
|
||||
KEYDOWN : 'keydown.bs.dropdown.data-api',
|
||||
CLICK_DATA : 'click.bs.dropdown.data-api'
|
||||
}
|
||||
|
||||
const ClassName = {
|
||||
BACKDROP : 'dropdown-backdrop',
|
||||
DISABLED : 'disabled',
|
||||
OPEN : 'open'
|
||||
}
|
||||
|
||||
const Selector = {
|
||||
BACKDROP : '.dropdown-backdrop',
|
||||
DATA_TOGGLE : '[data-toggle="dropdown"]',
|
||||
FORM_CHILD : '.dropdown form',
|
||||
ROLE_MENU : '[role="menu"]',
|
||||
ROLE_LISTBOX : '[role="listbox"]',
|
||||
NAVBAR_NAV : '.navbar-nav',
|
||||
VISIBLE_ITEMS : '[role="menu"] li:not(.disabled) a, '
|
||||
+ '[role="listbox"] li:not(.disabled) a'
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
class Dropdown {
|
||||
|
||||
constructor(element) {
|
||||
$(element).on(Event.CLICK, this.toggle)
|
||||
}
|
||||
|
||||
// public
|
||||
|
||||
toggle() {
|
||||
if (this.disabled || $(this).hasClass(ClassName.DISABLED)) {
|
||||
return
|
||||
}
|
||||
|
||||
let parent = Dropdown._getParentFromElement(this)
|
||||
let isActive = $(parent).hasClass(ClassName.OPEN)
|
||||
|
||||
Dropdown._clearMenus()
|
||||
|
||||
if (isActive) {
|
||||
return false
|
||||
}
|
||||
|
||||
if ('ontouchstart' in document.documentElement &&
|
||||
(!$(parent).closest(Selector.NAVBAR_NAV).length)) {
|
||||
|
||||
// if mobile we use a backdrop because click events don't delegate
|
||||
let dropdown = document.createElement('div')
|
||||
dropdown.className = ClassName.BACKDROP
|
||||
$(dropdown).insertBefore(this)
|
||||
$(dropdown).on('click', Dropdown._clearMenus)
|
||||
}
|
||||
|
||||
let relatedTarget = { relatedTarget : this }
|
||||
let showEvent = $.Event(Event.SHOW, relatedTarget)
|
||||
|
||||
$(parent).trigger(showEvent)
|
||||
|
||||
if (showEvent.isDefaultPrevented()) {
|
||||
return
|
||||
}
|
||||
|
||||
this.focus()
|
||||
this.setAttribute('aria-expanded', 'true')
|
||||
|
||||
$(parent).toggleClass(ClassName.OPEN)
|
||||
$(parent).trigger(Event.SHOWN, relatedTarget)
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
|
||||
// static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
|
||||
if (!data) {
|
||||
$(this).data(DATA_KEY, (data = new Dropdown(this)))
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
data[config].call(this)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
static _clearMenus(event) {
|
||||
if (event && event.which === 3) {
|
||||
return
|
||||
}
|
||||
|
||||
let backdrop = $(Selector.BACKDROP)[0]
|
||||
if (backdrop) {
|
||||
backdrop.parentNode.removeChild(backdrop)
|
||||
}
|
||||
|
||||
let toggles = $.makeArray($(Selector.DATA_TOGGLE))
|
||||
|
||||
for (let i = 0; i < toggles.length; i++) {
|
||||
let parent = Dropdown._getParentFromElement(toggles[i])
|
||||
let relatedTarget = { relatedTarget : toggles[i] }
|
||||
|
||||
if (!$(parent).hasClass(ClassName.OPEN)) {
|
||||
continue
|
||||
}
|
||||
|
||||
if (event && event.type === 'click' &&
|
||||
(/input|textarea/i.test(event.target.tagName)) &&
|
||||
($.contains(parent, event.target))) {
|
||||
continue
|
||||
}
|
||||
|
||||
let hideEvent = $.Event(Event.HIDE, relatedTarget)
|
||||
$(parent).trigger(hideEvent)
|
||||
if (hideEvent.isDefaultPrevented()) {
|
||||
continue
|
||||
}
|
||||
|
||||
toggles[i].setAttribute('aria-expanded', 'false')
|
||||
|
||||
$(parent)
|
||||
.removeClass(ClassName.OPEN)
|
||||
.trigger(Event.HIDDEN, relatedTarget)
|
||||
}
|
||||
}
|
||||
|
||||
static _getParentFromElement(element) {
|
||||
let parent
|
||||
let selector = Util.getSelectorFromElement(element)
|
||||
|
||||
if (selector) {
|
||||
parent = $(selector)[0]
|
||||
}
|
||||
|
||||
return parent || element.parentNode
|
||||
}
|
||||
|
||||
static _dataApiKeydownHandler(event) {
|
||||
if (!/(38|40|27|32)/.test(event.which) ||
|
||||
/input|textarea/i.test(event.target.tagName)) {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
if (this.disabled || $(this).hasClass(ClassName.DISABLED)) {
|
||||
return
|
||||
}
|
||||
|
||||
let parent = Dropdown._getParentFromElement(this)
|
||||
let isActive = $(parent).hasClass(ClassName.OPEN)
|
||||
|
||||
if ((!isActive && event.which !== 27) ||
|
||||
(isActive && event.which === 27)) {
|
||||
|
||||
if (event.which === 27) {
|
||||
let toggle = $(parent).find(Selector.DATA_TOGGLE)[0]
|
||||
$(toggle).trigger('focus')
|
||||
}
|
||||
|
||||
$(this).trigger('click')
|
||||
return
|
||||
}
|
||||
|
||||
let items = $.makeArray($(Selector.VISIBLE_ITEMS))
|
||||
|
||||
items = items.filter((item) => {
|
||||
return item.offsetWidth || item.offsetHeight
|
||||
})
|
||||
|
||||
if (!items.length) {
|
||||
return
|
||||
}
|
||||
|
||||
let index = items.indexOf(event.target)
|
||||
|
||||
if (event.which === 38 && index > 0) index-- // up
|
||||
if (event.which === 40 && index < items.length - 1) index++ // down
|
||||
if (!~index) index = 0
|
||||
|
||||
items[index].focus()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$(document)
|
||||
.on(Event.KEYDOWN, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler)
|
||||
.on(Event.KEYDOWN, Selector.ROLE_MENU, Dropdown._dataApiKeydownHandler)
|
||||
.on(Event.KEYDOWN, Selector.ROLE_LISTBOX, Dropdown._dataApiKeydownHandler)
|
||||
.on(Event.CLICK_DATA, Dropdown._clearMenus)
|
||||
.on(Event.CLICK_DATA, Selector.DATA_TOGGLE, Dropdown.prototype.toggle)
|
||||
.on(Event.CLICK_DATA, Selector.FORM_CHILD, function (e) {
|
||||
e.stopPropagation()
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Dropdown._jQueryInterface
|
||||
$.fn[NAME].Constructor = Dropdown
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Dropdown._jQueryInterface
|
||||
}
|
||||
|
||||
return Dropdown
|
||||
|
||||
})(jQuery)
|
||||
|
||||
export default Dropdown
|
||||
@ -135,9 +135,9 @@
|
||||
<script src="../../js/dist/button.js"></script>
|
||||
<script src="../../js/dist/carousel.js"></script>
|
||||
<script src="../../js/dist/collapse.js"></script>
|
||||
<script src="../../js/dist/dropdown.js"></script>
|
||||
|
||||
<!-- Old Plugin sources -->
|
||||
<script src="../../js/dropdown.js"></script>
|
||||
<script src="../../js/modal.js"></script>
|
||||
<script src="../../js/scrollspy.js"></script>
|
||||
<script src="../../js/tab.js"></script>
|
||||
|
||||
@ -22,21 +22,15 @@
|
||||
<h1>Dropdown <small>Bootstrap Visual Test</small></h1>
|
||||
</div>
|
||||
|
||||
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
|
||||
<nav id="navbar-example" class="navbar navbar-default navbar-static-top" role="navigation">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-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="#">Project Name</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse bs-example-js-navbar-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="dropdown">
|
||||
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
|
||||
☰
|
||||
</button>
|
||||
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
|
||||
<ul class="nav navbar-nav pull-left">
|
||||
<li class="dropdown nav-item">
|
||||
<a id="drop1" href="#" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
|
||||
@ -45,8 +39,8 @@
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
|
||||
<li class="dropdown nav-item">
|
||||
<a href="#" id="drop2" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
|
||||
@ -56,9 +50,9 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li id="fat-menu" class="dropdown">
|
||||
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
|
||||
<ul class="nav navbar-nav pull-right">
|
||||
<li id="fat-menu" class="dropdown nav-item">
|
||||
<a href="#" id="drop3" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
|
||||
@ -73,9 +67,9 @@
|
||||
</nav>
|
||||
|
||||
<ul class="nav nav-pills">
|
||||
<li class="active"><a href="#">Regular link</a></li>
|
||||
<li class="dropdown">
|
||||
<a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
|
||||
<li class="active nav-item"><a href="#" class="nav-link">Regular link</a></li>
|
||||
<li class="dropdown nav-item">
|
||||
<a id="drop4" class="nav-link" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
|
||||
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
|
||||
@ -84,8 +78,8 @@
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
|
||||
<li class="dropdown nav-item">
|
||||
<a id="drop5" class="nav-link" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
|
||||
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
|
||||
@ -100,9 +94,9 @@
|
||||
|
||||
<!-- JavaScript Includes -->
|
||||
<script src="../vendor/jquery.min.js"></script>
|
||||
<script src="../../transition.js"></script>
|
||||
<script src="../../dropdown.js"></script>
|
||||
<script src="../../collapse.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/dropdown.js"></script>
|
||||
<script src="../../dist/collapse.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user