I'm making a dropdown menu with jquery (some of the code is borrowed from a tutorial by someone, although I forget who...). When I use the dropdown, it slides up and down really fast, and I can't figure it out. What do you think?
HTML
<div id="nav">
<ul class="topnav">
<li><a class="selected" href="#" title="home">home</a></li>
<li>events</li>
<li>photos</li>
<li>staff
<ul class="subnav">
<li>Luke</li>
<li>Darth Vader</li>
<li>Princess Leia</li>
<li>Jabba the Hutt</li>
</ul>
</li>
<li>contact</li>
jQuery
$(document).ready(function(){
$("ul.subnav").parent() .hover(function() {
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on hover...
$(this).parent() .hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow');
});
$(this).parent().find("ul.subnav") .hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow');
});
}).hover(function() {
$(this).addClass("subhover");
}, function(){
$(this).removeClass("subhover");
});
You can use speed in milliseconds instead 'slow' and 'fast'. Try slideUp(1000) (or 2000-3000 for example). It's should slide up very smooth.
Here is a more simple version of a 1 lvl dropdown, for more levels, its as easy as copy and paste, with a little styles modification. Hope it helps you
<script type="text/javascript">
$(document).ready(function(){
$('.menu-option').hover(mouse_in, mouse_out);
function mouse_in(){
$(' > div', this).slideDown("normal");
}
function mouse_out(){
$(' > div', this).slideUp("fast");
}
});
</script>
<style type="text/css">
ul div
{
display: none;
}
div{
display :table-cell;
position: absolute;
}
.menu-option{
display: block;
float: left;
width: 120px;
}
.menu-option ul{
z-index: 100;
}
</style>
<ul> <li class="menu-option"> MENU 1
<div>
<ul>
<li>sub menu 1 1 </li>
<li>sub menu 1 2 </li>
<li>sub menu 1 3 </li>
</ul>
</div> </li> <li class="menu-option"> MENU 1 <div>
<ul>
<li>sub menu 1 1 </li>
<li>sub menu 1 2 </li>
<li>sub menu 1 3 </li>
</ul>
</div> </li>
<li class="menu-option"> MENU 1 <div>
<ul>
<li>sub menu 1 1 </li>
<li>sub menu 1 2 </li>
<li>sub menu 1 3 </li>
</ul>
</div> </li>
<li class="menu-option"> MENU 1 <div>
<ul>
<li>sub menu 1 1 </li>
<li>sub menu 1 2 </li>
<li>sub menu 1 3 </li>
</ul>
</div> </li> </ul>
Related
I'm trying to find a way to disable mouseenter when the top-level navigation item is clicked & on pageload and re-enable again when the mouse leaves and enters the element again.
User hovers over element = show submenu
User clicks menu = hide submenu and only show submenu when user leaves menu elements and enters again.
If user is over the element onLoad then only show submenu when user leaves element and enters again.
$('.navmenu li').on('mouseenter', function(e) {
$(e.target).next().addClass('js-hover')
}).on('mouseleave', function(e) {
$(e.target).next().removeClass('js-hover')
});
$('.navmenu').on('click', function(e) {
$(e.target).next().removeClass('js-hover')
location.reload(true);
})
.navmenu .submenu {
display:none;
}
.navmenu li {
display: inline;
}
.navmenu .submenu {
position:absolute;
top:40px;
left:0
}
.navmenu li:hover .js-hover {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navmenu">
<ul>
<li>
Menu
<nav class="submenu">
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</nav>
</li>
<li>
Menu 2
<nav class="submenu">
<ul>
<li>Submenu 4</li>
<li>Submenu 5</li>
<li>Submenu 6</li>
</ul>
</nav>
</li>
</ul>
</nav>
this could be done using variables and storing a state of element (if it should be hidden or not). But since you tried to do this through class attributes, I did the same. Here is simle example of one menu item, everything should be clear.
<nav class="navmenu">
<ul>
<li>
Menu
<nav class="submenu" hidden>
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</nav>
</li>
</ul>
</nav>
and javascript:
$menuLink = $("nav.navmenu li > a");
$menuLink.click(function () {
$(this).addClass("dontHide");
});
$menuLink.mouseenter(function () {
$(this).next("nav.submenu").removeAttr("hidden");
$(this).removeClass("dontHide");
});
$menuLink.mouseleave(function () {
if(!$(this).hasClass("dontHide")) {
$(this).next("nav.submenu").attr("hidden", true);
}
});
Live demo: https://jsfiddle.net/g3fua461/24/
Suppose I have a following structure:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item11</li>
<li>Item12</li>
<li>Item13</li>
</ul>
</li>
This tree structure can have many levels.
Initially, I want to show following list:
Item 1
Item 2
Item 3 +
When I click on + list becomes
Item 3 -
Item 11
Item 12
Item 13
So, parent list disappears and sublist is shown.
If I click -, then everything is returned to the previous list.
Is there some jquery plugin for doing this?
Perhaps, some options in accordion?
Thanks in advance.
Used Dkouk his version to create what you need.
EDIT 1: Hide other menu items
EDIT 2: Second level menu
$(function () {
$('ul li').each(function () {
if ( $(this).find('ul').length > 0 ){
$(this).addClass('child');
}
});
$('ul li.child span').click(function() {
$(this).parent().toggleClass('open').find('ul').first().slideToggle();
$(this).parent().siblings().slideToggle();
});
});
ul {
list-style:none;
}
ul li.child span:after {
content:"+";
}
ul li.child.open span:after {
content:"-";
}
li ul { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="main">
<li>Item 1</li>
<li>Item 2</li>
<li>
<span>Item 3</span>
<ul>
<li>Item 1</li>
<li>
<span>Item 2</span>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</li>
</ul>
You can add a class to your list when it's have a sublist, and toggle the list and toggle another class for parent of list so can change the '+' to '-'.
You can as many levels, and the code will work,
I've add a span to the list have child, but so can trigger the click only at text, if you trigger click for LI list and have sublist open then will close again.
You can style the content.
Here a simple example :
$(function () {
$('ul li').each(function () {
if ( $(this).find('ul').length > 0 ){
$(this).addClass('child');
}
});
$('ul li.child span').click(function() {
$(this).toggleClass('open').parent().find('ul:first').slideToggle();
$(this).parent().siblings().slideToggle();
});
});
ul {
list-style:none;
}
ul li.child span:after {
content:"+";
}
ul li.child span.open:after {
content:"-";
}
ul li ul { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>
<span>Item 3</span>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>
<span>Item 3</span>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm trying to change the colour of active menu/submenu which is selected by user.
For example when Sub11 is clicked, Link 1 and Sub11 will both turn red. Likewise when Sub22 is clicked, Link 2 and Sub22 will be red.
ul a { cursor: pointer; }
.active { color:red;}
<ul>
<li class="active"><a>Link 1</a>
<ul>
<li><a>Sub11</a></li>
<li><a>Sub12</a></li>
</ul>
</li>
<li><a>Link 2</a>
<ul>
<li><a>Sub21</a></li>
<li><a>Sub22</a></li>
</ul>
</li>
<li><a>Link 3</a></li>
</ul>
try using jquery this code:
$('.link > a').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
$('.submenu > li').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
$(this).parent('ul').prev('a').addClass('active');
});
Explanation:
The first part: whenever you click on .link item you remove every other active item and set the clicked one to active.
The second part: whenever you click on a submenu item you remove active state from the previous item and set it to the clicked submenu item and its predecessor .link item
You gonna have to add classes link and submenu to your html like this:
<ul>
<li class="link">
<a class="active">Link 1</a>
<ul class="submenu">
<li><a>Sub11</a></li>
<li><a>Sub12</a></li>
</ul>
</li>
<li class="link">
<a>Link 2</a>
<ul class="submenu">
<li><a>Sub21</a></li>
<li><a>Sub22</a></li>
</ul>
</li>
<li class="link"><a>Link 3</a></li>
</ul>
Here is a fiddle
My website nav-menu uses slideToggle function in the mobile menu.It has a slide toggler which controls the open/close of menu.One of the menu has a sub-menu . When clicking on that menu having sub-menu(Contains ul) the sub-menu open and closes and opens 4/5 times and then it closes.
My codes are
<span class="menu-toggler"></span>
<ul class="nav-menu align-right">
<li class="current">home</li>
<li>about us</li>
<li>services</li>
<li>works</li>
<li>team</li>
<li>Blog</li>
<li>
Extra
<ul>
<li>blog grid 3</li>
<li>blog grid 4</li>
<li>blog single</li>
<li>portfolio 3</li>
<li>portfolio single</li>
</ul>
</li>
<li>contact</li>
<li><i class="fa fa-search"></i></li>
</ul>
And my js
$(document).on('click', '.menu-toggler' ,function(e){
$('.nav-menu').slideToggle();
$('.menu-toggler').toggleClass('open');
});
if($('.nav-menu li').find('ul')){
$('.nav-menu li ul').addClass('drop-menu');
}
$(window).on('load resize', function(){
if($(window).width() < 1000){
$('.drop-menu').parent('li').find('a').on('click', function(){
$('.drop-menu').slideToggle();
})
}
})
How can i stop repetating sliding of the sub-menu
It might be reading multiple clicks. Just do a slide down function on click and hide the menu with a separate function.
$(document).on('click', '.menu-toggler' ,function(e){
$('.nav-menu').slideDown();
$('.menu-toggler').toggleClass('open');
});
$('.open').on('click',function(){
$('.nav-menu').hide();
});
i have menu like this
<ul>
<li>
Home
<ul class="sub">
<li>Text</li>
<li>Test</li>
</ul>
</li>
<li>
About
<ul class="sub">
<li>Text</li>
<li>Test</li>
</ul>
</li>
<li>
Contact
<ul class="sub">
<li>Text</li>
<li>Test</li>
</ul>
</li>
</ul>
I am using hoverIntent plugin that cause the sub-menu to remain opened for 3 seconds. But i want to close the other opened sub-menu on hovering a main menu. How to close other sub-menus?
here is js code
$('ul > li').hoverIntent({
over: function(){
$(this).children('ul').slideDown('slow');
},
timeout: 3000,
out: function(){
$(this).children('ul').slideUp();
}
});
Try this:
$('ul > li').hoverIntent({
over: function(){
// slide up all submenus before opening this menu
$("ul.sub").slideUp();
$(this).children('ul').slideDown('slow');
},
timeout: 3000,
out: function(){
$(this).children('ul').slideUp();
}
});