Post by Elli on Aug 16, 2019 12:04:30 GMT -7
Navigation Menu Dropdowns
A simple navigation dropdown component.
HTML
CSS
JavaScript
HTML
<ul class="navigation-menu">
<li>
<a href="javascript:void(0);" title="Dropdown">Dropdown <span class="caret" aria-hidden="true">▼</span></a>
<ul class="navigation-menu__dropdown fallback">
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
</ul>
CSS
/* ======================================================
* Navigation Menu
* ====================================================== */
.navigation-menu::before,
.navigation-menu::after {
content: '';
display: table;
}
.navigation-menu::after {
clear: both;
}
.navigation-menu > li {
display: block;
float: left;
position: relative;
}
.navigation-menu > li > a {
color: #00f;
display: inline-block;
font: 14px Verdana, Arial, sans-serif;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
}
.navigation-menu > li > a:hover,
.navigation-menu > li > a:focus {
text-decoration: underline;
}
.navigation-menu > li > a > .caret {
transition: transform 0.4s ease;
}
.navigation-menu > li > a > .caret.animate-toggle {
transform: rotate(-180deg);
}
/* Dropdowns
* ====================================================== */
.navigation-menu__dropdown {
background-color: #f1f1f1;
border: 1px solid #222;
display: none;
left: 23px;
min-width: 220px;
padding-bottom: 5px;
padding-top: 5px;
position: absolute;
top: 100%;
z-index: 1998;
}
.navigation-menu__dropdown > li > a {
color: #00f;
display: block;
font: 12px Verdana, Arial, sans-serif;
padding: 8px 12px;
text-decoration: none;
}
.navigation-menu__dropdown > li > a:hover,
.navigation-menu__dropdown > li > a:focus {
background-color: #f3f3f3;
text-decoration: underline;
}
.navigation-menu--secondary > li:hover > .navigation-menu__dropdown.fallback {
display: block;
}
JavaScript
<script>
$(function() {
// Navigation menu dropdowns
(function dropdownMenu() {
var $dropdownSibling = $('.navigation-menu > li > a');
var $dropdown = $('.navigation-menu__dropdown');
$dropdown.hide().removeClass('fallback');
$dropdownSibling.click(function() {
$(this).find('.caret').toggleClass('animate-toggle');
$(this).next($dropdown).slideToggle('fast');
});
// Collapse dropdown if anywhere else on the document is clicked
$(document).click(function(e) {
var target = e.target;
if (!$(target).is($dropdownSibling) && !$(target).parents().is($dropdownSibling)) {
$dropdownSibling.find('.caret').removeClass('animate-toggle');
$dropdown.slideUp('fast');
}
});
// Stop dropdown from collapsing when clicked on itself
$dropdown.click(function(e) {
e.stopPropagation();
});
})();
});
</script>