<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - jQuery Accordion Navigation Menu</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="description">
<h1><i>jQuery</i> Accordion Navigation Menu</h1>
<p>A reusable <i>jQuery</i> accordion navigation menu, works with any amount of categories and subcategories</p>
</div>
<div class="nav-wrapper">
<nav class="nav">
<ul class="nav-list ul-reset">
<li class="nav-item">
<div class="nav-item-inner">
<a href="#" class="nav-item-inner-heading plus">Mens</a>
<ul class="nav-sub-list ul-reset">
<div class="nav-sub-list-inner">
<li class="nav-sub-item">
<a href="#">View all</a>
</li>
<li class="nav-sub-item">
<a href="#">Featured</a>
</li>
<li class="nav-sub-item">
<a href="#">Shoes</a>
</li>
<li class="nav-sub-item">
<a href="#">Clothing</a>
</li>
<li class="nav-sub-item">
<a href="#">Accessories</a>
</li>
<li class="nav-sub-item">
<a href="#">Sports</a>
</li>
</div>
</ul>
</div>
</li>
<li class="nav-item">
<div class="nav-item-inner">
<a href="#" class="nav-item-inner-heading plus">Womens</a>
<ul class="nav-sub-list ul-reset">
<div class="nav-sub-list-inner">
<li class="nav-sub-item">
<a href="#">View all</a>
</li>
<li class="nav-sub-item">
<a href="#">Featured</a>
</li>
<li class="nav-sub-item">
<a href="#">Shoes</a>
</li>
<li class="nav-sub-item">
<a href="#">Clothing</a>
</li>
<li class="nav-sub-item">
<a href="#">Accessories</a>
</li>
<li class="nav-sub-item">
<a href="#">Sports</a>
</li>
</div>
</ul>
</div>
</li>
<li class="nav-item">
<div class="nav-item-inner">
<a href="#" class="nav-item-inner-heading plus">Sale</a>
<ul class="nav-sub-list ul-reset">
<div class="nav-sub-list-inner">
<li class="nav-sub-item">
<a href="#">View all</a>
</li>
<li class="nav-sub-item">
<a href="#">Featured</a>
</li>
<li class="nav-sub-item">
<a href="#">Shoes</a>
</li>
<li class="nav-sub-item">
<a href="#">Clothing</a>
</li>
<li class="nav-sub-item">
<a href="#">Accessories</a>
</li>
<li class="nav-sub-item">
<a href="#">Sports</a>
</li>
</div>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://use.fontawesome.com/c7e893829f.js'></script><script src="./script.js"></script>
</body>
</html>
/* ==============================
$-Variables
============================== */
/* ==============================
$-Mixins
============================== */
/* ==============================
$-Resets
============================== */
html,
body {
height: 100%;
font-size: 20px;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
min-width: calc(300px + 1.5rem);
margin: 0;
line-height: 1.5;
background-color: #333;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: rgba(255, 255, 255, 0.5);
}
/* headers */
h1 {
margin-top: 0;
margin-bottom: 0;
font-weight: 700;
font-size: 1.6rem;
color: white;
}
/* highlight colors */
::-moz-selection {
background-color: black;
color: white;
}
::selection {
background-color: black;
color: white;
}
/* anchor links */
a {
text-decoration: none;
color: white;
-webkit-transition: opacity 100ms ease-in-out;
transition: opacity 100ms ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
a:hover {
opacity: .5;
}
/* ==============================
$-Modules
============================== */
/* ul-reset */
.ul-reset {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
list-style: none;
}
/* container */
.container {
position: relative;
top: 7.5vh;
max-width: 46em;
padding: .75rem;
margin: auto;
}
/* ==============================
$-Styles
============================== */
.description {
text-align: center;
}
.nav-wrapper {
width: 300px;
margin: auto;
}
/* jQuery Accordion Navigation Menu */
.nav-item {
border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.nav-item:first-child {
border-top: none;
}
.nav-item-inner > a {
display: block;
}
.nav-item-inner-heading {
position: relative;
padding: .75rem;
padding-right: 2.5rem;
font-weight: 700;
}
.nav-item-inner-heading:focus {
opacity: 1;
}
.nav-item-inner-heading.minus:after, .nav-item-inner-heading.plus:after {
position: absolute;
top: 50%;
right: .75rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 1rem;
text-align: center;
font-family: FontAwesome;
font-style: normal;
font-size: .6rem;
color: GoldenRod;
}
.nav-item-inner-heading.minus:after {
content: "\f068";
}
.nav-item-inner-heading.plus:after {
content: "\f067";
}
.nav-sub-list {
display: none;
font-size: .8rem;
overflow: hidden;
}
.nav-sub-list-inner {
padding: 0 .75rem .75rem;
}
.nav-sub-item {
padding-left: .75rem;
margin-top: .375rem;
}
.nav-sub-item:first-child {
margin-top: 0;
font-style: italic;
}
// j
//// accordion navigation menu
function accordion(section, heading, list){
$(section).each(function(){
var act = 'active',
actClass = '.active',
that = $(this);
function tglH(){
that.find(list).slideToggle(250);
}
function open(click){
$(click).toggleClass('plus minus');
tglH();
that.find(list).addClass(act);
}
function close(click){
$(click).toggleClass('minus plus');
tglH();
that.find(list).removeClass(act);
}
if ( that.find(list).length == 0 ) {
$(this).find(heading).removeClass('plus').addClass('no-sub');
} else {
$(this).find(heading).click(function(e) {
e.preventDefault();
});
}
$(this).find(heading).click(function() {
if ( $(this).hasClass('minus') ) {
// close this menu
close(this);
that.find(list).removeClass(act);
} else if ( $(this).hasClass('plus') ) {
if ( $(heading).hasClass('minus') ) {
$(heading).each(function(){
if ( !$(this).hasClass('no-sub') ) {
$(this).removeClass('minus').addClass('plus');
}
})
$(section).each(function() {
if ( $(this).find(list).hasClass(act) ) {
$(actClass).slideToggle(250);
$(this).find(list).removeClass(act);
}
});
// open this menu
open(this);
} else if ( $(this).hasClass('plus') ) {
// open this menu
open(this);
}
}
})
})
}
accordion('.nav-item', '.nav-item-inner-heading', '.nav-sub-list');