Jquery- implement dropdown menu on click
Question
I am trying to implement Dropdown menu on click..
I have written the following code so far:-
<div class="sub_nav_main_wrap">
<div class="sub_nav_wrap">
<div id="subnavabc" class="menuabc">
<ul class="sub_navbc">
<li>
<a id="subnavdiv1" href="#" class="sub_navbc_link" onclick="myFunction()">Recommendations (30)</a>
<ul class="submenu" id="secondDD1">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
</ul>
</li>
<li>
<a id="subnavdiv2" href="#" class="sub_navbc_link" onclick="toggleColors()">Preferred (999+)</a>
</li>
<li>
<a href="#" class="sub_navbc_link">Discover (999+)</a>
</li>
<li>
<a href="#" class="sub_navbc_link">Broader Matches</a>
</li>
<li class="more_list">
<a href="#" class="sub_navbc_link">More<span class="sub_navbc_more"></span></a>
<div class="sub_navbc_more_list_wrap">
<div class="sub_navbc_more_list_arrow"></div>
<a href="#" class="sub_navbc_more_list">Reverse Matches</a>
<a href="#" class="sub_navbc_more_list">2 Way Matches</a>
<a href="#" class="sub_navbc_more_list">Shortlists</a>
<a href="#" class="sub_navbc_more_list">Viewed</a>
</div>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
I want to implement a click on recommendation and the drop down should have menu items in it for eg..Menu1 and so on..
I tried to implement via the following JavaScript code:-
function myFunction() {
document.getElementById("secondDD1").classList.add('show');
}
window.onclick = function(event) {
if (!event.target.matches('.sub_navbc_link')) {
var dropdowns = document.getElementsByClassName("submenu");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
where the show is used to display:block as soon as I click on it.
my css looks like this:-
#topnavabc #wrap2 {
height: auto;
}
.top_navbc_wrap{
background: #ff5a60;
font: normal 16px 'Roboto', sans-serif;
}
.top_navbc_inner_wrap{
width: 1060px;
margin: 0 auto;
position: relative;
}
.top_nav_section{
float: left;
text-align: center;
}
.nav_main_logo, .top_navbc{
display:inline-block;
}
.top_navbc li{
float: left;
position: relative;
background: #ff5a60;
}
.top_navbc li a{
display: block;
text-decoration: none;
color: #fdedee;
padding: 18px 25px 16px;
transition: color 0.2s ease 0s;
}
.top_navbc li a:hover{
color: #fff;
transition:transform 250ms ease 0s;
}
.nav_log_wrapper{
padding: 13px 0 0;
position:relative;
width: 110px;
margin: 0 auto;
}
.top_navbc_hbadge{
position: absolute;
background:url(http://img2.shaadi.com/assests/2016/images/badge-cap.png) no-repeat center top;
width: 110px;
height: 11px;
margin: -11px 0 0;
}
.bg_img{
display: inline-block;
background: #fbfbfc;
border: 1px solid #dddddf;
border-top: none;
height: 40px;
margin: 10px auto 0;
width: 66px;
box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.5);
border-radius: 0 0 5px 5px;
transition:height 0.5s ease-in-out;
overflow: hidden;
}
.top_navbc_hbadge a{
display: block;
text-align: center;
z-index: 900;
}
.top_navbc_hbadge:hover .bg_img{
height: 90px;
}
.top_navbc_count{
position: absolute;
top:8px;
left: 90px;
z-index: 1;
padding: 0 5px;
margin: 0 0 0 -3px;
border-radius:50px;
background:#fff;
color: #51505d;
font: normal 12px 'Roboto', sans-serif;
}
.top_navbc_active{
background: url(http://img2.shaadi.com/assests/2016/images/top-nav-arrow.png) no-repeat center bottom;
color: #fff !important;
}
.nav_help_section{
display: inline-block;
height: 18px;
padding: 26px 0 6px 10px
position: relative;
cursor: pointer;
}
.helpabc_wrap{
float: right;
width: 215px;
margin: 9px 0 0;
font-size: 16px;
}
#wrap2 .helpabc_wrap #login_section {
float: left;
margin: 0;
height: 36px;
}
.top_navabc_pro_img{
background: url(http://img2.shaadi.com/assests/2016/images/top-navabc-pro-help-icn.png) no-repeat right center;
width: 53px;
float: left;
}
.top_navbc_inner_wrap #login_section .thumb img{
border: none;
}
#wrap2 .top_navbc_inner_wrap #login_section .thumb{
width:32px;
height: 32px;
display: inline-block;
margin: 2px 0 0 3px;
border: 1px solid #e5e5e5;
}
.top_navabc_pro_upgrade, .top_navabc_pro_help{
background: url(http://img2.shaadi.com/assests/2016/images/top-navabc-pro-help-icn.png) no-repeat right center;
float: left;
width: 75px;
color: #fff;
margin: 6px 0 0;
}
.top_navabc_pro_help{
width: 48px;
}
.top_navabc_pro_upgrade:hover, .top_navabc_pro_help:hover{
text-decoration: none;
}
.top_navabc_help_sept{
border-right: 1px solid #ff7b80;
float: left;
width: 1px;
height: 28px;
margin: 5px 8px 0;
}
.sub_nav_main_wrap{
font: normal 14px 'Roboto', sans-serif;
text-align: center;
background: #fff;
}
.sub_nav_wrap{
width: 960px;
margin: 0 auto;
}
.sub_navbc li{
float: left;
margin: 0 21px 0 0;
position: relative;
}
a:active{
background: none;
}
.sub_navbc li .sub_navbc_link, .sub_navbc_active{
color: #72727d;
display: block;
position: relative;
padding: 13px 8px 12px;
transition: color 0.2s ease 0s;
text-decoration: none !important;
}
.sub_navbc li .sub_navbc_link::after, .sub_navbc_active::after{
background: #ff5a60;
bottom: 0;
content: "";
display: block;
height: 3px;
left: 0;
position: absolute;
transform: scaleX(0);
transition: transform 250ms ease 0s;
width: 0;
}
.sub_navbc li .sub_navbc_link:hover{
text-decoration: none !important;
color: #ff5a60 !important;
}
.sub_navbc_active{
color: #ff5a60 !important;
}
.sub_navbc_active::after{
width: 100%;
transform: scaleX(1);
}
/*
.sub_navbc li .sub_navbc_link, .sub_navbc_active{
color: #72727d;
display: block;
position: relative;
padding: 13px 8px 12px;
text-decoration: none !important;
}
.sub_navbc li .sub_navbc_link::after, .sub_navbc_active::after{
background: #ff5a60;
bottom: 0;
content: "";
display: block;
height: 3px;
left: 0;
position: absolute;
transform: scaleX(0);
transition: transform 250ms ease 0s;
width: 0;
}
.sub_navbc li .sub_navbc_link:hover{
text-decoration: none !important;
color: #ff5a60 !important;
transition: color 0.2s ease 0s;
}
.sub_navbc_active{
color: #ff5a60 !important;
}
.sub_navbc_active::after{
width: 100%;
transform: scaleX(1);
}
.sub_navbc li .sub_navbc_link, .sub_navbc_active{
display: block;
text-decoration: none;
padding: 13px 8px 9px;
color: #72727d;
transition: color 0.2s ease 0s;
}
.sub_navbc li .sub_navbc_link:hover, .sub_navbc_active{
text-decoration: none !important;
color: #ff5a60 !important;
transition:transform 250ms ease 0s;
}
.sub_navbc_active{
border-bottom: 3px solid #ff5a60;
}
*/
.sub_navbc li.more_list{
float: left;
margin: 0;
position: relative;
}
.sub_navbc li.more_list .sub_navbc_link{
background: url(http://img2.shaadi.com/assests/2016/images/ico-dropdwn.png) no-repeat right 21px;
padding: 13px 16px 12px 8px;
}
.sub_navbc li.more_list .sub_navbc_link:hover{
background: url(http://img2.shaadi.com/assests/2016/images/ico-dropdwn-hvr.png) no-repeat right 21px;
padding: 13px 16px 12px 8px;
}
.sub_navbc_more_list_wrap{
background: #fff;
box-shadow: 0 1px 12px rgba(43, 59, 93, 0.35);
border-radius: 3px;
width: 150px;
font-size: 14px;
position: absolute;
left: 2px;
top: 40px;
text-align: left;
z-index: 1;
}
.sub_navbc_more_list_arrow{
background: url(http://img2.shaadi.com/assests/2016/images/top-nav-arrow.png) no-repeat left top;
width: 14px;
height: 7px;
position: absolute;
left: 43px;
top: -7px;
}
.sub_navbc_more_list {
display: block;
padding: 10px 19px;
color: #72727d;
}
.sub_navbc_more_list:hover{
background: #f1f1f2;
color: #72727d;
text-decoration: none;
}
Am I doing something wrong or is there a workaround for this..Please help..I have gone through many tutorials and am getting stuck on this issue.
1 answers
solution1
0 2016-06-10 11:39:53
Try this way..
function myFunction(elem) { $(elem).next().toggle('slide'); } $(window).click(function() { $('.submenu').slideUp(); }); $('.submenu, .sub_navbc_link').click(function(event) { event.stopPropagation(); });
#topnavabc #wrap2 { height: auto; } .top_navbc_wrap { background: #ff5a60; font: normal 16px'Roboto', sans-serif; } .top_navbc_inner_wrap { width: 1060px; margin: 0 auto; position: relative; } .top_nav_section { float: left; text-align: center; } .nav_main_logo, .top_navbc { display: inline-block; } .top_navbc li { float: left; position: relative; background: #ff5a60; } .top_navbc li a { display: block; text-decoration: none; color: #fdedee; padding: 18px 25px 16px; transition: color 0.2s ease 0s; } .top_navbc li a:hover { color: #fff; transition: transform 250ms ease 0s; } .nav_log_wrapper { padding: 13px 0 0; position: relative; width: 110px; margin: 0 auto; } .top_navbc_hbadge { position: absolute; background: url(http://img2.shaadi.com/assests/2016/images/badge-cap.png) no-repeat center top; width: 110px; height: 11px; margin: -11px 0 0; } .bg_img { display: inline-block; background: #fbfbfc; border: 1px solid #dddddf; border-top: none; height: 40px; margin: 10px auto 0; width: 66px; box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.5); border-radius: 0 0 5px 5px; transition: height 0.5s ease-in-out; overflow: hidden; } .top_navbc_hbadge a { display: block; text-align: center; z-index: 900; } .top_navbc_hbadge:hover .bg_img { height: 90px; } .top_navbc_count { position: absolute; top: 8px; left: 90px; z-index: 1; padding: 0 5px; margin: 0 0 0 -3px; border-radius: 50px; background: #fff; color: #51505d; font: normal 12px'Roboto', sans-serif; } .top_navbc_active { background: url(http://img2.shaadi.com/assests/2016/images/top-nav-arrow.png) no-repeat center bottom; color: #fff !important; } .nav_help_section { display: inline-block; height: 18px; padding: 26px 0 6px 10px position: relative; cursor: pointer; } .helpabc_wrap { float: right; width: 215px; margin: 9px 0 0; font-size: 16px; } #wrap2 .helpabc_wrap #login_section { float: left; margin: 0; height: 36px; } .top_navabc_pro_img { background: url(http://img2.shaadi.com/assests/2016/images/top-navabc-pro-help-icn.png) no-repeat right center; width: 53px; float: left; } .top_navbc_inner_wrap #login_section .thumb img { border: none; } #wrap2 .top_navbc_inner_wrap #login_section .thumb { width: 32px; height: 32px; display: inline-block; margin: 2px 0 0 3px; border: 1px solid #e5e5e5; } .top_navabc_pro_upgrade, .top_navabc_pro_help { background: url(http://img2.shaadi.com/assests/2016/images/top-navabc-pro-help-icn.png) no-repeat right center; float: left; width: 75px; color: #fff; margin: 6px 0 0; } .top_navabc_pro_help { width: 48px; } .top_navabc_pro_upgrade:hover, .top_navabc_pro_help:hover { text-decoration: none; } .top_navabc_help_sept { border-right: 1px solid #ff7b80; float: left; width: 1px; height: 28px; margin: 5px 8px 0; } .sub_nav_main_wrap { font: normal 14px'Roboto', sans-serif; text-align: center; background: #fff; } .sub_nav_wrap { width: 960px; margin: 0 auto; } .sub_navbc li { float: left; margin: 0 21px 0 0; position: relative; } a:active { background: none; } .sub_navbc li .sub_navbc_link, .sub_navbc_active { color: #72727d; display: block; position: relative; padding: 13px 8px 12px; transition: color 0.2s ease 0s; text-decoration: none !important; } .sub_navbc li .sub_navbc_link::after, .sub_navbc_active::after { background: #ff5a60; bottom: 0; content: ""; display: block; height: 3px; left: 0; position: absolute; transform: scaleX(0); transition: transform 250ms ease 0s; width: 0; } .sub_navbc li .sub_navbc_link:hover { text-decoration: none !important; color: #ff5a60 !important; } .sub_navbc_active { color: #ff5a60 !important; } .sub_navbc_active::after { width: 100%; transform: scaleX(1); } /* .sub_navbc li .sub_navbc_link, .sub_navbc_active{ color: #72727d; display: block; position: relative; padding: 13px 8px 12px; text-decoration: none !important; } .sub_navbc li .sub_navbc_link::after, .sub_navbc_active::after{ background: #ff5a60; bottom: 0; content: ""; display: block; height: 3px; left: 0; position: absolute; transform: scaleX(0); transition: transform 250ms ease 0s; width: 0; } .sub_navbc li .sub_navbc_link:hover{ text-decoration: none !important; color: #ff5a60 !important; transition: color 0.2s ease 0s; } .sub_navbc_active{ color: #ff5a60 !important; } .sub_navbc_active::after{ width: 100%; transform: scaleX(1); } .sub_navbc li .sub_navbc_link, .sub_navbc_active{ display: block; text-decoration: none; padding: 13px 8px 9px; color: #72727d; transition: color 0.2s ease 0s; } .sub_navbc li .sub_navbc_link:hover, .sub_navbc_active{ text-decoration: none !important; color: #ff5a60 !important; transition:transform 250ms ease 0s; } .sub_navbc_active{ border-bottom: 3px solid #ff5a60; } */ .sub_navbc li.more_list { float: left; margin: 0; position: relative; } .sub_navbc li.more_list .sub_navbc_link { background: url(http://img2.shaadi.com/assests/2016/images/ico-dropdwn.png) no-repeat right 21px; padding: 13px 16px 12px 8px; } .sub_navbc li.more_list .sub_navbc_link:hover { background: url(http://img2.shaadi.com/assests/2016/images/ico-dropdwn-hvr.png) no-repeat right 21px; padding: 13px 16px 12px 8px; } .sub_navbc_more_list_wrap { background: #fff; box-shadow: 0 1px 12px rgba(43, 59, 93, 0.35); border-radius: 3px; width: 150px; font-size: 14px; position: absolute; left: 2px; top: 40px; text-align: left; z-index: 1; } .sub_navbc_more_list_arrow { background: url(http://img2.shaadi.com/assests/2016/images/top-nav-arrow.png) no-repeat left top; width: 14px; height: 7px; position: absolute; left: 43px; top: -7px; } .sub_navbc_more_list { display: block; padding: 10px 19px; color: #72727d; } .sub_navbc_more_list:hover { background: #f1f1f2; color: #72727d; text-decoration: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sub_nav_main_wrap"> <div class="sub_nav_wrap"> <div id="subnavabc" class="menuabc"> <ul class="sub_navbc"> <li> <a id="subnavdiv1" href="#" class="sub_navbc_link" onclick="myFunction(this)">Recommendations (30)</a> <ul class="submenu" id="secondDD1"> <li><a href="#">Menu item 1</a> </li> <li><a href="#">Menu item 2</a> </li> <li><a href="#">Menu item 3</a> </li> <li><a href="#">Menu item 4</a> </li> </ul> </li> <li> <a id="subnavdiv2" href="#" class="sub_navbc_link" onclick="toggleColors()">Preferred (999+)</a> </li> <li> <a href="#" class="sub_navbc_link">Discover (999+)</a> </li> <li> <a href="#" class="sub_navbc_link">Broader Matches</a> </li> <li class="more_list"> <a href="#" class="sub_navbc_link">More<span class="sub_navbc_more"></span></a> <div class="sub_navbc_more_list_wrap"> <div class="sub_navbc_more_list_arrow"></div> <a href="#" class="sub_navbc_more_list">Reverse Matches</a> <a href="#" class="sub_navbc_more_list">2 Way Matches</a> <a href="#" class="sub_navbc_more_list">Shortlists</a> <a href="#" class="sub_navbc_more_list">Viewed</a> </div> </li> </ul> <div class="clearfix"></div> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Jquery - dropdown menu on click
dropdown menu on click with jquery
jquery- unchecking checkbox on dropdown change not working
Jquery dropdown menu click always open
Jquery and css dropdown menu mouseleave and click
Dropdown menu sliding down on click using JQuery
I'm trying to implement a click event on a bootstrap dropdown menu
Jquery- How to remove a link (<a href> tag) for a certain dropdown selection
Jquery- Full screen popup overlay on href click
Jquery- How to handle event as a parameter on click function
Related Tags