I am using jquery menu in my application.I have 3 levels of submenu.
Like the one shown in the jsfiddle below.
http://jsfiddle.net/ankitap/WC3bE/
When we do mouse hover on the menu options,the submenu will open automatically.
I want to disable this feature and want to open the submenu only on click.
i tried to use:
$( "#menu a" ).menu({ role: null });
I have also tried to give level 1 class name as mainclass and level 2 class name as subclass.
<script>
$("#menu").menu();
$("#menu a").click(function() {
console.log($(this).text()); // gets text contents of clicked li
$(".subclass a").show();
});
$("#menu a").click(function() {
$(".subclass a").hide();
});
</script>
the html code for this is:
<ul id="menu" class="mainclass">
<li>Aberdeen</li>
<li>Ada</li>
<li>Adamsville</li>
<li>Addyston</li>
<li>
Delphi
<ul class="subclass">
<li >
Ada
<ul>
<li>
ankita
</li>
</ul>
<li>Saarland</li>
<li>Salzburg</li>
</ul>
</li>
<li>Saarland</li>
<li>
Salzburg
<ul class="subclass">
<li>
Delphi
<ul>
<li>Ada</li>
<li>Saarland</li>
<li>Salzburg</li>
</ul>
</li>
<li>
Delphi
<ul>
<li>Ada</li>
<li>Saarland</li>
<li>Salzburg</li>
</ul>
</li>
<li>Perch</li>
</ul>
</li>
<li>Amesville</li>
</ul>
I could not stop the opening of submenu on mouse hover.
I want the submenu to open only after click.Please help!
Thank you.
no js/jquery guru but maybe unbind mouseenter and mouseleave events
$("#menu").menu(/*{
select: function( event, ui ) {
var selection = ui.item.text();
var get=this.event;
console.log(get);
}}*/);
$('#menu').unbind('mouseenter mouseleave');
$("#menu a").click(function() {
console.log($(this).text());
});
note the $('#menu').unbind('mouseenter mouseleave'); statement
Related
I have a problem with a drop down menu that must remain open to the click.
After the menu is open, you can click the link inside and the menu item just clicked.
How can I do to remedy the preventDefault ?
Menu HTML:
<nav class="main-menu">
<ul id="" class="menu">
<li>
Menu One
<div class="sub-menu">
<ul>
<li>test test test</li>
... More links ...
</ul>
</div>
</li>
... More items ...
</ul>
</nav>
This is a portion of code
$('.main-menu li a').click(function(event) {
event.preventDefault();
$('.main-menu').find('.sub-menu').removeClass('open');
$(this).parent().find('.sub-menu').addClass('open');
});
An example is visible here JSFIDDLE
Just remove
$('.main-menu').find('.sub-menu').removeClass('open');
Here is a fiddle you can check out
Get rid of event.preventDefault();
Instead do like this
<a href="#" onclick="return false">
Then give each main menu a class name. And call the click event on that class.
https://jsfiddle.net/btevfik/9m9rufqx/3/
You can replace your selector with a more targeted (.menu > li > a) :
$('.menu > li > a').click(function(event) {
event.preventDefault();
$('.sub-menu.open').removeClass('open');
$(this).parent().find('.sub-menu').addClass('open');
});
JSFiddle
please see this fiddle http://jsfiddle.net/rabelais/tw6sdod9/
$(document).ready(function() {
$('li ul').slideUp(0);
$('.no-js li a').on("click", function() {
$('ul#inner-li ul').slideUp(400);
if ($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});
$('#nav li a').on('click', function() {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
$(document).ready(function() {
$('li ul#inner-li-texts').slideDown(0);
$('.no-js li a#texts').on("click", function() {
$('ul ul').slideUp(400);
if ($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="no-js">
<li class="caps">Works
<ul id="inner-li">
<li>blog
</li>
<li>Portraits
</li>
<li>Paintings
</li>
<li>Drawings
</li>
<li>Photography
</li>
</ul>
</li>
<li class="caps"><a id="texts" href="#">Texts</a>
<ul id="inner-li-texts">
<li><a class="current" href="#essay-one">Essay one</a>
</li>
<li>Essay two
</li>
<li>Essay three
</li>
</ul>
</li>
<li class="caps">News
</li>
<li class="caps">Biography
</li>
</ul>
On this fiddle there is a menu with two sub-menus hidden under the 'Works' and 'Text' links.
What I am trying to achieve is this:
On load I want the text sub menu open and the works menu closed.
When the users clicks on either link the sub menu to that link opens or closes.
$(document).ready(function () {
$('li ul').slideUp(0);
$('.no-js li a').on("click", function () {
$('ul#inner-li ul').slideUp(400);
if($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});
Updated the Jsfiddle
HTML
<ul class="no-js">
<li class="caps"><a class="alink" href="#">Works</a>
<ul class="cls" id="inner-li">
<li>blog</li>
<li>Portraits</li>
<li>Paintings</li>
<li>Drawings</li>
<li>Photography</li>
</ul></li>
<li class="caps"><a id="texts" class="alink" href="#">Texts</a>
<ul class="cls" id="inner-li-texts">
<li><a class="current" href="#essay-one">Essay one</a></li>
<li>Essay two</li>
<li>Essay three</li>
</ul>
</li>
<li class="caps"><a class="alink" href="../news.htm">News</a></li>
<li class="caps"><a class="alink" href="../biography.htm">Biography</a></li>
</ul>
Script
$(document).ready(function () {
$('ul.cls').slideUp(0);
$('a.alink').on("click", function () {
$(this).next("ul.cls").slideToggle(400);
});
});
Worked for me
Hope this helps.
Why were you adding a second click handler to #texts? There's one click handler here:
$('.no-js li a').on("click", function () {
//...
});
But then there's another one here:
$('.no-js li a#texts').on("click", function () {
//...
});
So while clicking on any other menu invokes only the first handler, clicking on #texts invokes both. It looks like you only want the first.
You add two times a click-listener for your menu.
I updated the FIDDLE
Just removed the duplicated code and added:
jQuery('#texts').click();
I have a menu with li elements, after click on the one of the elements I like to run a function click and display alert with an id of li element.
JS
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
HTML
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Unfortunately after click nothing happens. No errors in console as well.
Probably the mistake is in a JS code, do you have an idea what is an issue?
https://jsfiddle.net/pgsf6fot/
$(document).ready(function() {
$("#mainmenu li").click(function() {
alert( $(this).attr('id') );
});
});
You have 3 options here to solve your issue:
1- Put your JS code after the html element you need to bind too.
2- Use document.ready to make the js code execute after all html render.
3- Use On
use on event for dynamic elements
$(document).ready(function(){
$("#mainmenu").on("click","li",function() {
alert(this.id);
});
});
Might just be a matter of timing, the DOM might not be ready when your JS is executed. So you register the click events on elements that does not exists at that time, because they have not yet been rendered.
Try wrapping with a DOM ready listener (http://api.jquery.com/ready/), this will hold the executing of your JS until the DOM has been rendered.
$(function() {
$("#mainmenu li").click(function() {
alert(this.id);
});
})
$(function(){
$("#mainmenu li ul li ul li").click(function() {
alert(this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Specify the id attribute of the click li using $(this), and return false to cancel any propagation and the default behaviour of li
<script type="text/javascript">
$("#mainmenu li").click(function(e) {
alert($(this).attr('id'));
return false;
});
</script>
Demo: http://jsfiddle.net/ptx2hwy3/
I have this menu:
<ul id="submenu" class="clearfix">
<li>Vedella</li>
<li>Minis de vedella</li>
<li>Vaca</li>
<li>Poltre</li>
<li>Porc Ibèric</li>
<li>Pollastre</li>
<li>Gall d´indi</li>
<li>Bou</li>
</ul>
Each of the "#submenu" li fadeIn an ul sublist and hide the other sublists.
This are the sublist:
<ul class="sublist first_sublist">
<li>Normal </li>
<li>All i Julivert</li>
<li>Formatge Roquefort</li>
<li>Ceba</li>
</ul>
<ul class="sublist second_sublist">
<li>Mini-Hamburgueses</li>
<li>Surtit Mini-Hamburgueses</li>
</ul>
<ul class="sublist third_sublist">
<li>Normal</li>
</ul>
<ul class="sublist fourth_sublist">
<li>Poltre</li>
</ul>
<ul class="sublist fifth_sublist">
<li>Porc ibèric de Gla</li>
</ul>
and this css:
.second_sublist, .third_sublist, .fourth_sublist, .fifth_sublist, .sixth_sublist{
display: none;
}
with this script:
$('#submenu li').click{
$('#submenu li').removeClass('active');
$(this).addClass('active');
$('.sublist.second_list').hide();
$('.sublist.first_list').fadeIn();
});
The problem with the script is that it will get bigger if i have five sublists, cause i will have to make every click function per "#submenu" li.
Can someone help me to make it simple?
Use class instead of id for binding event so that you do not need id for binding the click event.
$('.clearfix li').click(function(){
$('#submenu li').removeClass('active');
$(this).addClass('active');
$('.sublist.second_list').hide();
$('.sublist.first_list').fadeIn();
});
This is the approach I would take:
Update: I forgot to mention, you could also get rid of the clearfix class.
HTML
<ul id="submenu" class="clearfix">
<li>Vedella</li>
<li>Minis de vedella</li>
<li>Vaca</li>
<li>Poltre</li>
<li>Porc Ibèric</li>
<li>Pollastre</li>
<li>Gall d´indi</li>
<li>Bou</li>
</ul>
<ul class="sublist">
<li>Normal </li>
<li>All i Julivert</li>
<li>Formatge Roquefort</li>
<li>Ceba</li>
</ul>
<ul class="sublist">
<li>Mini-Hamburgueses</li>
<li>Surtit Mini-Hamburgueses</li>
</ul>
<ul class="sublist">
<li>Normal</li>
</ul>
<ul class="sublist">
<li>Poltre</li>
</ul>
<ul class="sublist">
<li>Porc ibèric de Gla</li>
</ul>
JavaScript
$('#submenu li').on('click',function(){
$this = $(this);
// move active class to current list item
$this.addClass('active').siblings().removeClass('active');
// make sure all the sublists are hidden,
// then determine the position of the list item
// in the ul, and select the corresponding sublist
// ex: selecting the 2nd list item in submenu would
// find the 2nd sublist and fadeIn
$('.sublist').hide().eq($this.index()).fadeIn();
});
Of course, this means the sublists would have to be in the same order as the submenu list items.
Check this fiddle
Use the HTML-5 data attributes to store the corresponding sublists in them..
Approaching this way you can use a single handler to show/hide the sublists on the page.
HTML
<ul id="submenu" class="clearfix">
<li>Vedella</li>
<li>Minis de vedella</li>
<li>Vaca</li>
<li>Poltre</li>
<li>Porc Ibèric</li>
<li>Pollastre</li>
<li>Gall d´indi</li>
<li>Bou</li>
</ul>
Javascript
$('#submenu li a').on('click',function() {
var $this = $(this);
var className = $this.data("class");
$('#submenu li a').removeClass('active');
$this.addClass('active');
$('.sublist').hide();
$('.'+ className).show();
});
Use this if you have done your structure this way or if you change this way:
<ul id="submenu" class="clearfix">
<li>Vedella
<ul class="sublist first_sublist">
<li>Normal </li>
<li>All i Julivert</li>
<li>Formatge Roquefort</li>
<li>Ceba</li>
</ul>
</li>
</ul>
$('#submenu li').click(function(){
$('#submenu li').removeClass('active');
$(this).addClass('active');
$('.sublist.second_list').hide();
$('ul',this).fadeIn();
});
I'm new to java and jquery scripting, I've managed to learn how to open menu on item mouse click, but how do I open specific menu on page load?
I'm using this:
<!-- menu -->
<div id="menuone">
<ul id="menu">
<li>
Home
</li>
<li>
<a>About</a>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>
<a>Projects</a>
<ul>
<li>project1</li>
<li>project2</li>
<li>project3</li>
</ul>
</li>
</ul>
</div>
<!-- menu end -->
and my javascript on click is this:
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
but my quest is: how do I open specific item(s) on page load? How do I open menu item 2 for example ("about"), or menu utem 3 ("projects"), etc...?
quite easy actually;
$('#menu li a:eq(1)').trigger('click'); //open "about"
$('#menu li a:eq(2)').trigger('click'); //open "projects"
hope I helped
Put an id to your a tags like
<div id="menuone">
<ul id="menu">
<li>
Home
</li>
<li>
<a id="about">About</a>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>
<a id="projects">Projects</a>
<ul>
<li>project1</li>
<li>project2</li>
<li>project3</li>
</ul>
</li>
</ul>
</div>
and then pass an id of your choice to your function like
// Pay attention to pass id to function
function initMenu(id)
{
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
});
// Add following lines
if (typeof(id) != 'undefined')
{
$('#'+id).click();
}
}
$(document).ready(function() {initMenu('projects');});
Then to change you can use instead
$(document).ready(function() {initMenu('about');});