Glavo/minimal-mistakes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace priority plus navigation with dropdowns

Browse Source
This commit is contained in:
Michael Rose 2019-04-10 10:37:59 -04:00
parent 995225b7f3
commit 075482c383
12 changed files with 772 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
_includes/masthead.html
View File

@ -7,23 +7,17 @@
<div class="masthead">
<div class="masthead__inner-wrap">
<div class="masthead__menu">
<nav id="site-nav" class="greedy-nav">
{% unless logo_path == empty %}
<a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt=""></a>
{% endunless %}
<a class="site-title" href="{{ '/' | relative_url }}">{{ site.masthead_title | default: site.title }}</a>
<ul class="visible-links">
{%- for link in site.data.navigation.main -%}
{%- if link.url contains '://' -%}
{%- assign url = link.url -%}
{%- else -%}
{%- assign url = link.url | relative_url -%}
{%- endif -%}
<li class="masthead__menu-item">
<a href="{{ url }}" {% if link.description %}title="{{ link.description }}"{% endif %}>{{ link.title }}</a>
</li>
{%- endfor -%}
</ul>
<nav id="site-nav" class="navbar">
<div class="navbar-header">
{% unless logo_path == empty %}
<a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt=""></a>
{% endunless %}
<a class="site-title" href="{{ '/' | relative_url }}">{{ site.masthead_title | default: site.title }}</a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#masthead-navbar-collapse" aria-expanded="false">
<span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu" }}</span>
<div class="navicon"></div>
</button>
{% if site.search == true %}
<button class="search__toggle" type="button">
<span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
@ -32,11 +26,32 @@
</svg>
</button>
{% endif %}
<button class="greedy-nav__toggle hidden" type="button">
<span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu" }}</span>
<div class="navicon"></div>
</button>
<ul class="hidden-links hidden"></ul>
<div id="masthead-navbar-collapse" class="collapse navbar-collapse">
<ul class="navbar-nav">
{%- for link in site.data.navigation.main -%}
{%- if link.url contains '://' -%}
{%- assign url = link.url -%}
{%- else -%}
{%- assign url = link.url | relative_url -%}
{%- endif -%}
<li class="{% if link.children != null %}dropdown{% endif %}">
<a href="{{ url }}" {% if link.description %}title="{{ link.description }}"{% endif %} {% if link.children != null %}class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"{% endif %}>{{ link.title }} {% if link.children != null %}<i class="fas fa-angle-down"></i>{% endif %}</a>
{% if link.children != null %}
<ul class="dropdown-menu">
{% for child in link.children %}
{% if child.url contains "://" %}
{% assign child_url = child.url %}
{% else %}
{% assign child_url = child.url | relative_url %}
{% endif %}
<li><a href="{{ child_url }}" class="{{ active }}">{{ child.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{%- endfor -%}
</ul>
</div>
</nav>
</div>
</div>

1
_sass/minimal-mistakes.scss
View File

@ -23,6 +23,7 @@
/* Components */
@import "minimal-mistakes/buttons";
@import "minimal-mistakes/dropdowns";
@import "minimal-mistakes/notices";
@import "minimal-mistakes/masthead";
@import "minimal-mistakes/navigation";

142
_sass/minimal-mistakes/_dropdowns.scss Normal file
View File

@ -0,0 +1,142 @@
//
// Dropdown menus
// --------------------------------------------------
$zindex-dropdown: 1000;
$transition-collapse: height 0.35s ease !default;
.collapse {
&:not(.show) {
display: none;
}
&.in {
display: block;
}
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: $transition-collapse;
transition: $transition-collapse;
}
// The dropdown wrapper (div)
.dropdown {
position: relative;
}
// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus {
outline: 0;
}
// The dropdown menu (ul)
.dropdown-menu {
display: none; // none by default, but block on "open" of the menu
position: absolute;
top: 100%;
right: 0;
z-index: $zindex-dropdown;
float: left;
min-width: 160px;
padding: 5px;
margin: 15px 0 0; // override default ul
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none;
border: 1px solid $border-color;
border-radius: $border-radius;
background: $background-color;
background-clip: padding-box;
-webkit-box-shadow: 0 2px 4px 0 rgba(#000, 0.16),
0 2px 10px 0 rgba(#000, 0.12);
box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
&:before {
content: "";
position: absolute;
top: -11px;
right: 10px;
width: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: $border-color transparent;
display: block;
z-index: 0;
}
&:after {
content: "";
position: absolute;
top: -10px;
right: 10px;
width: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: $background-color transparent;
display: block;
z-index: 1;
}
// Links within the dropdown menu
> li {
display: block;
border-bottom: 1px solid $border-color;
&:last-child {
border-bottom: none;
}
}
> li > a {
display: block;
clear: both;
white-space: nowrap; // prevent links from randomly breaking onto new lines
margin: 0;
padding: $navbar-padding-vertical $navbar-padding-horizontal;
font-size: $type-size-5;
&:hover,
&:focus {
text-decoration: none;
color: $masthead-link-color-hover;
background: $navicon-link-color-hover;
}
}
}
// Active state
.dropdown-menu > .active > a {
&,
&:hover,
&:focus {
text-decoration: none;
outline: 0;
}
}
// Open state for the dropdown
.open {
// Show the menu
> .dropdown-menu {
display: block;
}
// Remove the outline when :focus is triggered
> a {
outline: 0;
}
}
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: ($zindex-dropdown - 10);
}

31
_sass/minimal-mistakes/_masthead.scss
View File

@ -40,6 +40,7 @@
}
.site-logo img {
margin-right: 0.5rem;
max-height: 2rem;
}
@ -69,20 +70,26 @@
}
ul {
clear: both;
margin: 0;
padding: 0;
clear: both;
list-style-type: none;
}
}
.masthead__menu-item {
display: block;
list-style-type: none;
white-space: nowrap;
&--lg {
padding-right: 2em;
font-weight: 700;
@include breakpoint($medium) {
height: $nav-height;
line-height: $nav-height;
}
}
a {
color: $masthead-link-color;
&:hover {
color: $masthead-link-color-hover;
}
}
.dropdown-menu {
height: auto;
}
}

325
_sass/minimal-mistakes/_navigation.scss
View File

@ -2,6 +2,168 @@
NAVIGATION
========================================================================== */
/*
Navigation bar
========================================================================== */
.navbar {
@include clearfix();
position: relative;
min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: $navbar-margin-bottom;
border: 1px solid transparent;
}
.navbar-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
float: left;
}
.navbar-collapse {
clear: both;
overflow-x: visible;
border-top: 1px solid transparent;
-webkit-overflow-scrolling: touch;
&.in {
overflow-y: auto;
}
@include breakpoint($medium) {
clear: none;
float: right;
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
&.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0; // Override default setting
overflow: visible !important;
}
&.in {
overflow-y: visible;
}
}
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.
.navbar-toggle {
position: relative;
float: right;
height: $nav-toggle-height;
padding: 9px 10px;
margin-right: $navbar-padding-horizontal;
background-color: transparent;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid transparent;
// We remove the `outline` here, but later compensate by attaching `:hover`
// styles to `:focus`.
&:focus {
outline: 0;
}
@include breakpoint($medium) {
display: none;
}
}
// Navbar nav links
//
// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
margin: ($navbar-padding-vertical / 2) -$navbar-padding-horizontal;
> li > a {
display: block;
padding-top: $navbar-padding-vertical;
padding-bottom: $navbar-padding-vertical;
}
@include breakpoint(max-width $medium) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
> li > a {
&:hover,
&:focus {
background-image: none;
}
}
}
}
// Uncollapse the nav
@include breakpoint($medium) {
float: left;
margin: 0;
> li {
float: left;
> a {
padding: $navbar-padding-vertical $navbar-padding-horizontal;
}
}
}
}
// Dropdown menus
// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
margin-top: 0.25rem;
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
margin-bottom: 0;
}
// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
//
// Declared after the navbar components to ensure more specificity on the margins.
@include breakpoint($medium) {
.navbar-left {
float: left;
}
.navbar-right {
float: right;
margin-right: -$navbar-padding-horizontal;
~ .navbar-right {
margin-right: 0;
}
}
}
/*
Breadcrumb navigation links
========================================================================== */
@ -164,169 +326,6 @@
border-top: 1px solid $border-color;
}
/*
Priority plus navigation
========================================================================== */
.greedy-nav {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: $nav-height;
background: $background-color;
a {
display: block;
margin: 0 1rem;
color: $masthead-link-color;
text-decoration: none;
&:hover {
color: $masthead-link-color-hover;
}
&.site-logo {
margin-left: 0;
margin-right: 0.5rem;
}
&.site-title {
margin-left: 0;
}
}
&__toggle {
-ms-flex-item-align: center;
align-self: center;
height: $nav-toggle-height;
border: 0;
outline: none;
background-color: transparent;
cursor: pointer;
}
.visible-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
li {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
a {
position: relative;
&:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 4px;
background: $primary-color;
width: 100%;
-webkit-transition: $global-transition;
transition: $global-transition;
-webkit-transform: scaleX(0) translate3d(0, 0, 0);
transform: scaleX(0) translate3d(0, 0, 0); // hide
}
&:hover:before {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1); // reveal
}
}
}
.hidden-links {
position: absolute;
top: 100%;
right: 0;
margin-top: 15px;
padding: 5px;
border: 1px solid $border-color;
border-radius: $border-radius;
background: $background-color;
-webkit-box-shadow: 0 2px 4px 0 rgba(#000, 0.16),
0 2px 10px 0 rgba(#000, 0.12);
box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
&.hidden {
display: none;
}
a {
margin: 0;
padding: 10px 20px;
font-size: $type-size-5;
&:hover {
color: $masthead-link-color-hover;
background: $navicon-link-color-hover;
}
}
&:before {
content: "";
position: absolute;
top: -11px;
right: 10px;
width: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: $border-color transparent;
display: block;
z-index: 0;
}
&:after {
content: "";
position: absolute;
top: -10px;
right: 10px;
width: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: $background-color transparent;
display: block;
z-index: 1;
}
li {
display: block;
border-bottom: 1px solid $border-color;
&:last-child {
border-bottom: none;
}
}
}
}
.no-js {
.greedy-nav {
.visible-links {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
overflow: visible;
}
}
}
/*
Navigation list
========================================================================== */

4
_sass/minimal-mistakes/_search.scss
View File

@ -9,6 +9,7 @@
}
.search__toggle {
float: right;
margin-left: 1rem;
margin-right: 1rem;
height: $nav-toggle-height;
@ -58,7 +59,8 @@
padding: 0;
border: none;
outline: none;
box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
background-color: transparent;
font-size: $type-size-3;

23
_sass/minimal-mistakes/_utilities.scss
View File

@ -58,7 +58,8 @@ body:hover .visually-hidden button {
background: #fff;
z-index: 100000;
text-decoration: none;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}
/*
@ -377,20 +378,6 @@ body:hover .visually-hidden button {
}
}
.greedy-nav__toggle:hover {
.navicon,
.navicon:before,
.navicon:after {
background: mix(#000, $primary-color, 25%);
}
&.close {
.navicon {
background: transparent;
}
}
}
/*
Sticky, fixed to top content
========================================================================== */
@ -419,7 +406,8 @@ body:hover .visually-hidden button {
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: $border-radius;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
/*
@ -459,7 +447,8 @@ body:hover .visually-hidden button {
background: #fff;
border: 1px solid $border-color;
border-radius: $border-radius;
box-shadow: $box-shadow;
-webkit-box-shadow: $box-shadow;
box-shadow: $box-shadow;
&__title {
margin: 0;

6
_sass/minimal-mistakes/_variables.scss
View File

@ -152,7 +152,11 @@ $right-sidebar-width-wide: 400px !default;
$border-radius: 4px !default;
$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) !default;
$nav-height: 2em !default;
$nav-toggle-height: 2rem !default;
$nav-toggle-height: $nav-height !default;
$navbar-height: $nav-height;
$navbar-margin-bottom: 0;
$navbar-padding-horizontal: 0.75rem;
$navbar-padding-vertical: 0.25rem;
$navicon-width: 1.5rem !default;
$navicon-height: 0.25rem !default;
$global-transition: all 0.2s ease-in-out !default;

2
assets/js/main.min.js vendored
View File

File diff suppressed because one or more lines are too long

212
assets/js/plugins/collapse.js vendored Normal file
View File

@ -0,0 +1,212 @@
/* ========================================================================
* Bootstrap: collapse.js v3.4.1
* https://getbootstrap.com/docs/3.4/javascript/#collapse
* ========================================================================
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
/* jshint latedef: false */
+function ($) {
'use strict';
// COLLAPSE PUBLIC CLASS DEFINITION
// ================================
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Collapse.DEFAULTS, options)
this.$trigger = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
'[data-toggle="collapse"][data-target="#' + element.id + '"]')
this.transitioning = null
if (this.options.parent) {
this.$parent = this.getParent()
} else {
this.addAriaAndCollapsedClass(this.$element, this.$trigger)
}
if (this.options.toggle) this.toggle()
}
Collapse.VERSION = '3.4.1'
Collapse.TRANSITION_DURATION = 350
Collapse.DEFAULTS = {
toggle: true
}
Collapse.prototype.dimension = function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
Collapse.prototype.show = function () {
if (this.transitioning || this.$element.hasClass('in')) return
var activesData
var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')
if (actives && actives.length) {
activesData = actives.data('bs.collapse')
if (activesData && activesData.transitioning) return
}
var startEvent = $.Event('show.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
if (actives && actives.length) {
Plugin.call(actives, 'hide')
activesData || actives.data('bs.collapse', null)
}
var dimension = this.dimension()
this.$element
.removeClass('collapse')
.addClass('collapsing')[dimension](0)
.attr('aria-expanded', true)
this.$trigger
.removeClass('collapsed')
.attr('aria-expanded', true)
this.transitioning = 1
var complete = function () {
this.$element
.removeClass('collapsing')
.addClass('collapse in')[dimension]('')
this.transitioning = 0
this.$element
.trigger('shown.bs.collapse')
}
if (!$.support.transition) return complete.call(this)
var scrollSize = $.camelCase(['scroll', dimension].join('-'))
this.$element
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
}
Collapse.prototype.hide = function () {
if (this.transitioning || !this.$element.hasClass('in')) return
var startEvent = $.Event('hide.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var dimension = this.dimension()
this.$element[dimension](this.$element[dimension]())[0].offsetHeight
this.$element
.addClass('collapsing')
.removeClass('collapse in')
.attr('aria-expanded', false)
this.$trigger
.addClass('collapsed')
.attr('aria-expanded', false)
this.transitioning = 1
var complete = function () {
this.transitioning = 0
this.$element
.removeClass('collapsing')
.addClass('collapse')
.trigger('hidden.bs.collapse')
}
if (!$.support.transition) return complete.call(this)
this.$element
[dimension](0)
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)
}
Collapse.prototype.toggle = function () {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
Collapse.prototype.getParent = function () {
return $(document).find(this.options.parent)
.find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
.each($.proxy(function (i, element) {
var $element = $(element)
this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
}, this))
.end()
}
Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
var isOpen = $element.hasClass('in')
$element.attr('aria-expanded', isOpen)
$trigger
.toggleClass('collapsed', !isOpen)
.attr('aria-expanded', isOpen)
}
function getTargetFromTrigger($trigger) {
var href
var target = $trigger.attr('data-target')
|| (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
return $(document).find(target)
}
// COLLAPSE PLUGIN DEFINITION
// ==========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.collapse')
var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data && options.toggle && /show|hide/.test(option)) options.toggle = false
if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.collapse
$.fn.collapse = Plugin
$.fn.collapse.Constructor = Collapse
// COLLAPSE NO CONFLICT
// ====================
$.fn.collapse.noConflict = function () {
$.fn.collapse = old
return this
}
// COLLAPSE DATA-API
// =================
$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
var $this = $(this)
if (!$this.attr('data-target')) e.preventDefault()
var $target = getTargetFromTrigger($this)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data()
Plugin.call($target, option)
})
}(jQuery);

165
assets/js/plugins/dropdown.js vendored Normal file
View File

@ -0,0 +1,165 @@
/* ========================================================================
* Bootstrap: dropdown.js v3.4.1
* https://getbootstrap.com/docs/3.4/javascript/#dropdowns
* ========================================================================
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// DROPDOWN CLASS DEFINITION
// =========================
var backdrop = '.dropdown-backdrop'
var toggle = '[data-toggle="dropdown"]'
var Dropdown = function (element) {
$(element).on('click.bs.dropdown', this.toggle)
}
Dropdown.VERSION = '3.4.1'
function getParent($this) {
var selector = $this.attr('data-target')
if (!selector) {
selector = $this.attr('href')
selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}
var $parent = selector !== '#' ? $(document).find(selector) : null
return $parent && $parent.length ? $parent : $this.parent()
}
function clearMenus(e) {
if (e && e.which === 3) return
$(backdrop).remove()
$(toggle).each(function () {
var $this = $(this)
var $parent = getParent($this)
var relatedTarget = { relatedTarget: this }
if (!$parent.hasClass('open')) return
if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
if (e.isDefaultPrevented()) return
$this.attr('aria-expanded', 'false')
$parent.removeClass('open').trigger($.Event('hidden.bs.dropdown', relatedTarget))
})
}
Dropdown.prototype.toggle = function (e) {
var $this = $(this)
if ($this.is('.disabled, :disabled')) return
var $parent = getParent($this)
var isActive = $parent.hasClass('open')
clearMenus()
if (!isActive) {
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
// if mobile we use a backdrop because click events don't delegate
$(document.createElement('div'))
.addClass('dropdown-backdrop')
.insertAfter($(this))
.on('click', clearMenus)
}
var relatedTarget = { relatedTarget: this }
$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
if (e.isDefaultPrevented()) return
$this
.trigger('focus')
.attr('aria-expanded', 'true')
$parent
.toggleClass('open')
.trigger($.Event('shown.bs.dropdown', relatedTarget))
}
return false
}
Dropdown.prototype.keydown = function (e) {
if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
var $this = $(this)
e.preventDefault()
e.stopPropagation()
if ($this.is('.disabled, :disabled')) return
var $parent = getParent($this)
var isActive = $parent.hasClass('open')
if (!isActive && e.which != 27 || isActive && e.which == 27) {
if (e.which == 27) $parent.find(toggle).trigger('focus')
return $this.trigger('click')
}
var desc = ' li:not(.disabled):visible a'
var $items = $parent.find('.dropdown-menu' + desc)
if (!$items.length) return
var index = $items.index(e.target)
if (e.which == 38 && index > 0) index-- // up
if (e.which == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0
$items.eq(index).trigger('focus')
}
// DROPDOWN PLUGIN DEFINITION
// ==========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.dropdown')
if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
if (typeof option == 'string') data[option].call($this)
})
}
var old = $.fn.dropdown
$.fn.dropdown = Plugin
$.fn.dropdown.Constructor = Dropdown
// DROPDOWN NO CONFLICT
// ====================
$.fn.dropdown.noConflict = function () {
$.fn.dropdown = old
return this
}
// APPLY TO STANDARD DROPDOWN ELEMENTS
// ===================================
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)
}(jQuery);

29
test/_data/navigation.yml
View File

@ -2,18 +2,27 @@
main:
- title: "About"
url: https://mmistakes.github.io/minimal-mistakes/about/
- title: "Posts"
url: /year-archive/
- title: "Collections"
url: /collection-archive/
- title: "Content"
url: #
children:
- title: "Posts by Year"
url: /year-archive/
- title: "Posts by Tag"
url: /tags-archive/
- title: "Posts by Category"
url: /categories-archive/
- title: "Collections"
url: /collection-archive/
- title: "Splash Page"
url: /splash-page/
- title: "Recipes"
url: /recipes-archive/
- title: "Portfolio"
url: /portfolio/
- title: "Sitemap"
url: /sitemap/
- title: "Extra Menu Item 1"
url: /
- title: "Extra Menu Item 2"
url: /
- title: "Extra Menu Item Long Title"
url: /
- title: "Terms"
url: /terms/
# sidebar navigation list sample
sidebar-sample: