can anyone tell me why this funcion drop's me to the top of the page ?
any ideas how to solve this problem?
Or any suggestion's of a better code to use?
P.S. this is for ebay template, quite a big menu section.
<script type="text/javascript">
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onclick=function() {
this.className = (this.className == "on") ? "off" : "on";
}
}
}
}
}
window.onload=startList;
</script>
I have a basic markup:
<ul id="nav">
<li>Home </li>
<li>About >
<ul>
<li>History </li>
<li>Team </li>
<li>Offices </li>
</ul>
</li>
<li>Services >
<ul>
<li>Web Design </li>
<li>Internet Marketing </li>
<li>Hosting </li>
<li>Domain Names </li>
<li>Broadband </li>
</ul>
</li>
<li>Contact Us >
<ul>
<li>United Kingdom</li>
<li>France</li>
<li>USA</li>
<li>Australia</li>
</ul>
</li>
</ul>
Why don't you just simplify it? You could just try:
<li>Home </li>
and change your JS to:
function List(element)
{
element.parentNode.className = (element.parentNode.className == "on") ? "off" : "on";
}
That's much simpler.
EDIT: Or you just replace href="#" with href="javascript:return(false);". As # is a reference to an anchor which does not exist, it will take you to the top of the page.
Here i have done bin using jQuery:
1) Include latest jquery.js file in html header tag first.
2) HTML:
<ul id="nav">
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
About >
</a>
<ul>
<li>
<a href="#">
History
</a>
</li>
<li>
<a href="#">
Team
</a>
</li>
<li>
<a href="#">
Offices
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Services >
</a>
<ul>
<li>
<a href="#">
Web Design
</a>
</li>
<li>
<a href="#">
Internet Marketing
</a>
</li>
<li>
<a href="#">
Hosting
</a>
</li>
<li>
<a href="#">
Domain Names
</a>
</li>
<li>
<a href="#">
Broadband
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Contact Us >
</a>
<ul>
<li>
<a href="#">
United Kingdom
</a>
</li>
<li>
<a href="#">
France
</a>
</li>
<li>
<a href="#">
USA
</a>
</li>
<li>
<a href="#">
Australia
</a>
</li>
</ul>
</li>
</ul>
3) CSS Styles:
ul#nav{
background-color:#445566;
}
ul li{
list-style:none;
}
ul li ul{
background-color:#558888;
}
ul li a{
color:#fff;
text-decoration:none;
}
.off ul{
display:none;
}
.on ul{
display:block;
}
4) JQuery in Script Tag:
$(function() {
$("ul li ul").each(function() {
$(this).parent().addClass('off');
});
$("ul li").mouseenter(function() {
if ($(this).hasClass('off')) {
$(this).removeClass('off');
$(this).addClass('on');
}
});
$("ul li").mouseleave(function() {
if ($(this).hasClass('on')) {
$(this).removeClass('on');
$(this).addClass('off');
}
});
});
Try it on bin : http://codebins.com/bin/4ldqpal
Related
Im experiencing an issue adding a second child to the drop-down-menu.
here is my html code:
<ul class="sidenav sidenav-fixed" id="nav-mobile">
<li>
<a onclick="load('file-name')"><i class="material-
icons">home</i>TEXT
</a>
</li>
<div class="divider"></div>
<li><a onclick="load('file-name')"><i class="material-
icons">apps</i>TEXT</a>
</li>
<li><a onclick="load('file-name')"><i class="material-
icons">copyright</i>Copyright</a>
</li>
<li class="button-dropdown">
<a onclick="load('file-name') class="dropdown-toggle"><i class="material-
icons">assignment</i>Unit A<i class="fa fa-angle-right changed"></i>
</a>
<ul class="dropdown-menu" style="display: none;">
<li>
<a onclick="load('file-name')">Menu 1</a>
</li>
</ul>
<ul class="dropdown-menu" style="display: none;">
<li>
<a onclick="load('file-name')">Menu 2</a>
</li>
</ul>
</li>
</ul>
and here is my js:
jQuery(document).ready(function (e) {
$(".dropdown-toggle").click(function () {
$(this).parents(".button-dropdown").children(".dropdown-
menu").toggle().parents(".button-dropdown").children(".dropdown-
toggle").addClass("active")
});
$('.dropdown-toggle').on('click', function () {
$(this)
.find('.changed')
.toggleClass('fa-angle-down')
.toggleClass('fa-angle-right');
});
});
Here are the styles applied for drop-down-menu:
.dropdown-menu li > a {
text-align: center;
}
.dropdown-menu li:hover > a {
background-color: #385170 !important;
color: #fff !important;
}
.changed {
margin-left: 5px;
}
I need to add another child under Menu 1 and Menu 2.
Thanks a lot for your help.
The first issue I found in your code is that you are defining the same event twice, which means that only the last one will be executed.
To append items with jQuery inside an event listener is as easy as:
Keeping code clean.
Globals at the beginning of your code:
var buttonDropdown = $(".button-dropdown");
And then your event listener for dropdown-toggle click:
$('.dropdown-toggle').on('click', function () {
buttonDropdown.append("<li>new item</li>");
});
This will append a new item to button-dropdown everytime you click dropdown-toggle.
Here is an example:
var buttonDropdown = $(".button-dropdown");
jQuery(document).ready(function (e) {
$('.dropdown-toggle').on('click', function (event) {
let itemNumber = buttonDropdown.children().length;
buttonDropdown.append("<ul><li>Menu "+itemNumber+"</li></ul>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sidenav sidenav-fixed" id="nav-mobile">
<li>
<a onclick="load('file-name')">
<i class="material- icons">home</i>TEXT
</a>
</li>
<div class="divider"></div>
<li>
<a onclick="load('file-name')">
<i class="material- icons">apps</i>TEXT
</a>
</li>
<li>
<a onclick="load('file-name')">
<i class="material- icons">copyright</i>Copyright
</a>
</li>
<li class="button-dropdown">
<a onclick="load('file-name')" class="dropdown-toggle">
<i class="material- icons">assignment</i>Unit A
<i class="fa fa-angle-right changed"></i>
</a>
<ul class="dropdown-menu" style="display: block;">
<li>
<a onclick="load('file-name')">Menu 1</a>
</li>
</ul>
<ul class="dropdown-menu" style="display: block;">
<li>
<a onclick="load('file-name')">Menu 2</a>
</li>
</ul>
</li>
</ul>
Note: This example is made from the context you provided. If it still not solves your entire issue, feel free to edit your question and comment here so I can update mine with the requirements for your question.
And also, you did not provide any styles for your code, that's why it looks so plain.
I am trying to create a dropdown menu. This code for it is:
<script type="text/javascript">
$(document).ready(function(e) {
$('.has-sub').hover(function() {
$(this).toggleClass("tap", 350, "easeOutSine");
});
});
</script>
<li class="has-sub">
<a href="briefing.html">
<img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
</a>
<ul>
<li>
<a href="flightlog.html">
<img src="images/share.png" id="menu-icons">Flight Log</a>
</li>
<li>
<a href="loadsheet.html">
<img src="images/weight.png" id="menu-icons">Loadsheet</a>
</li>
<li>
<a href="#">
<img src="images/compass.png" id="menu-icons">Alternates</a>
</li>
<li>
<a href="#">
<img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
</li>
</ul>
</li>
What I trying to do is to create a hover delay for parent of the Dropdown. You would need to hover over "Flight Briefing" for 2 seconds for the Dropdown menu to appear.
I have tried some other solutions that were provided with different questions, but they did not work.
Your .hover() function is a little wrong - you need a mouseenter and mouseleave function - I have set a timer of 2000 ms (2s) by using setTimeout() to give the 2 sec delay (although in my opinion thats a really long time to hover on an element beforehte effect occurs) and have the mouseout hide the ul directly. I am showing the ul buy habing the .has-sub ul have a display:none and then by adding the .tap class- display:block.
$(document).ready(function(){
$('.has-sub').hover(
function(){setTimeout(function(){$('.has-sub').addClass("tap")},2000)},
function(){$(this).removeClass("tap"); clearTimeout()}
);
});
.has-sub ul{display:none}
.tap ul{display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="has-sub">
<a href="briefing.html">
<img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
</a>
<ul>
<li>
<a href="flightlog.html">
<img src="images/share.png" id="menu-icons">Flight Log</a>
</li>
<li>
<a href="loadsheet.html">
<img src="images/weight.png" id="menu-icons">Loadsheet</a>
</li>
<li>
<a href="#">
<img src="images/compass.png" id="menu-icons">Alternates</a>
</li>
<li>
<a href="#">
<img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
</li>
</ul>
</li>
Here you go. If you need anything else, let me know.
$('.link').mouseenter(function(){
int = setTimeout(() => {
$('.dropdown').fadeIn();
}, 2000);
}).mouseleave(function(){
clearTimeout(int);
});
.dropdown {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="has-sub">
<a href="briefing.html" class='link'>
<img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
</a>
<ul class='dropdown'>
<li>
<a href="flightlog.html">
<img src="images/share.png" id="menu-icons">Flight Log</a>
</li>
<li>
<a href="loadsheet.html">
<img src="images/weight.png" id="menu-icons">Loadsheet</a>
</li>
<li>
<a href="#">
<img src="images/compass.png" id="menu-icons">Alternates</a>
</li>
<li>
<a href="#">
<img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
</li>
</ul>
</li>
I have a JSfiffle
https://jsfiddle.net/zuer7g75/1/
<ul class="dropdown-menu">
<li>
<a href="/camera-photo">
Camera & photo
</a>
</li>
<li>
<a href="/cell-phones">
Cell phones
</a>
</li>
<li>
<a href="/others">
Others
</a>
</li>
</ul>
</li>
<li>
<a href="/apparel">
Apparel
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/shoes">
Shoes
</a>
</li>
<li>
<a href="/clothing">
Clothing
</a>
</li>
<li>
<a href="/accessories">
Accessories
</a>
</li>
</ul>
</li>
<li>
<a href="/digital-downloads">
Digital downloads
</a>
</li>
<li>
<a href="/books">
Books
</a>
</li>
<li>
<a href="/jewelry">
Jewelry
</a>
</li>
<li>
<a href="/gift-cards">
Gift Cards
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form action="/search" method="get" onsubmit="return check_small_search_form()"> <div class="search_box pull-right">
<input type="text" id="small-searchterms" autocomplete="off"
value="Search store" name="q" onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
</div>
Expected behaviour is like this.
1 When I click on any parent category text ( for example computers) , it should lead me to the category page.
2 when I click on the down arrow for the category it should expand and show the subcategory items
All of them works fine, But now I want to move the down arrow to right applying a style="float:right" to the element. But now my expected behaviour 2 is broken.It is leading me to the corresponding page instead of expanding the subcategory items.
What am I doing wrong here?
By floating the font awesome icons to the right instead of the actual a tags i got it to work. Only thing is i couldn't get rid of the padding at the bottom. maybe you want it there? https://jsfiddle.net/RachGal/zuer7g75/3/
$(document).ready(function() {
$('.navbar a.dropdown-toggle').on('click', function(e) {
var elmnt = $(this).parent().parent();
if (!elmnt.hasClass('nav')) {
var li = $(this).parent();
var heightParent = parseInt(elmnt.css('height').replace('px', '')) / 2;
var widthParent = parseInt(elmnt.css('width').replace('px', '')) - 10;
if (!li.hasClass('open')) li.addClass('open')
else li.removeClass('open');
$(this).next().css('top', heightParent + 'px');
$(this).next().css('left', widthParent + 'px');
return false;
}
});
});
function setMouseHoverDropdown() {
if ($(window).innerWidth() > 767) {
$('ul.nav li').hover(function() {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
}
}
$(window).load(function() {
setMouseHoverDropdown();
});
$(document).ready(function() {
setMouseHoverDropdown();
});
$(window).resize(function() {
setMouseHoverDropdown();
});
.fa-angle-down {
float: right;
margin-top: -50px;
}
a.dropdown-toggle {
height: 10px;
padding-bottom: 0px!important;
line-height: 1!important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".category-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse category-navbar-collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span>
</li>
<li> <a href="/computers">
Computers
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li> <a href="/desktops">
Desktops
</a>
</li>
<li> <a href="/notebooks">
Notebooks
</a>
</li>
<li> <a href="/software">
Software
</a>
</li>
</ul>
</li>
<li> <a href="/electronics">
Electronics
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li> <a href="/camera-photo">
Camera & photo
</a>
</li>
<li> <a href="/cell-phones">
Cell phones
</a>
</li>
<li> <a href="/others">
Others
</a>
</li>
</ul>
</li>
<li> <a href="/apparel">
Apparel
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li> <a href="/shoes">
Shoes
</a>
</li>
<li> <a href="/clothing">
Clothing
</a>
</li>
<li> <a href="/accessories">
Accessories
</a>
</li>
</ul>
</li>
<li> <a href="/digital-downloads">
Digital downloads
</a>
</li>
<li> <a href="/books">
Books
</a>
</li>
<li> <a href="/jewelry">
Jewelry
</a>
</li>
<li> <a href="/gift-cards">
Gift Cards
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form action="/search" method="get" onsubmit="return check_small_search_form()">
<div class="search_box pull-right">
<input type="text" id="small-searchterms" autocomplete="off" value="Search store" name="q" onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
</body>
You can just make the a tags within the li to float left, then it should work.
.navbar-default .navbar-nav>li>a {
float:left;
}
Please change the css to be relevant to your project.
In order to get the clicking of the arrow down to work:
close all other drop downs that are currently visible.
remove the "open" class from all OTHER li.
toggle the open class from the current li that corresponds to our click.
toggle the visibility of the drop down that corresponds to our click.
Within the hover code, we also toggle the open class on the li. If a user hovers over arrow down, then we addClass open to the corresponding li. And vice versa.
Please see: https://jsfiddle.net/qynfvow3/30/
I have an vertical navigation with two levels.
What I want is when I press the main li to add active and open class just to the main li and when I press on the sub-menu I want to add active just to that li. Here is my code:
HTML
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="start active open">
<a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="active">
<a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li>
<a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li>
<a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li>
<a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
</ul>
JS
$(".sub-menu li").on("click", function() {
$(".sub-menu li").removeClass("active");
$(this).addClass("active");
});
$(".page-sidebar-menu li").on("click", function() {
$(".page-sidebar-menu li").removeClass("active open");
$(this).addClass("active open");
});
You have to target the closest li inside class .page-sidebar-menu
$(".sub-menu li").on("click", function() {
$(".sub-menu li").removeClass("active");
$(this).addClass("active");
});
$(".page-sidebar-menu > li").on("click", function() {
$(".page-sidebar-menu > li").removeClass("active open");
$(this).addClass("active open");
});
i'm not sure if i understood exactly what you asked.
But, from what i get i remade your html a bit (added a menu class to bind the click event more precisely)
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="menu start active open"> <a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="active"> <a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li> <a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
<li class="menu"> <a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li> <a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li> <a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
</ul>
And so my version of your jQuery looks like that :
$(document).ready(function () {
// added a menu class to bind the click event more precisely
$(".menu > a").on("click", function () {
// nothing is active but this
$(".active").removeClass("active");
// and close the other menus
$(".menu").removeClass("open");
$(this).parent().addClass("active open");
});
$(".sub-menu li").on("click", function () {
// nothing is active but this
$(".active").removeClass("active");
$(this).addClass("active");
});
});
The CSS i used to test it was just this :
.menu { display: block; }
.sub-menu { display: none; }
.open, .open .sub-menu { display: block; }
.active { text-transform: uppercase; }
For an example, go check that jsfiddle that i made to answer you (really basic css here) and tell me if that's what you asked for.
I'm trying to remove and set an active class for a list item every time it's clicked. It's currently removing the selected active class but isn't setting it. Any idea what I'm missing?
HTML
<ul class="nav nav-list">
<li class='nav-header'>Test</li>
<li class="active">Page 1</li>
<li>Page 2</li>
<li><a href="page3.php">Page 3</li>
</ul>
jquery:
$('.nav-list').click(function() {
//console.log("Clicked");
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
this will point to the <ul> selected by .nav-list. You can use delegation instead!
$('.nav-list').on('click', 'li', function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
you can use siblings and removeClass method
$('.nav-link li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
Try this,
$('.nav-list li').click(function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
In your context $(this) will points to the UL element not the Li. Hence you are not getting the expected results.
I used this:
$('.nav-list li.active').removeClass('active');
$(this).parent().addClass('active');
Since the active class is in the <li> element and what is clicked is the <a> element, the first line removes .active from all <li> and the second one (again, $(this) represents <a> which is the clicked element) adds .active to the direct parent, which is <li>.
In my case I have div element with same class. Now I added the active class on it using jquery check the code.
div element
<div class="previewBox" id="first_div">
...
</div>
<div class="previewBox" id="second_div">
...
</div>
<div class="previewBox" id="third_div">
...
</div>
jquery code
$(".previewBox").click(function () {
$(".previewBox.active").removeClass('active')
$(this).addClass('active')
});
css
.active {
background-color:#e9f1f5;
border-left:4px solid #024a81;
}
Demo
click_this
$(document).ready(function(){
$('.cliked').click(function() {
$(".cliked").removeClass("liactive");
$(this).addClass("liactive");
});
});
.liactive {
background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul
className="sidebar-nav position-fixed "
style="height:450px;overflow:scroll"
>
<li>
<a className="cliked liactive" href="#">
check Kyc Status
</a>
</li>
<li>
<a className="cliked" href="#">
My Investments
</a>
</li>
<li>
<a className="cliked" href="#">
My SIP
</a>
</li>
<li>
<a className="cliked" href="#">
My Tax Savers Fund
</a>
</li>
<li>
<a className="cliked" href="#">
Transaction History
</a>
</li>
<li>
<a className="cliked" href="#">
Invest Now
</a>
</li>
<li>
<a className="cliked" href="#">
My Profile
</a>
</li>
<li>
<a className="cliked" href="#">
FAQ`s
</a>
</li>
<li>
<a className="cliked" href="#">
Suggestion Portfolio
</a>
</li>
<li>
<a className="cliked" href="#">
Bluk Lumpsum / Bulk SIP
</a>
</li>
</ul>;