Kaylo
Reputation: 326
Attempting to add a delay to a Jquery dropdown for a navigation menu
I am attempting to add a delay to this Jquery dropdown. I have tried to use the setTimeout function but this doesn't appear to be working.
I don't know why this isn't working as the delay doesn't happen when I hover over the menu and the submenu drops down immediately. How can I get this to work?
Edit: I'll have to clarify specifically what i want to do. I have a Menu with some submenus. When I hover over the Menu Item, for example 'About', I want a brief delay of 3 seconds before the submenu slides out. Currently, It slides out immediately and this creates an unwanted effect when I quickly move from one Menu item to another. For example, if I move from About to Fees, it shows both submenus at the same time. Basically this is what is happening when I scroll over the menu Items very quickly
https://i.sstatic.net/xZvtI.png
I'm new to Jquery and Javascript and web programming in general, so although I've gone through several similar questions on StackOverFlow, they don't seem to solve my problem. Any assistance will be appreciated.
<script type="text/javascript">
$(document).ready(setTimeout(function() {
$( '.dropdown' ).hover(
function(){
$(this).children('.dropdown-content').slideDown(200);
},
function(){
$(this).children('.dropdown-content').slideUp(0);
}
);
}), 3000);
</script>
EDIT:
This is the HTML of the Menu
<ul id="menu">
<li><a href="index.php"> Home </a></li>
<li class="dropdown" >
<a href="about.php" class="dropbtn">About</a>
<div class = "dropdown-content">
<a href="background.php">Background And History</a>
<a href="vision.php">Vision And Mission</a>
<a href="principalmessage.php">Message From the Principal</a>
<a href="directormessage.php">Message from the Director</a>
<a href="governance.php">Governance</a>
</div>
</li>
<li class="dropdown">
<a href="admission_fees.php" class="dropbtn">Fees</a>
<div class="dropdown-content">
<a href="primaryfees.php">Primary Fees</a>
<a href="secondaryfees.php">Secondary Fees</a>
<a href="admissionform.php">Admission forms</a>
<a href="feepolicy.php">Fee Policy</a>
</div>
</li>
<li class="dropdown">
<a href="academics.php" class="dropbtn">Academics</a>
<div class="dropdown-content">
<a href="primary.php">Primary Curriculum</a>
<a href="lowersecondary.php">Lower Secondary Curriculum</a>
<a href="uppersecondary.php">Upper Secondary Curriculum</a>
<a href="library_ICT.php">Library and ICT Labs</a>
<a href="staff.php">Staff</a>
</div>
</li>
<li class="dropdown">
<a href=" school_life.php" class="dropbtn"> School Life </a>
<div class="dropdown-content">
<a href="boarding.php">Boarding School</a>
<div class="subdropdown">
<a href="extracurricular.php">Extra Curricular Activities</a>
<div class="subsubmenu">
<a href="sports.php">Sports</a>
<a href="clubs.php">Clubs</a>
<a href="entertainment.php">Entertainment</a>
</div>
</div>
<div class="subdropdown">
<a href="students.php">Students</a>
<div class="subsubmenu">
<a href="studentgovernance.php">Governance</a>
<a href="schoolrules.php">Code of Conduct</a>
<a href="alumni.php">Alumni</a>
</div>
</div>
<a href="fieldtrips.php">Field Trips</a>
</div>
</li>
<li>
<a href=" events.php "> Events </a>
</li>
<li class="dropdown">
<a href=" news.php "> News </a>
<div class="dropdown-content">
<a href="notices.php">Notices for Parents</a>
<a href="jobs.php">Jobs</a>
</div>
</li>
<li class="dropdown">
<a href=" gallery.php "> Gallery </a>
<div class="dropdown-content">
<a href="gallery_sports.php">Sports</a>
<a href="gallery_entertainment.php">Entertainment</a>
<a href="gallery_facilities.php">Facilities</a>
</div>
</li>
<li class="dropdown">
<a href=" contact.php "> Contact </a>
<div class="dropdown-content">
<a href="faq.php">FAQ</a>
</div>
</li>
<!--<li><a href="javascript:void(0);" style="font-size:20px;" class="icon" onclick="myFunction()">☰</a></li> -->
</ul>
And the CSS
/*NAVIGATION SECTION*/
nav {
margin: 0px;
}
/*Sets the nav bar in a horizontal manner. Hides the pointers for the list and ensures there's no scroll bar*/
nav ul {
display: flex;
flex-direction:row;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
border-top: 1px solid #670000;
}
/*Styles each of the individual items in the nav bar list. Adds color and changes their font. Adds a border at the end*/
nav ul li {
flex-grow: 1;
font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation Serif",Georgia,serif;
font-size: 15px;
font-weight: bolder;
padding: 0;
}
/*Determines how the links inside the navbar will be displayed.Gives them a background color*/
nav ul li a {
display: block;
background: #800000;
height: 40px;
text-align:center;
padding: 7px 10px;
text-transform: uppercase;
-webkit-transition: 0.45s;
transition: 0.45s;
}
/*Shows how unvisited links will look*/
nav ul li a:link{
text-decoration: none;
color: whitesmoke;
}
/*Changes the color inside visited links*/
nav ul li a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
/*Determines what happens when you hover a link*/
nav ul li a:hover{
color: black;
background-color: white;
}
/*Shows what happens a link is active (page you are currently on)*/
nav ul li a.active {
background-color: indianred;
color: white;
}
/*Styles what happens when you hover an active link on an active page*/
nav ul li a.active:hover {
background-color: #990000;
color: white;
}
/*Dropdown stuff*/
.dropdown-content {
display: none;
position: absolute;
color: black;
min-width: 160px;
border-bottom: 0.5px solid deepskyblue;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.subsubmenu {
display: none;
position: absolute;
left: 223px;
top: 25%;
color:black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
ul li .dropdown-content a:link{
text-decoration: none;
color: whitesmoke;
}
ul li .subsubmenu a:link{
text-decoration: none;
color: black;
}
/*Changes the color inside visited links*/
ul li .dropdown-content a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
ul li .subsubmenu a:visited {
color: black;
margin-left: 60px;
height: 40px;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: black;
}
.subsubmenu a{
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: #f9f9f9;
}
.dropdown-content a:hover {
background-color: #990000;
}
.subsubmenu a:hover {
background-color: #990000;
}
/*
.dropdown:hover .dropdown-content {
display: block;
color: whitesmoke;
} */
.subdropdown:hover .subsubmenu {
display: block;
color: whitesmoke;
}
Upvotes: 0
Views: 1185
Answers (2)
guest271314
Reputation: 1
$(document).ready(setTimeout(function(){}, 3000)) does not delay .slideDown() call at each event dispatched by .hover(); rather, delays call of function passed to setTimeout() at .ready() call for 3000.
You can use .delay(). Also call .clearQueue() chained to $(this).children('.dropdown-content') at function passed to second parameter of .hover() to clear the element queue of .slideDown() call at first parameter.
$(document).ready(function() {
$('.dropdown').hover(
function() {
$(this).children('.dropdown-content')
.delay(1000) // set duration of delay in milliseconds here
.slideDown(200);
},
function() {
$(this).children('.dropdown-content')
.clearQueue()
.slideUp(0);
})
});/*NAVIGATION SECTION*/
nav {
margin: 0px;
}
/*Sets the nav bar in a horizontal manner. Hides the pointers for the list and ensures there's no scroll bar*/
nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
border-top: 1px solid #670000;
}
/*Styles each of the individual items in the nav bar list. Adds color and changes their font. Adds a border at the end*/
nav ul li {
flex-grow: 1;
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
font-size: 15px;
font-weight: bolder;
padding: 0;
}
/*Determines how the links inside the navbar will be displayed.Gives them a background color*/
nav ul li a {
display: block;
background: #800000;
height: 40px;
text-align: center;
padding: 7px 10px;
text-transform: uppercase;
-webkit-transition: 0.45s;
transition: 0.45s;
}
/*Shows how unvisited links will look*/
nav ul li a:link {
text-decoration: none;
color: whitesmoke;
}
/*Changes the color inside visited links*/
nav ul li a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
/*Determines what happens when you hover a link*/
nav ul li a:hover {
color: black;
background-color: white;
}
/*Shows what happens a link is active (page you are currently on)*/
nav ul li a.active {
background-color: indianred;
color: white;
}
/*Styles what happens when you hover an active link on an active page*/
nav ul li a.active:hover {
background-color: #990000;
color: white;
}
/*Dropdown stuff*/
.dropdown-content {
display: none;
position: absolute;
color: black;
min-width: 160px;
border-bottom: 0.5px solid deepskyblue;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.subsubmenu {
display: none;
position: absolute;
left: 223px;
top: 25%;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
ul li .dropdown-content a:link {
text-decoration: none;
color: whitesmoke;
}
ul li .subsubmenu a:link {
text-decoration: none;
color: black;
}
/*Changes the color inside visited links*/
ul li .dropdown-content a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
ul li .subsubmenu a:visited {
color: black;
margin-left: 60px;
height: 40px;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: black;
}
.subsubmenu a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: #f9f9f9;
}
.dropdown-content a:hover {
background-color: #990000;
}
.subsubmenu a:hover {
background-color: #990000;
}
/*
.dropdown:hover .dropdown-content {
display: block;
color: whitesmoke;
} */
.subdropdown:hover .subsubmenu {
display: block;
color: whitesmoke;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li><a href="index.php"> Home </a></li>
<li class="dropdown">
<a href="about.php" class="dropbtn">About</a>
<div class="dropdown-content">
<a href="background.php">Background And History</a>
<a href="vision.php">Vision And Mission</a>
<a href="principalmessage.php">Message From the Principal</a>
<a href="directormessage.php">Message from the Director</a>
<a href="governance.php">Governance</a>
</div>
</li>
<li class="dropdown">
<a href="admission_fees.php" class="dropbtn">Fees</a>
<div class="dropdown-content">
<a href="primaryfees.php">Primary Fees</a>
<a href="secondaryfees.php">Secondary Fees</a>
<a href="admissionform.php">Admission forms</a>
<a href="feepolicy.php">Fee Policy</a>
</div>
</li>
<li class="dropdown">
<a href="academics.php" class="dropbtn">Academics</a>
<div class="dropdown-content">
<a href="primary.php">Primary Curriculum</a>
<a href="lowersecondary.php">Lower Secondary Curriculum</a>
<a href="uppersecondary.php">Upper Secondary Curriculum</a>
<a href="library_ICT.php">Library and ICT Labs</a>
<a href="staff.php">Staff</a>
</div>
</li>
<li class="dropdown">
<a href=" school_life.php" class="dropbtn"> School Life </a>
<div class="dropdown-content">
<a href="boarding.php">Boarding School</a>
<div class="subdropdown">
<a href="extracurricular.php">Extra Curricular Activities</a>
<div class="subsubmenu">
<a href="sports.php">Sports</a>
<a href="clubs.php">Clubs</a>
<a href="entertainment.php">Entertainment</a>
</div>
</div>
<div class="subdropdown">
<a href="students.php">Students</a>
<div class="subsubmenu">
<a href="studentgovernance.php">Governance</a>
<a href="schoolrules.php">Code of Conduct</a>
<a href="alumni.php">Alumni</a>
</div>
</div>
<a href="fieldtrips.php">Field Trips</a>
</div>
</li>
<li>
<a href=" events.php "> Events </a>
</li>
<li class="dropdown">
<a href=" news.php "> News </a>
<div class="dropdown-content">
<a href="notices.php">Notices for Parents</a>
<a href="jobs.php">Jobs</a>
</div>
</li>
<li class="dropdown">
<a href=" gallery.php "> Gallery </a>
<div class="dropdown-content">
<a href="gallery_sports.php">Sports</a>
<a href="gallery_entertainment.php">Entertainment</a>
<a href="gallery_facilities.php">Facilities</a>
</div>
</li>
<li class="dropdown">
<a href=" contact.php "> Contact </a>
<div class="dropdown-content">
<a href="faq.php">FAQ</a>
</div>
</li>
<!--<li><a href="javascript:void(0);" style="font-size:20px;" class="icon" onclick="myFunction()">☰</a></li> -->
</ul>Upvotes: 2
owais
Reputation: 4922
if you are trying delay after simple page load and without any other event call then pull out your slidedown statement from settimeout
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){
$('dropdown').children('.dropdown-content').slideDown(200);
}, 3000)
});
</script>
However if you want on hover then settimeout should be called on hover.
$(function(){
function hoverMe(){
$('dropdown').children('.dropdown-content').slideDown(200);
}
$(".dropdown").on('hover', function(){
setTimeout(hoverMe, 100);
})
})
Also jquery.ready function takes a function definition but you are calling setimeout there instead you should wrap your setimeout in a anonymous function
Upvotes: 0
Related Questions
- Adding hover delay to drop down menu
- drop down menu with delay - not working
- jQuery to add delay to menu navigation, usability
- Adding delay to jquery drop down menu
- How to add a delay to CSS Vertical Dropdown Menu
- Dropdown delay not working
- Delay in CSS styling of Javascript Drop Down Menu
- jQuery delay function with dropdown menu
- Delaying a jQuery Dropdown Menu
- How to add a hiding delay to Full CSS Dropdown Vertical Menu