I want to create a menu bar with sub menu using Jquery. There are two item with sub menu. When i click on once i want it slide down and when i click second one then second one need to slide down but first one or all another one need to slide up. I tried following:
HTML
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="footer-lang">
<ul>
<li class="lang">
ENG <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>En</li>
<li>Bn</li>
</ul>
</li>
<li class="lang">
USD <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>USD</li>
<li>VND</li>
</ul>
</li>
</ul>
</div>
CSS
.footer-lang ul{
display: block;
text-align: center;
}
.footer-lang .lang{
display: inline-block;
}
.footer-lang .lang a{
display: block;
padding: 8px;
color: #000;
}
.footer-lang .lang > ul{
display: none;
position: absolute;
}
Javascript
$(document).ready(function(){
$('.footer-lang .lang a').on('click', function(e) {
$(this).next('ul').slideToggle('slow');
e.preventDefault();
});
});
On click make other submenu to slideUp fast or slow and than toggle see below snippet for more info
$(document).ready(function(){
$('.footer-lang .lang a').on('click', function(e) {
$(".lang > ul").slideUp("fast");
$(this).next('ul').slideToggle('slow');
e.preventDefault();
});
});
.footer-lang ul{
display: block;
text-align: center;
}
.footer-lang .lang{
display: inline-block;
}
.footer-lang .lang a{
display: block;
padding: 8px;
color: #000;
}
.footer-lang .lang > ul{
display: none;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="footer-lang">
<ul>
<li class="lang">
ENG <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>En</li>
<li>Bn</li>
</ul>
</li>
<li class="lang">
USD <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>USD</li>
<li>VND</li>
</ul>
</li>
</ul>
</div>
one method is to add a class signifying open when clicking it and then close that class before opening another item. something like this would use that:
$(document).ready(function() {
$('.footer-lang .lang a').on('click', function(e) {
e.preventDefault();
// close the open
$('.is-open').removeClass('is-open').slideToggle('slow);
// open the closed
$(this).next('ul').slideToggle('slow');
$(this).addClass('is-open');
});
});
Related
I have designed a small panel using the following code, which will display the content to the user by clicking on it:
$('.body_panel').find('li').click(function() {
if ($(this).has("ul")) {
$(this).children('.icon-title-right_panel').hide();
$(this).children('.icon-title-down_panel').show();
} else {
$(this).children('.icon-title-right_panel').show();
$(this).children('.icon-title-down_panel').hide();
}
});
$('.MyPanel').find('li').click(function(evt) {
evt.stopPropagation();
$(this).children('ul').slideToggle();
});
.MyPanel ul li {
cursor: pointer;
position: relative;
}
.MyPanel ul li .icon-title-right_panel,
.MyPanel ul li .icon-title-down_panel {
position: absolute;
top: 0;
right: 0;
font-size: 30px;
}
.MyPanel ul li .icon-title-down_panel {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>
<div class="MyPanel">
<ul class="body_panel">
<li class="title_panel">
<h5>title</h5>
<span class="fas fa-circle-chevron-right icon-title-right_panel"></span>
<span class="fas fa-circle-chevron-down icon-title-down_panel"></span>
<ul class="box-contect_panel">
<li class="contect_panel">
<h1>contect</h1>
</li>
</ul>
</li>
</ul>
</div>
By clicking on the title of any icon on the right side, it will be removed. and it appears by clicking again.
As I specified in the script code; What alternative code should I write to delete the icon on the right by clicking on the title and the icon on the bottom appears instead?
Please try to do like this. the key is to catch the toggle status when you click li.
$('.body_panel').find('li').click(function() {
if($(this).parent().find("ul").eq(0).is(':visible')) {
$(this).children('.icon-title-right_panel').show();
$(this).children('.icon-title-down_panel').hide();
} else {
$(this).children('.icon-title-right_panel').hide();
$(this).children('.icon-title-down_panel').show();
}
});
$('.MyPanel').find('li').click(function(evt) {
evt.stopPropagation();
$(this).children('ul').slideToggle();
});
.MyPanel ul li {
cursor: pointer;
position: relative;
}
.MyPanel ul li .icon-title-right_panel,
.MyPanel ul li .icon-title-down_panel {
position: absolute;
top: 0;
right: 0;
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>
<div class="MyPanel">
<ul class="body_panel">
<li class="title_panel">
<h5>title</h5>
<span class="fas fa-circle-chevron-right icon-title-right_panel"></span>
<span class="fas fa-circle-chevron-down icon-title-down_panel"></span>
<ul class="box-contect_panel">
<li class="contect_panel">
<h1>contect</h1>
</li>
</ul>
</li>
</ul>
</div>
I have some HTML, CSS and JQuery Code. When I do slide down and up, I want to change my "h3" background color with jquery like the below image, it should be reddish. As a result, when I slide down, it must be changed with jquery code.
My accordion sidebar code is :
`<div id="accordion">
<ul>
<li class="active">
<h3><span class="icon-dashboard"><i class="far fa-bell"></i></span>Notifications<span class="notification-span">29</span></h3>
</li>
<li >
<h3 class="tooltip"><span class="icon-coffee"><i class="fab fa-slideshare"></i></span>Summary </h3>
<ul class">
<li class="accordion-li">Lorem</li>
<li class="accordion-li">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud"><i class="fas fa-edit"></i></span>Publish</h3>
<ul>
<li class="accordion-li">Lorem</li>
<li class="accordion-li">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud"><i class="far fa-comments"></i></span>Engage</h3>
<ul>
<li class="accordion-li">Lorem</li>
<li class="accordion-li">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud"><i class="fas fa-volume-up"></i></span>Listen</h3>
<ul>
<li class="accordion-li">Lorem</li>
<li class="accordion-li">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud"><i class="fas fa-chart-line"></i></span>Report</h3>
<ul>
<li class="accordion-li">Lorem</li>
<li class="accordion-li">Ipsum</li>
</ul>
</li>
</ul>
</div>`
My Accordion Css code is:
/*Accordion Menu*/
#accordion {
width: 100%;
background-color: #393d42;
color:#fff;
}
#accordion h3{
text-transform: uppercase;
font-size:12px;
line-height:34px;
padding:10px 10px;
cursor:pointer;
}
#accordion h3:hover{
background-color: #f55661;
}
#accordion h3:link{
background-color:red;
}
/* links */
#accordion ul ul li a{
color:white;
display:block;
font-size:11px;
line-height:27px;
padding: 0 15px;
text-decoration:none;
transition: all .1s;
background-color: #32363a;
}
/* hover effect */
#accordion ul ul li a:hover{
background-color: #f55661;
}
/* hide non-actives by default */
#accordion ul ul{
display:none;
}
#accordion li.active ul{
display:block;
}
/* Icon font styles */
#accordion h3 span{
font-size:16px;
padding-right:10px;
}
i{
font-weight: 100;
color:#f55661;
}
h3:hover i{
color: #fff;
}
I have to change my jquery code. Here we are :
$("#accordion h3").click(function(){
// slide up the list
$("#accordion ul ul").slideUp("fast");
//$( "#accordion ul li h3 ").css('background-color', '#f55661 ');
// slide down if it is closed
if(!$(this).next().is(":visible")){
$(this).next().slideDown("fast")
}
})
Edit:I added this code but it makes all h3 reddish. I have to choose specific one, like "this" command.
$("#accordion ul li h3").css('background-color', '#f55661 ');
You can toggle a class that applies the background color using the .toggleClass() function.
Additionally, you have to loop through all other lists and remove the open class. This can be done via siblings().find('h3').removeClass('open'), which loops through all siblings, finds the h3 element and removes the open class.
$("#accordion h3").click(function() {
$(this).toggleClass('open');
$(this).parent().siblings().find('h3').removeClass('open');
$("#accordion ul ul").slideUp("fast");
if (!$(this).next().is(":visible")) {
$(this).next().slideDown("fast");
}
})
/*Accordion Menu*/
#accordion {
width: 100%;
background-color: #393d42;
color: #fff;
}
#accordion h3 {
text-transform: uppercase;
font-size: 12px;
line-height: 34px;
padding: 10px 10px;
cursor: pointer;
}
#accordion h3:hover {
background-color: #f55661;
}
#accordion h3:link {
background-color: red;
}
.tooltip.open {
background-color: #f55661;
}
/* links */
#accordion ul ul li a {
color: white;
display: block;
font-size: 11px;
line-height: 27px;
padding: 0 15px;
text-decoration: none;
transition: all .1s;
background-color: #32363a;
}
/* hover effect */
#accordion ul ul li a:hover {
background-color: #f55661;
}
/* hide non-actives by default */
#accordion ul ul {
display: none;
}
#accordion li.active ul {
display: block;
}
/* Icon font styles */
#accordion h3 span {
font-size: 16px;
padding-right: 10px;
}
i {
font-weight: 100;
color: #f55661;
}
h3:hover i {
color: #fff;
}
.open {
background-color: #f55661;
}
.open i{
color:white;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion">
<ul>
<li class="active">
<h3><span class="icon-dashboard"><i class="far fa-bell"></i></span>Notifications<span class="notification-span">29</span></h3>
</li>
<li>
<h3 class="tooltip"><span class="icon-coffee"><i class="fab fa-slideshare"></i></span>Summary </h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud "><i class="fas fa-edit "></i></span>Publish</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud "><i class="far fa-comments "></i></span>Engage</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud "><i class="fas fa-volume-up "></i></span>Listen</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud "><i class="fas fa-chart-line "></i></span>Report</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
</ul>
</div>
As mentioned in Spectric's answer, toggling classes is probably ideal, especially if you want to apply CSS transitions to make the color change smoother.
However, given the trajectory you were on, you can accomplish what you're trying to do with the following jQuery:
$("#accordion h3").click(function(){
// Close all previously-opened menu items
$("#accordion ul ul").slideUp("fast");
// Reset color of all h3s to dark gray
$('#accordion h3').css('background-color', '#393d42')
// then...
// For the clicked header, set red bg color
$(this).css('background-color', '#f55661');
// and slide it's sub menu open
$(this).next().slideDown("fast")
})
My HTML Code is for navigation bar:
<Nav>
<ul>
<li onclick="showDropDownMenu('dropdown-menu')" class="dropdown nav-icon">
<span class="fa fa-fw fa-bars"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Games</li>
<li>Workout</li>
<li>Yoga</li>
<li>About Us</li>
</ul>
</li>
<li class="home nav-icon"><i class="fa fa-fw fa-home"></i></li>
<li class="active nav-btn">Home</li>
<li class="nav-btn">Games</li>
<li class="nav-btn">Stay Fit</li>
<li class="nav-btn">About Us</li>
</ul>
<form class="nav-search">
<input type="search" name="Search" class="text-area" placeholder="Search...">
<span class="fa fa-fw fa-search search-btn"></span>
</form>
</Nav>
And my css for second ul element
nav .dropdown ul{
display: none;
position: absolute;
background: black;
min-width: 150px;
left: 0;
box-shadow: 5px 8px 16px 0px rgba(0,0,0,0.5);
z-index: 1;
transition: visibility 0.3s linear;
}
.show{
display: block;
}
My Js code is
showDropDownMenu.js
function showDropDownMenu(className)
{
document.getElementsByClassName(className)[0].classList.toggle("show");
};
And it doesn't work. dropdown doesn't apear at all. I don't know what's going on. Have been looking for the error for a day now.
But if i use the display.block property it works. Js looks like this --
function showDropDownMenu(className)
{
var x = document.getElementsByClassName(className);
if(x[0].style.display = "none"){
x[0].style.display = "block";
}
else
{
x[0].style.display = "none";
}
}
Above works fine but the problem is I have to double click to one every page reload to make the dropdown furst appear.
Your javascript code is actually working. But the issue is that your css for nav .dropdown ul having display: none have more weight than display: block of .show class when applied. That's why even after the toggleClass gets executed, your element is not getting displayd in DOM. Because even after the display: block of show class is applied, the dsplay: none of nav .dropdown ul will be the active style, since the class selection have more weight. The best way to fix this out is to make .show class more specific. That is instead of show use nav .dropdown ul.show this will give more priority to display property of show class when applied.
function showDropDownMenu(className) {
document.getElementsByClassName(className)[0].classList.toggle("show");
}
nav .dropdown ul {
display: none;
position: absolute;
background: black;
min-width: 150px;
left: 0;
box-shadow: 5px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
transition: visibility 0.3s linear;
}
nav .dropdown ul.show {
display: block;
}
<nav>
<ul>
<li onclick="showDropDownMenu('dropdown-menu')" class="dropdown nav-icon">
Click Here
<span class="fa fa-fw fa-bars"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Games</li>
<li>Workout</li>
<li>Yoga</li>
<li>About Us</li>
</ul>
</li>
<li class="home nav-icon"><i class="fa fa-fw fa-home"></i></li>
<li class="active nav-btn">Home</li>
<li class="nav-btn">Games</li>
<li class="nav-btn">Stay Fit</li>
<li class="nav-btn">About Us</li>
</ul>
<form class="nav-search">
<input type="search" name="Search" class="text-area" placeholder="Search...">
<span class="fa fa-fw fa-search search-btn"></span>
</form>
</nav>
The CSS code is wrong, is display: block without quotes.
It's generally accepted as bad practice to use inline event listeners in JavaScript or to put inline CSS styles directly on an HTML element. Keeping your code separated makes it easier to debug and avoids CSS specificity issues. I'd suggest restructuring your code like this (I added comments where code should be changed):
<nav>
<ul>
<!-- Remove event listener from HTML -->
<li class="dropdown nav-icon">
Click Here
<span class="fa fa-fw fa-bars"></span>
<!-- Add 'hide' class to hide dropdown on page load -->
<ul class="dropdown-menu hide">
<li>Home</li>
<li>Games</li>
<li>Workout</li>
<li>Yoga</li>
<li>About Us</li>
</ul>
</li>
<li class="home nav-icon"><i class="fa fa-fw fa-home"></i></li>
<li class="active nav-btn">Home</li>
<li class="nav-btn">Games</li>
<li class="nav-btn">Stay Fit</li>
<li class="nav-btn">About Us</li>
</ul>
<form class="nav-search">
<input type="search" name="Search" class="text-area" placeholder="Search...">
<span class="fa fa-fw fa-search search-btn"></span>
</form>
</nav>
nav .dropdown ul {
/* Remove "display: none" from this selector */
position: absolute;
background: black;
min-width: 150px;
left: 0;
box-shadow: 5px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
transition: visibility 0.3s linear;
}
.show {
/* Remove quotes around 'block' */
display: block;
}
/* Create new hide class */
.hide {
display: none;
}
function showDropDownMenu(className) {
var x = document.querySelector(className);
// Toggle hide and show classes
if(x.classList.contains('hide')) {
x.classList.remove('hide')
x.classList.add('show');
} else {
x.classList.remove('show')
x.classList.add('hide');
}
}
// Get li.dropdown and add click listener to it
// call showDropDownMenu with the dropdown-menu ul on every click
document.querySelector('.dropdown').addEventListener('click', function() {
showDropDownMenu('.dropdown-menu');
});
This works, while also keeping your code neatly separated. If you're familiar with jQuery, you can dispense altogether with the .hide and .show classes, since jQuery provides a toggle() function that does this automatically for you:
<!-- Add jQuery script to the head of your HTML
Get jQuery link at https://code.jquery.com/
-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
// JavaScript file reduced to THREE lines
$('nav ul li.dropdown').click(() => {
$('.dropdown-menu').toggle();
})
If you choose the jQuery route, you should remove the .show and .hide classes from your CSS and HTML, and the nav .dropdown ul would need to have display: none on it:
nav .dropdown ul{
/* Add display: none back if using jQuery */
display: none;
position: absolute;
background: black;
min-width: 150px;
left: 0;
box-shadow: 5px 8px 16px 0px rgba(0,0,0,0.5);
z-index: 1;
transition: visibility 0.3s linear;
}
/* .show{
display: block;
}
.hide {
display: none;
} */
You need to apply display:none inline so the display style property returns something:
function showDropDownMenu(className)
{
var x = document.getElementsByClassName(className);
if(x[0].style.display = "none"){
x[0].style.display = "block";
}
else
{
x[0].style.display = "none";
}
}
nav .dropdown ul {
display: none;
position: absolute;
background: black;
min-width: 150px;
left: 0;
box-shadow: 5px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
transition: visibility 0.3s linear;
}
.show {
display: block;
}
<Nav>
<ul>
<li onclick="showDropDownMenu('dropdown-menu')" class="dropdown nav-icon">
<span class="fa fa-fw fa-bars"></span>
<ul class="dropdown-menu" style="display:none">
<li>Home</li>
<li>Games</li>
<li>Workout</li>
<li>Yoga</li>
<li>About Us</li>
</ul>
</li>
<li class="home nav-icon"><i class="fa fa-fw fa-home"></i></li>
<li class="active nav-btn">Home</li>
<li class="nav-btn">Games</li>
<li class="nav-btn">Stay Fit</li>
<li class="nav-btn">About Us</li>
</ul>
<form class="nav-search">
<input type="search" name="Search" class="text-area" placeholder="Search...">
<span class="fa fa-fw fa-search search-btn"></span>
</form>
</Nav>
I have gotten it to open and close when hovering over the nav link but how do I keep it open so I can access the content on the menu? I need it to work exactly how a dropdown menu works.
This is what I have done so far I also need the html layout to stay the same.
$('.nav-link--dropdown').mouseover(function() {
$('.dropdown-menu').css('display', 'block');
});
$('.nav-link--dropdown').mouseleave(function() {
$('.dropdown-menu').css('display', 'none');
});
ul {
list-style: none;
padding: 0px;
display: flex;
}
li {
margin-right: 10px;
}
.dropdown-menu {
display: none;
}
.dropdown-menu ul {
display: block;
background-color: grey;
color: white;
padding: 10px;
text-align: center;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="nav-link">home</li>
<li class="nav-link--dropdown">dropdown</li>
</ul>
</div>
<div class="dropdown-menu">
<ul>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
</ul>
</div>
View on jsFiddle
Should remove margin use padding for that, if not when we enter that margin area mouse leave event will trigger.
$('.nav-link--dropdown').mouseover(function () {
$('.dropdown-menu').css('display', 'block');
});
$('.dropdown-menu').mouseover(function () {
$('.dropdown-menu').css('display', 'block');
});
$('.nav-link--dropdown').mouseleave(function () {
$('.dropdown-menu').css('display', 'none');
});
$('.dropdown-menu').mouseleave(function () {
$('.dropdown-menu').css('display', 'none');
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding: 0px;
display: flex;
}
li {
padding: 10px;
}
.dropdown-menu {
display: none;
}
.dropdown-menu ul {
display: block;
background-color: grey;
color: white;
padding: 10px;
text-align: center;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="nav-link">home</li>
<li class="nav-link--dropdown">dropdown</li>
</ul>
</div>
<div class="dropdown-menu">
<ul>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
</ul>
</div>
The problem you have here is that you leave the nav-link--dropdown when you move to your dropdown-menu. The simple solution: Include your dropdown-menu in your nav item.
$('.nav-link--dropdown').mouseover(function() {
$('.dropdown-menu').css('display', 'block');
});
$('.nav-link--dropdown').mouseleave(function() {
$('.dropdown-menu').css('display', 'none');
});
ul {
list-style: none;
padding: 0px;
display: flex;
}
li {
margin-right: 10px;
}
.dropdown-menu {
display: none;
}
.dropdown-menu ul {
display: block;
background-color: grey;
color: white;
padding: 10px;
text-align: center;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="nav-link">home</li>
<li class="nav-link--dropdown">
dropdown
<div class="dropdown-menu">
<ul>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
</ul>
</div>
</li>
</ul>
</div>
You can achieve this by bundling the menu item you want to hover over and it's dropdown in the same div.
<div class="nav">
<ul>
<li class="nav-link">home</li>
<div class="innerNav">
<li class="nav-link--dropdown">dropdown</li>
<div class="dropdown-menu">
<ul>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
</ul>
</div>
</div>
</ul>
</div>
And:
$('.innerNav').mouseover(function () {
$('.dropdown-menu').css('display', 'block');
});
$('.innerNav').mouseleave(function () {
$('.dropdown-menu').css('display', 'none');
});
See this JSFiddle: https://jsfiddle.net/rmdfqh6c/
Since your problem is the mouseleave event will trigger when you try to move the mouse to the bellow dropdown menu, if you really must keep the elements separated, add the dropdown-menu to the class that keeps the display:block
$('.nav-link--dropdown, .dropdown-menu').mouseover(function () {
$('.dropdown-menu').css('display', 'block');
});
$('.nav-link--dropdown, .dropdown-menu').mouseleave(function () {
$('.dropdown-menu').css('display', 'none');
});
And remove margin/padding from menu items. Use line-height instead if you want some spacing:
.nav ul li {
line-height: 40px;
}
ul {
list-style: none;
margin: 0; // <--- I changed this from padding: 0px;
display: flex;
}
Otherwise the other suggested solutions to include the dropdown within you parent <ul> element is the best.
JSFiddle
Having an issue getting any kind of interaction from these links in the dropdown. I tried various link types and none are responding to clicks.
<li class="headerContact">
Contact Us<i class="fa fa-envelope"></i>
</li>
<li class="menuLink">
Features<i class="fa fa-caret-right right"></i>
</li>
<li class="menuLink">
Science<i class="fa fa-caret-right right"></i>
</li>
<li class="menuLink">
Videos<i class="fa fa-caret-right right"></i>
</li>
The test page is at bruxzir.jgallardo.me/header.aspx.
This is the full code for that page that I am using during development. (I am not doing this in production)
<!doctype html>
<html class="no-js" lang="en">
<head>
<!--#include file="/pages/_includes/head-default.html" -->
<style>
.active .dropdown { display:block; }
.dropdown { display:none; }
.header {
background-color: #333;
color: #fff;
height: 36px;
width: 100%;
line-height: 36px;
}
/* should be replaced with image */
.headerLogo {
display:inline;
font-size: 24px;
line-height: 36px;
padding-left: 6px;
}
.headerMenu{
float:right;
font-size: 36px;
margin-right: 6px;
}
.headerLogo a, .headerMenu a { color:#fff; text-decoration:none; }
.headerNav {
background-color: #292c2d;
overflow:hidden;
width:100%;
}
.headerNav a { color: #f3f3f3; text-decoration: none; }
.headerNav ul {
list-style-type: none;
margin:0;
padding-left: 0;
text-align:left;
}
.headerNav ul li {
border-bottom: 1px dotted #34393b;
display:inline-block;
width: 100%;
}
.menuLink a {
display:block;
line-height: 48px;
padding: 0 12px;
}
.headerNav ul li a i {
line-height: 48px;
}
.right { float:right; }
.findLabLink {
background-color: #48e0a4;
margin: 0 auto;
text-align: center;
width: 84%;
}
.findLabLink a {
color: rgb(40,43,45);
display:block;
line-height: 48px;
}
.headerContact {
line-height: 60px;
text-align: center;
}
.headerContact a {
background-color: #464241;
border-radius: 2px;
letter-spacing: 3px;
padding: 8px 18px;
}
.headerContact i {
margin-left: 30px;
}
</style>
</head>
<body>
<div class="container">
<div id="mainContent" class="block push">
<div class="row">
<div class="large-12 columns">
<h1>BruxZir Home Page</h1>
<div id="dd" class="wrapper-dropdown-3 dd" tabindex="1">
<div class="header">
<div class="headerLogo">
<!-- change # to / -->
BruxZir
</div>
<div class="headerMenu">
≡
</div>
</div> <!--/ end of .header -->
<div class="headerNav">
<ul class="dropdown">
<li class="findLabLink">
Find An Authorized Lab
</li>
<li class="headerContact">
Contact Us<i class="fa fa-envelope"></i>
</li>
<li class="menuLink">
Features<i class="fa fa-caret-right right"></i>
</li>
<li class="menuLink">
Science<i class="fa fa-caret-right right"></i>
</li>
<li class="menuLink">
Videos<i class="fa fa-caret-right right"></i>
</li>
<li class="menuLink">
Cases<i class="fa fa-caret-right right"></i>
</li>
<li class="menuLink">
Testimonials<i class="fa fa-caret-right right"></i>
</li>
</ul>
</div> <!-- headerNav -->
</div>
</div>
</div>
</div> <!-- end of #mainContent -->
</div>
<!-- JavaScript Declarations
======================== -->
<!--#include file="/pages/_includes/js-default.html" -->
<script>
// all of this is for the menu
function WTF() {
window.location.href = "";
}
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents: function () {
var obj = this;
obj.dd.on('click', function (event) {
event.stopPropagation();
if (event.target.className === 'dd') {
$(this).toggleClass('active');
}
return false;
});
}
}
$(function () {
var dd = new DropDown($('#dd'));
$(document).click(function () {
// all dropdowns
$('.wrapper-dropdown-3').removeClass('active');
});
});
</script>
</body>
</html>
You're returning false and stopping event bubbling for all clicks withing the $('#dd') element right now. I think you only want to do that for your initial menu toggling click on the $('.dd') element.
if (event.target.className === 'dd') {
$(this).toggleClass('active');
event.stopPropagation(); // not sure why you need this
return false;
}
Look at the jsFiddle. I removed a lot of javascript and used one jQuery. I am not sure what you need, let me know if there something I missed.
$(function () {
$('.dd').on('click', function(event){
event.stopPropagation();
$('.wrapper-dropdown-3').toggleClass('active');
});
$(document).click(function () {
// all dropdowns
$('.wrapper-dropdown-3').removeClass('active');
});
});