mirror of https://github.com/ColorlibHQ/AdminLTE
enhanced navbar dropdown & top-nav example
- added Dropdown.js - added .dropdown-submenu - added .dropdown-hover - added dropdown example & fixed card headers in pages/layout/top-nav.htmlpull/2220/head
REJack
parent
6d0fcbc8b1
commit
6874eb31d7
|
|
@ -6,6 +6,7 @@ import DirectChat from './DirectChat'
|
|||
import TodoList from './TodoList'
|
||||
import CardWidget from './CardWidget'
|
||||
import CardRefresh from './CardRefresh'
|
||||
import Dropdown from './Dropdown'
|
||||
|
||||
export {
|
||||
ControlSidebar,
|
||||
|
|
@ -15,5 +16,6 @@ export {
|
|||
DirectChat,
|
||||
TodoList,
|
||||
CardWidget,
|
||||
CardRefresh
|
||||
CardRefresh,
|
||||
Dropdown
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE Dropdown.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
const Dropdown = (($) => {
|
||||
/**
|
||||
* Constants
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
const NAME = 'Dropdown'
|
||||
const DATA_KEY = 'lte.dropdown'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const Selector = {
|
||||
DROPDOWN_MENU: 'ul.dropdown-menu',
|
||||
DROPDOWN_TOGGLE: '[data-toggle="dropdown"]',
|
||||
}
|
||||
|
||||
const ClassName = {
|
||||
DROPDOWN_HOVER: '.dropdown-hover'
|
||||
}
|
||||
|
||||
const Default = {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Class Definition
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
class Dropdown {
|
||||
constructor(element, config) {
|
||||
this._config = config
|
||||
this._element = element
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
toggleSubmenu() {
|
||||
this._element.siblings().show().toggleClass("show");
|
||||
|
||||
if (! this._element.next().hasClass('show')) {
|
||||
this._element.parents('.dropdown-menu').first().find('.show').removeClass("show").hide();
|
||||
}
|
||||
|
||||
this._element.parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
|
||||
$('.dropdown-submenu .show').removeClass("show").hide();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
const _config = $.extend({}, Default, $(this).data())
|
||||
|
||||
if (!data) {
|
||||
data = new Dropdown($(this), _config)
|
||||
$(this).data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (config === 'toggleSubmenu') {
|
||||
data[config]()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Data API
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
$(Selector.DROPDOWN_MENU + ' ' + Selector.DROPDOWN_TOGGLE).on("click", function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
Dropdown._jQueryInterface.call($(this), 'toggleSubmenu')
|
||||
});
|
||||
|
||||
// $(Selector.SIDEBAR + ' a').on('focusin', () => {
|
||||
// $(Selector.MAIN_SIDEBAR).addClass(ClassName.SIDEBAR_FOCUSED);
|
||||
// })
|
||||
|
||||
// $(Selector.SIDEBAR + ' a').on('focusout', () => {
|
||||
// $(Selector.MAIN_SIDEBAR).removeClass(ClassName.SIDEBAR_FOCUSED);
|
||||
// })
|
||||
|
||||
/**
|
||||
* jQuery API
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
$.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
|
||||
|
|
@ -37,6 +37,38 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Dropdown Submenu
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
|
||||
& > a:after {
|
||||
@include caret-right;
|
||||
float: right;
|
||||
margin-left: .5rem;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
& > .dropdown-menu {
|
||||
left: 100%;
|
||||
margin-left: 0px;
|
||||
margin-top: 0px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown Hover
|
||||
.dropdown-hover {
|
||||
&.nav-item.dropdown:hover,
|
||||
.dropdown-submenu:hover,
|
||||
&.dropdown-submenu:hover {
|
||||
> ul.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Dropdown Sizes
|
||||
.dropdown-menu-xl {
|
||||
max-width: 420px;
|
||||
|
|
|
|||
|
|
@ -40,6 +40,39 @@ scratch. This page gets rid of all links and provides the needed markup only.
|
|||
<li class="nav-item d-none d-sm-inline-block">
|
||||
<a href="#" class="nav-link">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a id="dropdownSubMenu1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">Dropdown</a>
|
||||
<ul aria-labelledby="dropdownSubMenu1" class="dropdown-menu border-0 shadow">
|
||||
<li><a href="#" class="dropdown-item">Some action </a></li>
|
||||
<li><a href="#" class="dropdown-item">Some other action</a></li>
|
||||
|
||||
<li class="dropdown-divider"></li>
|
||||
|
||||
<!-- Level two dropdown-->
|
||||
<li class="dropdown-submenu">
|
||||
<a id="dropdownSubMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-item dropdown-toggle">Hover for action</a>
|
||||
<ul aria-labelledby="dropdownSubMenu2" class="dropdown-menu border-0 shadow">
|
||||
<li>
|
||||
<a tabindex="-1" href="#" class="dropdown-item">level 2</a>
|
||||
</li>
|
||||
|
||||
<!-- Level three dropdown-->
|
||||
<li class="dropdown-submenu">
|
||||
<a id="dropdownSubMenu3" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-item dropdown-toggle">level 2</a>
|
||||
<ul aria-labelledby="dropdownSubMenu3" class="dropdown-menu border-0 shadow">
|
||||
<li><a href="#" class="dropdown-item">3rd level</a></li>
|
||||
<li><a href="#" class="dropdown-item">3rd level</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- End Level three -->
|
||||
|
||||
<li><a href="#" class="dropdown-item">level 2</a></li>
|
||||
<li><a href="#" class="dropdown-item">level 2</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- End Level two -->
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- SEARCH FORM -->
|
||||
|
|
@ -207,7 +240,7 @@ scratch. This page gets rid of all links and provides the needed markup only.
|
|||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="m-0">Featured</h5>
|
||||
<h5 class="card-title m-0">Featured</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Special title treatment</h6>
|
||||
|
|
@ -219,7 +252,7 @@ scratch. This page gets rid of all links and provides the needed markup only.
|
|||
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card-header">
|
||||
<h5 class="m-0">Featured</h5>
|
||||
<h5 class="card-title m-0">Featured</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Special title treatment</h6>
|
||||
|
|
@ -267,6 +300,6 @@ scratch. This page gets rid of all links and provides the needed markup only.
|
|||
<!-- Bootstrap 4 -->
|
||||
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- AdminLTE App -->
|
||||
<!-- <script src="../../dist/js/adminlte.min.js"></script> -->
|
||||
<script src="../../dist/js/adminlte.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue