Dropdown menu on click
For my hamburger menu, I am trying to design it so that it drops out of the menu on a button click. For example, if you click the plus symbol next to item 1, the sub-items of item 1 will drop. I added all the items and sub items to the hamburger menu. However, I can't figure out how to get the sub items to only appear if you click on the plus symbol next to the parent. Anyone have any solutions?
jsfiddle - https://jsfiddle.net/yz5p1czh/
jQuery(document).ready(function() {
jQuery('#hamburger-nav-icon').click(function() {
jQuery(this).toggleClass('open');
jQuery('body').css('overflow','hidden');
if (jQuery('#hamburger-menu-cover').css('opacity') == '0') {
jQuery('#hamburger-menu-cover').css('opacity', '1');
jQuery('#hamburger-menu-cover').fadeIn(300).css('display', 'table');
jQuery('body').css('overflow','hidden');
} else {
jQuery('#hamburger-menu-cover').css('opacity', '0');
jQuery('#hamburger-menu-cover').fadeOut(300).css('display', 'none');
jQuery('body').css('overflow','visible');
}
});
});
/*--------------------------------------------------------------
## Hamburger Menu
--------------------------------------------------------------*/
#hamburger-menu-cover {
z-index: 5;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
position: fixed;
font-size: 1.5em;
text-align: center;
right: 0px;
top: 0px;
opacity: 0;
display: none;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overflow: hidden;
}
.hamburger-menu {
background:#fff;
width: 31%;
height: 100%;
border-right: 1px solid #808080;
position: fixed;
top: 0px;
}
.hamburger-menu-container {
margin-left: 73px;
margin-top: 100px;
padding-right: 32px;
padding-bottom: 40px;
border-bottom: 1px solid #808080;
}
.hamburger-menu-links li {
list-style: none;
font-family: 'freightlight';
font-size: 36px;
display: block;
line-height: 57px;
font-style: italic;
text-transform: uppercase;
text-decoration: none;
}
.hamburger-menu-links li a {
text-decoration: none;
color:#000;
}
.hamburger-menu-links li a:hover {
text-decoration: none;
color:#000;
}
.hamburger-menu-links li a:active {
text-decoration: none;
color:#000;
}
.hamburger-menu-links li a:visited {
text-decoration: none;
color:#000;
}
#hamburger-nav-icon {
z-index: 20;
width: 50px;
height: 35px;
position: relative;
margin: 35px 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#hamburger-nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 40px;
background: #000;
opacity: 1;
left: 0;
}
/* Icon 3 */
#hamburger-nav-icon span:nth-child(1) {
top: 0px;
}
#hamburger-nav-icon span:nth-child(2),#hamburger-nav-icon span:nth-child(3) {
top: 12px;
}
#hamburger-nav-icon span:nth-child(4) {
top: 24px;
}
#hamburger-nav-icon.open span:nth-child(1) {
top: 8px;
width: 0%;
left: 50%;
}
#hamburger-nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#hamburger-nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#hamburger-nav-icon.open span:nth-child(4) {
top: 8px;
width: 0%;
left: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hamburger-nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="hamburger-menu-cover">
<div class="hamburger-menu">
<div class="hamburger-menu-container">
<div class="hamburger-menu-links">
<ul>
<li><a href="#">Item 1<i class="fa fa-plus" aria-hidden="true"></i></a></li>
<div class="submenu">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
</div>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5<i class="fa fa-plus" aria-hidden="true"></i></a></li>
<div class="submenu">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
</div>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a></li>
</ul>
</div>
</div>
</div>
</div>
+3
source to share
3 answers
Try this: https://jsfiddle.net/yz5p1czh/8/
Html
<div id="hamburger-nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="hamburger-menu-cover">
<div class="hamburger-menu">
<div class="hamburger-menu-container">
<div class="hamburger-menu-links">
<ul>
<li><a href="#">Item 1<i class="fa fa-plus menutoggle" id="toggle1" aria-hidden="true"></i></a></li>
<div class="submenu" id="submenu1">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
</div>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5<i class="fa fa-plus menutoggle" id="toggle5" aria-hidden="true"></i></a></li>
<div class="submenu" id="submenu5">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
</div>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a></li>
</ul>
</div>
</div>
</div>
</div>
JQuery
jQuery(document).ready(function() {
$(".submenu").slideUp("fast");
$(".menutoggle").click(function(){
var id = $(this).attr("id").replace("toggle","submenu");
$("#" + id).slideToggle("fast");
});
jQuery('#hamburger-nav-icon').click(function() {
jQuery(this).toggleClass('open');
jQuery('body').css('overflow','hidden');
if (jQuery('#hamburger-menu-cover').css('opacity') == '0') {
jQuery('#hamburger-menu-cover').css('opacity', '1');
jQuery('#hamburger-menu-cover').fadeIn(300).css('display', 'table');
jQuery('body').css('overflow','hidden');
} else {
jQuery('#hamburger-menu-cover').css('opacity', '0');
jQuery('#hamburger-menu-cover').fadeOut(300).css('display', 'none');
jQuery('body').css('overflow','visible');
}
});
});
+2
source to share
Do you need something like this? https://jsfiddle.net/yz5p1czh/7/
I've added a class open
to the icon that triggers a jquery function that disappears into the div submenu.
+2
user5922162
source
to share
I moved your sub-items
to li > ul
. Also your old one sub-items
now has an attribute aria-hidden
.
sub-items
.
.hamburger-menu-links ul[aria-hidden="true"] {
display: none;
}
.hamburger-menu-links ul[aria-hidden="false"] {
display: block;
}
The JS code that was added adds aria-hidden
for the sub-elements ul
.
$('.hamburger-menu-links li').click(function(e) {
var ul = $(this).find('ul');
var ariaHidden = ul.attr('aria-hidden');
var value = (ariaHidden === 'true') || false;
ul.attr('aria-hidden', !value);
});
Here's an example of how it works.
jQuery(document).ready(function() {
jQuery('#hamburger-nav-icon').click(function() {
jQuery(this).toggleClass('open');
jQuery('body').css('overflow','hidden');
if (jQuery('#hamburger-menu-cover').css('opacity') == '0') {
jQuery('#hamburger-menu-cover').css('opacity', '1');
jQuery('#hamburger-menu-cover').fadeIn(300).css('display', 'table');
jQuery('body').css('overflow','hidden');
} else {
jQuery('#hamburger-menu-cover').css('opacity', '0');
jQuery('#hamburger-menu-cover').fadeOut(300).css('display', 'none');
jQuery('body').css('overflow','visible');
}
});
});
// new
$('.hamburger-menu-links li').click(function(e) {
var ul = $(this).find('ul');
var ariaHidden = ul.attr('aria-hidden');
var value = (ariaHidden === 'true') || false;
ul.attr('aria-hidden', !value);
});
/*--------------------------------------------------------------
## Hamburger Menu
--------------------------------------------------------------*/
#hamburger-menu-cover {
z-index: 5;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
position: fixed;
font-size: 1.5em;
text-align: center;
right: 0px;
top: 0px;
opacity: 0;
display: none;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overflow: hidden;
}
.hamburger-menu {
background:#fff;
width: 31%;
height: 100%;
border-right: 1px solid #808080;
position: fixed;
top: 0px;
}
.hamburger-menu-container {
margin-left: 73px;
margin-top: 100px;
padding-right: 32px;
padding-bottom: 40px;
border-bottom: 1px solid #808080;
}
.hamburger-menu-links li {
list-style: none;
font-family: 'freightlight';
font-size: 36px;
display: block;
line-height: 57px;
font-style: italic;
text-transform: uppercase;
text-decoration: none;
}
.hamburger-menu-links li a {
text-decoration: none;
color:#000;
}
.hamburger-menu-links li a:hover {
text-decoration: none;
color:#000;
}
.hamburger-menu-links li a:active {
text-decoration: none;
color:#000;
}
.hamburger-menu-links li a:visited {
text-decoration: none;
color:#000;
}
.hamburger-menu-links ul[aria-hidden="true"] {
display: none;
}
.hamburger-menu-links ul[aria-hidden="false"] {
display: block;
}
#hamburger-nav-icon {
z-index: 20;
width: 50px;
height: 35px;
position: relative;
margin: 35px 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#hamburger-nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 40px;
background: #000;
opacity: 1;
left: 0;
}
/* Icon 3 */
#hamburger-nav-icon span:nth-child(1) {
top: 0px;
}
#hamburger-nav-icon span:nth-child(2),#hamburger-nav-icon span:nth-child(3) {
top: 12px;
}
#hamburger-nav-icon span:nth-child(4) {
top: 24px;
}
#hamburger-nav-icon.open span:nth-child(1) {
top: 8px;
width: 0%;
left: 50%;
}
#hamburger-nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#hamburger-nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#hamburger-nav-icon.open span:nth-child(4) {
top: 8px;
width: 0%;
left: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hamburger-nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="hamburger-menu-cover">
<div class="hamburger-menu">
<div class="hamburger-menu-container">
<div class="hamburger-menu-links">
<ul>
<li>
<a href="#">Item 1<i class="fa fa-plus"></i></a>
<ul aria-hidden="true">
<li>
<a href="#">Sub Item 1</a>
</li>
<li>
<a href="#">Sub Item 2</a>
</li>
</ul>
</li>
<li>
<a href="#">Item 2<i class="fa fa-plus"></i></a>
<ul aria-hidden="false">
<li>
<a href="#">Sub Item 1</a>
</li>
<li>
<a href="#">Sub Item 2</a>
</li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
</li>
<li>
<a href="#">Item 4</a>
</li>
<li>
<a href="#">Item 5<i class="fa fa-plus"></i></a>
<ul aria-hidden="true">
<li>
<a href="#">Sub Item 1</a>
</li>
<li>
<a href="#">Sub Item 2</a>
</li>
</ul>
</li>
<li>
<a href="#">Item 6</a>
</li>
<li>
<a href="#">Item 7</a>
</li>
<li>
<a href="#">Item 8</a>
</li>
<li>
<a href="#">Item 9</a>
</li>
</ul>
</div>
</div>
</div>
</div>
0
source to share