Skip to content

Instantly share code, notes, and snippets.

@moonbyt3

moonbyt3/index.html

Created August 9, 2019 09:01
Show Gist options
  • Save moonbyt3/a627187121e238c64cb95caf8349e71a to your computer and use it in GitHub Desktop.
Save moonbyt3/a627187121e238c64cb95caf8349e71a to your computer and use it in GitHub Desktop.
Download ZIP
multi level dropdown jQuery
Raw
index.html
<div class="products-panel">
<div class="container products-panel-wrap">
<div class="products-sidebar">
<div class="products-sidebar-panel">
<span class="products-sidebar-title">Categories</span>
<div class="products-sidebar-list">
<a href="javascript:;" class="products-sidebar-category">P.O.S / Kiosks</a>
<a href="javascript:;" class="products-sidebar-category">Clamps and Mounts</a>
<a href="javascript:;" class="products-sidebar-category">PC Accessories</a>
</div>
</div>
<div class="products-sidebar-panel products-sidebar-panel--category">
<span class="products-sidebar-title">Devices</span>
<ul class="products-sidebar-list">
<li class="products-sidebar-item">
<span class="products-sidebar-item-title-wrap">
<a href="javascript:;" class="products-sidebar-item-title-text">Apple</a>
<span class="products-sidebar-item-title-icon font-plus"></span>
</span>
<ul class="products-sidebar-item-list">
<li>
<span class="products-sidebar-item-title-wrap">
<a href="javascript:;" class="products-sidebar-item-title-text">iPads</a>
<span class="products-sidebar-item-title-icon font-plus"></span>
</span>
<ul>
<li><a href="javascript:;" class="products-sidebar-item-link">iPad wow</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">iPad large</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">iPad mini</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">iPad ok</a></li>
</ul>
</li>
<li><a href="javascript:;" class="products-sidebar-item-link">iPods</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">iPhones</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">iMac</a></li>
</ul>
</li>
<li class="products-sidebar-item">
<a class="products-sidebar-item-title-wrap">
<span class="products-sidebar-item-title-text">Samsung</span>
<span class="products-sidebar-item-title-icon font-plus"></span>
</a>
<ul class="products-sidebar-item-list">
<li>
<a class="products-sidebar-item-title-wrap">
<span class="products-sidebar-item-title-text">Galaxy</span>
<span class="products-sidebar-item-title-icon font-plus"></span>
</a>
<ul>
<li>
<a class="products-sidebar-item-title-wrap">
<span class="products-sidebar-item-title-text">Galaxy S1</span>
<span class="products-sidebar-item-title-icon font-plus"></span>
</a>
<ul>
<li><a href="javascript:;" class="products-sidebar-item-link">subGalaxy S1a</a>
<ul>
<li><a href="javascript:;" class="products-sidebar-item-link">subSubGalaxy S1a0</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">subSubGalaxy S2b1</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">subSubGalaxy S3c2</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">subSubGalaxy S4d3</a></li>
</ul>
</li>
<li><a href="javascript:;" class="products-sidebar-item-link">subGalaxy S2b</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">subGalaxy S3c</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">subGalaxy S4d</a></li>
</ul>
</li>
<li><a href="javascript:;" class="products-sidebar-item-link">Galaxy S2</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">Galaxy S3</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">Galaxy S4</a></li>
</ul>
</li>
<li>
<a href="javascript:;" class="products-sidebar-item-link">PCs</a>
<ul>
<li><a href="javascript:;" class="products-sidebar-item-link">PC model 1</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">PC model 2</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">PC model 3</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">PC model 4</a></li>
</ul>
</li>
<li><a href="javascript:;" class="products-sidebar-item-link">Laptops</a></li>
<li><a href="javascript:;" class="products-sidebar-item-link">Misc</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Raw
script.js
$('.products-sidebar-item-title-icon').on('click', function(e) {
$(this).toggleClass('font-plus');
$(this).toggleClass('font-minus');
$(this).parent().next().slideToggle();
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.scss
$white: #fff;
$black: #000;
$blue: #222f40;
$grey: #3d3e45;
$grey-light: #f4f8fb;
$grey-lighter: #efedee;
$red: #ff6363;
// Transitions
$dur: 350ms;
$ease: ease;
a {
text-decoration: none;
color: $grey;
}
.products-sidebar {
max-width: 250px;
width: 100%;
margin-right: 15px;
}
.products-panel {
padding-top: 140px;
background-color: $grey-light;
}
.products-panel-wrap {
display: flex;
}
.products-sidebar-panel {
background-color: $white;
padding: 10% 11% 5%;
border-bottom: 1px solid $grey-light;
}
.products-sidebar-panel--category {
padding: 6% 11% 7%;
+ .products-sidebar-panel--category {
padding-top: 7%;
.products-sidebar-title {
margin-bottom: 20px;
}
}
}
.products-sidebar-title {
display: block;
margin-bottom: 30px;
font-weight: 600;
color: $grey;
}
.products-sidebar-item, .products-sidebar-category {
display: block;
margin-bottom: 12px;
transition: color $dur $ease;
font-size: 14px;
letter-spacing: -0.3px;
&:hover {
color: $red;
}
}
.products-sidebar-category {
&:hover {
font-weight: 600;
}
}
.products-sidebar-item-title-wrap {
position: relative;
display: flex;
&:hover {
color: $red;
.products-sidebar-item-title-icon {
&::before {
color: $red;
}
}
}
}
.products-sidebar-item-title {
display: block;
color: $grey;
transition: $dur $ease;
}
.products-sidebar-item-title-icon {
display: inline-flex;
margin-left: auto;
&::before {
color: $grey;
font-size: 11px;
transition: $dur $ease;
}
}
.products-sidebar-item {
ul {
display: none;
padding-left: 10px;
margin-top: 20px;
padding-bottom: 6px;
margin-left: 10px;
border-left: 2px solid $red;
li {
display: block;
transition: $dur $ease;
margin-bottom: 12px;
&:hover {
color: $red;
}
}
}
}
.font-plus, .font-minus {
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-size: 30px;
line-height: 1;
&::before {
font-size: 18px;
}
&:hover {
cursor: pointer;
}
}
.font-plus {
&::before {
content: '+';
}
}
.font-minus {
&::before {
content: '-';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment