I am facing a problem while using token input in my menu list.
on hover of menu list my sublist opens and in that when i search for tokens input box and after result i wanted to select one token but the window is being closed .. please help
<ul id="navlist">
<li>list one
<ul id="subnavlist">
<li> <input type="text" id = "test" name= "test1" size='6'></test1>
</li></ul>
</li></ul>
my css goes like this
ul#navlist li:hover
{
background-color: #ffffff;
border:1px solid #E46713;
padding-bottom:10px;
}
ul#subnavlist { display: none; }
ul#subnavlist li { float: left; }
ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 0px;
width:auto;
}
ul#navlist li:hover ul#subnavlist li
{
display: block;
border: 2px;
padding: 0px;
}
Related
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.imgur.com/Nv554m9.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> Home </li>
<li class="dropdown" >
About
<div class = "dropdown-content">
Background And History
Vision And Mission
Message From the Principal
Message from the Director
Governance
</div>
</li>
<li class="dropdown">
Fees
<div class="dropdown-content">
Primary Fees
Secondary Fees
Admission forms
Fee Policy
</div>
</li>
<li class="dropdown">
Academics
<div class="dropdown-content">
Primary Curriculum
Lower Secondary Curriculum
Upper Secondary Curriculum
Library and ICT Labs
Staff
</div>
</li>
<li class="dropdown">
School Life
<div class="dropdown-content">
Boarding School
<div class="subdropdown">
Extra Curricular Activities
<div class="subsubmenu">
Sports
Clubs
Entertainment
</div>
</div>
<div class="subdropdown">
Students
<div class="subsubmenu">
Governance
Code of Conduct
Alumni
</div>
</div>
Field Trips
</div>
</li>
<li>
Events
</li>
<li class="dropdown">
News
<div class="dropdown-content">
Notices for Parents
Jobs
</div>
</li>
<li class="dropdown">
Gallery
<div class="dropdown-content">
Sports
Entertainment
Facilities
</div>
</li>
<li class="dropdown">
Contact
<div class="dropdown-content">
FAQ
</div>
</li>
<!--<li>☰</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;
}
$(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> Home </li>
<li class="dropdown">
About
<div class="dropdown-content">
Background And History
Vision And Mission
Message From the Principal
Message from the Director
Governance
</div>
</li>
<li class="dropdown">
Fees
<div class="dropdown-content">
Primary Fees
Secondary Fees
Admission forms
Fee Policy
</div>
</li>
<li class="dropdown">
Academics
<div class="dropdown-content">
Primary Curriculum
Lower Secondary Curriculum
Upper Secondary Curriculum
Library and ICT Labs
Staff
</div>
</li>
<li class="dropdown">
School Life
<div class="dropdown-content">
Boarding School
<div class="subdropdown">
Extra Curricular Activities
<div class="subsubmenu">
Sports
Clubs
Entertainment
</div>
</div>
<div class="subdropdown">
Students
<div class="subsubmenu">
Governance
Code of Conduct
Alumni
</div>
</div>
Field Trips
</div>
</li>
<li>
Events
</li>
<li class="dropdown">
News
<div class="dropdown-content">
Notices for Parents
Jobs
</div>
</li>
<li class="dropdown">
Gallery
<div class="dropdown-content">
Sports
Entertainment
Facilities
</div>
</li>
<li class="dropdown">
Contact
<div class="dropdown-content">
FAQ
</div>
</li>
<!--<li>☰</li> -->
</ul>
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
A few hours back I asked a question on how my background disappeared when i added a collapsible list. The solution they gave me was:
body.ui-overlay-a {
background-color: #dc143c;
}
div.ui-page-theme-a {
background-color: transparent;
}
I asked the same person about the blue box and he gave me this:
div.ui-page-theme-a {
background-color: transparent;
}
But this didn't work does anyone have any answers?
Navigation bar code (CSS):
/* Navigation bar */
.nav {
font-family: 'Roboto', sans-serif;
margin-top: 20px;
height: 40px;
background: #000000;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav ul li {
list-style: none;
}
.nav ul li a {
text-decoration: none;
float: right;
display: block;
padding: 10px 50px;
color: white;
}
.nav ul li a:hover {
color: #D3D3D3;
}
.headerBreak {
width: 100%;
height: 0;
border-bottom: 2px solid #000000;
}
h4 {
font-family: 'Roboto', sans-serif;
font-size: 24px;
text-align: right;
text-decoration: none;
}
p {
font-family: 'Lato', sans-serif;
font-size: 30px;
}
And this is the content inside the navigation bar (inside )
<div class="nav">
<ul>
<li>Contacts</li>
<li>Map</li>
<li>Reservations</li>
<li>Online Order</li>
<li>Menu</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
<div class="headerBreak"></div>
Note that this does not only apply to the navigation bar but also applies to my and
Reference: http://i.imgur.com/acnJE5Y.png
Edit 1: I added this website to a free domain hoster, I have also added outline: none; to nav ul li a { but it still doesnt work when i open itbut when I duplicate the file and I open it the text does not have the blue outline, but in my original file it does
http://marcxu88.000webhostapp.com
If you could inspect the code and see if what is wrong it would be greatly appreciated.
Thanks in advance.
Try adding outline: none; to the selector .nav ul li a.
I am using an include file to add the navigation bar to all of my pages. inside the inc file i have my JS css and html table, everything is working except for the js function that is supposed to show the hidden sub links. its been forever since ive coded js so i followed a tutorial and i can not figure out why this isnt working. here is my code::
<script type="text/javascript" src="../js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('li').hover(function () {
$(this).find('ul>li').stop().fadeToggle(200);
});
});
</script>
<style type="text/css">
#nav{
background-color: #282828;
height: 20px;
width: 100%;
float: left;
}
ul{
margin: auto;
padding: 0;
list-style: none;
display: table;
}
ul li {
float: left;
height: 20px;
line-height: 20px;
text-align: center;
}
ul li a{
text-decoration: none;
color: darkgray;
padding: 0 10px;
}
ul li li{
background-color: #282828;
display: none;
}
ul li ul li{
width: 100%;
}
ul li:hover{
background-color: red;
}
</style>
<div id="nav" class="click-nav">
<ul class="ul">
<li>Home</li>
<li>Command Center</li>
<li>Stats</li>
<li>Community
<ul>
<li>Wiki</li> <br>
<li>Forum</li> <br>
<li>Facebook</li> <br>
</ul>
</li>
<li>Updates</li>
<li>About</li>
<li>Support</li>
</ul>
</div>
was an invalid reference to my jquery file. thanks
I've just tried it with jQuery 12.2 and 11.1, which seems to work:
https://jsfiddle.net/2cq1badz/
$('li').hover(function () {
console.log($(this).find('ul>li'));
$(this).find('ul>li').stop().fadeToggle(200);
});
I've also checked you're correctly selecting the drop-down items, so that doesn't seem to be an issue.
I am Creating my personal website but I can not get the drop down to work on desktop then when it is on a mobile devise hide nav and click(using js) to show nav. But its not working only on the Index.html
<div class="content">
<div class="header">
<div class="logo">GM
</div>
<span class="menu-trigger">Menu</span>
<nav class="nav clearfix">
<ul class="clearfix">
<li><a class="active" href="index.html">Home</a>
</li>
<li>About
</li>
<li>Portfolio <i class="fa fa-angle-down fa-1"></i>
<ul class="sub-nav">
<li>Music
</li>
<li>Code
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
<!-- end of Nav -->
</div>
</div>
CSS:
/**Header**/
.nav {
height: 61px;
background: #381120;
}
.logo a{
float: left;
text-decoration: none;
color: #7e7e7e;
font-size: 43px;
padding-top: 11px;
padding-left: 30px;
}
.nav ul {
margin: 0;
padding: 0;
float: right;
}
.nav ul li {
list-style: none;
float: left;
display: block;
padding: 19px;
}
.nav ul li a {
color: #7e7e7e;
text-decoration: none;
font-size: 25px;
}
.nav ul ul.sub-nav {
display: none;
background: #381120;
width: auto;
position: absolute;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul ul li {
float: none;
padding-left: 24px;
}
.nav ul li a.active {
color: #08a1c7;
}
.nav ul li a:hover {
color: #efefef;
}
and:
.menu-trigger{
padding-top: 16px;
padding-right: 30px;
font-size: 25px;
text-align: center;
display: none;
float: right;
color: #7e7e7e
}
.menu-trigger p{
color: #7e7e7e
}
/**480px**/
#media only screen and (max-width : 480px) {
.menu-trigger{
display: block;
}
.nav, .mobile-nav{
display: none;
}
.nav-expanded{
display: block;
}
.nav ul li{
float: none;
border-bottom: 1px solid #7e7e7e;
}
.nav ul li:last-child{
border-bottom: none;
}
}
Here is the JS sorry I forgot to put it on here:
jQuery(document).ready(function() {
jQuery(".menu-trigger").click(function() {
jQuery(".nav").slideToggle(400, function() {
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});
You really should be able to animate all of this with just CSS. You don't even need jQuery for this, other than for the click action maybe.
Also, and this may not be the case, but in past I have had to write my click handlers like this to bypass some odd bugs. SlideToggle in jQuery can cause some glitchy effects and its not really a great way to do animated menu's. Try to avoid slideToggle().
$("[your-selector]").on("click",function(){
/// do something...
});
I have created a jsfiddle with your code and its seems to work fine. Its rather unclear from what you ask, But what I guess is that your dropdown doesnt work on mobile screen. A problem could be importing jquery in your HTML file. That might solve your problem
jQuery(document).ready(function() {
jQuery(".menu-trigger").click(function() {
jQuery(".nav").slideToggle(400, function() {
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});
Nevermind I fix it I added a
<div class="content">///content goes here</div>
twice causing it to break Thank You for all your help still.
Lets say I have the following menu structure. I have 3 problems with it.
$('.parent ul').hide();
var current_parent;
$(document).delegate('.parent', 'click', (function() {
var $this = $(this);
if(current_parent !== undefined) {
current_parent.find('ul').slideUp();
}
current_parent = $this;
// Check if the element is visble or not
if(!$this.find('ul').is(':visible')) {
$this.find('ul').slideDown();
} else {
$this.find('ul').slideUp();
}
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="parent">menu item1
<ul>
<li class="child">Sub menu item1</li>
<li class="child parent">Sub menu item2
<ul>
<li class="child">Sub-sub menu item1</li>
</ul>
</li>
</ul>
</li>
<li class="parent">menu item2
<ul>
<li class="child">Sub menu item3</li>
</ul>
</li>
</ul>
When you click on menu item 1 the Sub-sub menu item1 is also
opened. How can this be prefented?;
When you click on Sub menu item2 the menu item1 is also closed. How can this be prefented?.
How can I make this more dynamic so that when I add deeper menu items the menu still works but without having to add things like: $('ul ul ul').slideDown(); etc.?
Could anyone help me with these problems?
Thanks in advance
You can create a drop drop down menu with jquery
I have given individual HTML, CSS and JQuery code, use it and try to understand it.
There is an outer <div id="navigation"> and inside it their is annow in it everyis main menu item andin everyis sub menu item. Furthermore you can create sub menu in sub menu also by creatingin`.
$(document).ready(function () {
$("li").click(function () {
var x = $(this).children("a:first").attr("href");
if (x != undefined)
window.location.href = x;
});
$("#nav li").hover(function () {
$(this).find("ul:first").css({
visibility: "visible",
display: "none",
}).slideDown(400);
}, function () {
$(this).find("ul:first").css({ visibility: "hidden" });
});
});
body {
font-family: Calibri, Verdana;
font-size: 16px;
color: white;
}
a {
color: inherit;
text-decoration: none;
}
#navigation {
height: 40px;
}
#nav {
list-style: none;
margin: 0px;
padding: 0px;
}
#nav ul {
list-style: none;
margin: 10px 0px 0px -5px;
padding: 0px;
display: none;
}
#nav li {
float: left;
width: 150px;
height: 30px;
padding: 10px 0px 0px 5px;
border: 0px solid transparent;
border-right-width: 1px;
border-right-color: gray;
background-color: #6397CB;
}
#nav li ul li {
width: 145px;
height: 22px;
padding: 10px 0px 8px 10px;
border: 0px solid transparent;
border-top-width: 1px;
border-top-color: gray;
}
#nav li ul li ul {
position: relative;
top: -40px;
margin-left: 145px;
color: white;
}
#nav li ul li ul li {
border: 0px solid transparent;
border-left-width: 1px;
border-left-color: gray;
border-top-width: 1px;
border-top-color: gray;
}
#nav li:hover {
background-color: lightgray;
cursor: pointer;
}
#nav li ul li:hover {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigation">
<ul id="nav">
<li>My Name</li>
<li>About U
<ul>
<li>How U?
<ul>
<li>Your Extras</li>
</ul>
</li>
<li>Howz U?</li>
</ul>
</li>
<li>More</li>
</ul>
</div>