The following is basic working DropDown menu, child’s appear on parent hover.
<script type="text/javascript">
$(document).ready(function () {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).stop().slideDown(100);
},
function () {
//hide its submenu
$('ul', this).stop().slideUp(100);
}
);
});
</script>
<style type="text/css">
#nav li {background-color:#CCC; }
</style>
<ul id="nav">
<li>Parent A
<ul>
<li>Item a1</li>
<li>Item a2</li>
<li>Item a3</li>
</ul>
</li>
<li>Parent B
<ul>
<li>Item b1</li>
<li>Item b2</li>
<li>Item b3</li>
<li>Item b4</li>
</ul>
</li>
</ul>
Currently child’s appears when hover is anywhere on the area of the parent box (i.e. also outside the text, on the invisible area of the parent div).
I want the child’s to appear only on hover of the parent link (on the ‘href’ text only).
I couldn’t find the answer anywhere.
Try using the a element as target for hover instead of the entire li, as follows:
<script type="text/javascript">
$(document).ready(function () {
$('#nav ul').hide();
$('#nav li > a').hover(
function () {
//show its submenu
$('ul', this.parentNode).stop().slideDown(100);
}
);
$('#nav li').hover(null,
function (e) {
//hide its submenu
$('ul', this.parentNode).stop().slideUp(100);
}
);
});
</script>
See working demo .
Related
Currently, the toggle opens correctly and applies an 'open' css to the navigation when clicked. However, I cannot get the script to remove the class when you click on a menu item.
Usually this wouldn't be an issue but this menu is being used to scroll to anchor tags within one page, so needs to close once clicked.
Here is my basic markup:
$(document).ready(function(){
$("a.toggle").click(function(){
$("nav > ul").slideToggle(500);
$(this).toggleClass("open");
});
});
HTML
<nav id="main">
<ul>
<li>Example Link 1</li>
<li>Example Link 1</li>
<li>Example Link 1</li>
<li>Example Link 1</li>
</ul>
</nav>
You can attach click event to the menu item to toggle display of main menu. Hope this is what you are looking for.
$("#main ul li a").click(function () {
$("nav > ul").slideToggle(500);
$("a.toggle").toggleClass("open");
});
$(function () {
$("a.toggle").click(function () {
$("nav > ul").slideToggle(500);
$(this).toggleClass("open");
});
$("#main ul li a").click(function () {
$("nav > ul").slideToggle(500);
$("a.toggle").toggleClass("open");
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav id="main">
Home
<ul>
<li>Example Link 1</li>
<li>Example Link 1</li>
<li>Example Link 1</li>
<li>Example Link 1</li>
</ul>
</nav>
you have to look if you have to look if you have the latest version of jquery, if it does not use addclass and remoeclass instead of toggleclass
I have a navigation from a ul, see below:
<nav>
<ul>
<li>Top Link 1</li>
<li>Top Link 2</li>
<ul>
<li><a href="#" >Sub Link 1</a></li>
<li>Sub Link 2</li>
<li>Sub Link 3</li>
</ul>
</li>
<li>Top Link 3</li>
<ul>
<li><a href="#" >Sub Link 1</a></li>
<li>Sub Link 2</li>
<li>Sub Link 3</li>
</ul>
</li>
</ul>
</nav>
I have my css, hiding the the sub link's "ul" unless hovering the parent "li". (Will not show unless asked, as this is not the issues)
I'm trying to use my JQuery to add a css style (margin-bottom:30px;) to the top level "li" only if it has a child "ul" nested in it. My JQuery is as below:
<script>
$(document).ajaxSuccess(function () {
if ($("nav ul >li").children("ul li")) {
$("nav ul >li").hover(function () {
$("nav ul >li").css("margin-bottom", "30");
});
}
});
</script>
This does not appear to be working for me, can anyone point out what I'm doing wrong? Or can they provide a better solution to this approach?
.children will always return an array, check .length
$(document).ajaxSuccess(function () {
if ($("nav ul >li").children("ul li").length > 0) {
$("nav ul >li").hover(function () {
$("nav ul >li").css("margin-bottom", "30");
});
}
});
Try a little something like this :
$('li > ul').each(function(){
$(this).parent().addClass("your class");
});
This will select all uls that are children of li's and apply the class to the respectful li.
you do have an extra </li> in your question which i think is a typo..
<li>Top Link 2</li>
//-------^^^^^here
<ul>
<li><a href="#" >Sub Link 1</a></li>
anyways you check check for length of children if present..
try this
$(document).ajaxSuccess(function () {
if ($("nav ul >li").children().length > 0) {
$("nav ul >li").hover(function () {
$(this).css("margin-bottom", "30");
});
}
});
.children() method returns an object and an object is a truthy value in JavaScript, apart from that if the condition is valuated to true, you are adding a listener to all the li elements not just those that have ul children, You can use .has() method which is a filtering method:
$("nav > ul > li").has('ul').on({
mouseenter: function() {
$(this).css("margin-bottom", "30px");
},
mouseleave: function() {
$(this).css("margin-bottom", "n");
}
});
Or:
li.hovered {
margin-bottom: 30px;
}
$("nav > ul > li").has('ul').on('mouseenter mouseleave', function(e){
$(this).toggleClass('hovered', e.type === 'mouseenter');
});
I plan to apply a custom show/hide effect on link, such that when a user hovers on a link, a different link appears in its place. I'm not so good in javascript and here is what I was trying:
<div id="nav">
<li id="a1">hover link 1</li>
<li id="a2">show link 1</li>
<li id="b1">hover link 2</li>
<li id="b2">show link 2</li>
<li id="c1">hover link 3</li>
<li id="c2">show link 3</li>
</div>
The javascript:
$("#nav a.li").hover(function () {
(this.id.charAt(0)+"1").hide();
});
Here is the fiddle
You missed $ and need to add # befor id your also need to change selector as you do not have anchor with class li
Change
(this.id.charAt(0)+"1").hide();
to
$('#' +this.id.charAt(0)+"1").hide();
Your code would be
Live Demo
$("#nav a li").hover(function () {
$('#'+ this.id.charAt(0)+"1").hide();
});
Edit If you want to remove the item being hovered then use $(this)
Live Demo
$("#nav a li").hover(function () {
$(this).hide();
});
i'm having some trouble.
I'm doing an asp.net mvc3 application and i downloaded some css menu, the thing is i want to keep the menu active after menu tab its clicked and only change when another one is clicked.
here's the code of the menu on _Layout.cshtml
<nav>
<div class="cssmenu">
<ul>
<li class='active'><span>#Html.ActionLink("Início", "Index", "Home")</span></li>
<li><span>#Html.ActionLink("Tarefas Contabilidade", "SelectEmpresa", "Empresa")</span></li>
<li><a href='#'><span>Clientes</span></a>
<ul>
<li><span>#Html.ActionLink("Listar clientes", "ListarEmpresas", "Empresa")</span></li>
</ul>
</li>
<li><a href='#'><span>Balancetes</span></a>
<ul>
<li><span>#Html.ActionLink("Listar registos", "ListaBalancetesPorSalaoMes", "Balancete")</span></li>
</ul>
</li>
<li><span>#Html.ActionLink("Sobre", "About", "Home")</span></li>
</ul>
</div>
</nav>
and i have this script:
<script type="text/javascript">
$("li").click(function () {
$("li").removeClass("active");
$(this).addClass("active");
});
</script>
the first tab that i put there class= "active" works, but the script doesn't seem to work when i click another menu tab, it only shows the first one active
a little help please :)
UPDATED
This is the rendered html:
<nav>
<div class="cssmenu">
<ul>
<li><span>Início</span></li>
<li><span>Tarefas Contabilidade</span></li>
<li><a href='#'><span>Clientes</span></a>
<ul>
<li><span>Listar clientes</span></li>
<li><span>Listar salões</span></li>
<li><span>Gerir empregados</span></li>
<li><span>Novo cliente</span></li>
<li><span>Novo salão</span></li>
</ul>
</li>
<li><a href='#'><span>Balancetes</span></a>
<ul>
<li><span>Listar registos</span></li>
<li><span>Upload novo balancete</span></li>
<li><span>Mapa Resultados/Gráfico</span></li>
<li><span>Mapas Contabilidade/Gestão</span></li>
<li><span>Análise Rentabilidade</span></li>
<li><span>Alterar taxas</span></li>
</ul>
</li>
<li><span>Sobre</span></li>
</ul>
</div>
</nav>
i dont know if i should put the javascript inside the div or something xD
Ty
You can use child selector which selects all direct child elements, Try the following:
$(document).ready(function(){
$(".cssmenu > ul > li").click(function () {
$(this).siblings().removeClass("active");
$(this).addClass("active");
});
})
If you want to select the li tags of the inner ul tags, you can try:
$(document).ready(function() {
$("ul:eq(1) > li").click(function() {
$('ul:eq(1) > li').removeClass("active");
$(this).addClass("active");
});
})
Can you try:
<script type="text/javascript">
$("li a").bind('click', function () {
$("li").removeClass("active");
$(this).addClass("active");
});
</script>
li items are not clickable, so you must bind the click event to a.
try
$("li").click(function (e) {
e.preventDefault();
$(this).siblings().removeClass("active").end().addClass("active");
});
Could some one please help with code.
I want to show the submenu only when submenu parent is clicked.
HTML
<ul>
<li>Item</li>
<li>Item
<ul class="sub-menu">
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Item</li>
<li>Item
<ul class="sub-menu">
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Item</li>
</ul>
So if you click on the parent submenu will show.
Here is fiddle link - http://jsfiddle.net/KhNCV/1/
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).slideDown();
});
http://jsfiddle.net/3nigma/KhNCV/2/
OR
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
http://jsfiddle.net/3nigma/KhNCV/4/
Here's your example working. It's unclear why you need the a tags, as you could use cursor: pointer in the CSS to make the li appear clickable. I'll assume you want to do some spiffy hovering on them in IE that's CSS only? If not, you could simplify by removing them.
Instead of doing hide() on .submenu, you should use CSS (parsed with DOM instead of onReady/load).
.sub-menu { display: none; }
And then here's you code to toggle the menus:
$('ul li a').click(function() {
$(this).parent().find('ul.sub-menu').toggle();
return false;
});
$('.sub-menu').hide();
$("a").click(function(){
$(this).parent().children("ul").toggle();
})
check out this link
http://jsfiddle.net/KhNCV/6/
$('li a').click(
function() {
$(this).next().slideToggle();
})
Try this
$(function(){
//Hide all the sub menus
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
//Find the child ul and slideToggle
$(this).children("ul").slideToggle();
});
});