I have a navigation menu and I want when mouse moves across, then navigation will be delayed 200 ms. How can I do that?
Example: http://www.amazon.com/
Amazon has left navigation (Shop by department) when the mouse moves across navigation waits.
<ul id="nav">
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
For example; If mouse on "Menu 1" and cross move to "Sub Menu 1", "Menu 1" should not be closed. Else "Menu 1" should be close.
http://cherne.net/brian/resources/jquery.hoverIntent.html is the script you are looking for.
Simply said, it will check whether you went by fast or slow with your mouse.
Related
I am fairly new to java script.
I would like to know how to make a drop down menu in which it will have links as element, but it will change according to what the user inputs.
I am working on a calendar, in which each day there is a different event, and a different link to sign up for that event. My goal is to create a drop down menu that will give the links to sign up for the several events happening on that day. So it will change its content according to which day the user selects. So far, I only see how to create drop down menus with already set links, but I want to have the drop down menu to be able to change the links in the elements, according to what the user chooses.
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3
<ul>
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
</ul></li>
<li>Menu 4</li>
</ul>
Here's a simple example of how to change links in javascript:
<ul>
<li>Menu 1</li>
</ul>
<script>
document.getElementById("link1").setAttribute("href", "https://www.google.com/");
document.getElementById("link1").innerText = "My New Link"
</script>
I'm trying to create a select like this(it is a drop down select input) :
as you can see when the select opens it display main categories which by clicking on each category the sub categories will be shown . also you can click on the tick to choose the current category and sub category.
Also , when sub categories of a category is being displayed , there is two item at the top. one is the tick and the other one is back which by clicking on it , you could see the main categories again.
How can create selects like that?
Thanks in advance
this is the html part that you can use to have a menu and sub-menu.
<body class="no-js">
<nav id="topNav">
<ul>
<li>Nav Link 1</li>
<li>
Nav Link 2
<ul>
<li>Sub Nav Link 1</li>
<li>Sub Nav Link 2</li>
<li>Sub Nav Link 3</li>
<li>Sub Nav Link 4</li>
<li class="last">Sub Nav Link 5</li>
</ul>
</li>
<li>Nav Link 3</li>
<li>Nav Link 4</li>
<li>Nav Link 5</li>
</ul>
</nav>
</body>
Does anybody knows how to resolve the issue in Amazon plugin when I try to put it on my site and put on the third level a checkbox or click somewhere on the div, the level div fades out. how to make the div stay?
This is the plugin
Amazon Plugin
<nav id="mysidebarmenu" class="amazonmenu">
<ul>
<li>Item 1</li>
<li>Folder 0
<div>
<p>Browse our spring collection of useful webmaster tools and resources! Everything from JavaScript, CSS to PHP are covered!</p>
<ul>
<li>JavaScript Kit</li>
<li>CSS Drive</li>
<li>CSS Library
<li>Webmaster Tools
<div>
<p><h3>Image Optimizer</h3>
Use this tool to easily optimize regular gifs, animated gifs, jpgs, and pngs, so they load as fast as possible.
</p>
<p><h3>FavIcon Generator</h3>
Generate a favicon using any regular image with this tool.
</p>
<p><h3>Animated Gif Generator</h3>
Animated Gif Generator lets you easily create an animated gif by uploading a series of still images!
</p>
</div>
<li>PHP For the Absolute Beginner</li>
</ul>
</div>
</li>
<li>Folder 1
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
<li>Sub Item 1.3
<ul>
<li>Sub Item 1.3.1</li>
<li>Sub Item 1.3.2</li>
<li>Sub Item 1.3.3</li>
</ul>
</li>
<li>Sub Item 1.4</li>
<li>Sub Item 1.2</li>
<li>Sub Item 1.3</li>
<li>Sub Item 1.4</li>
</ul>
</li>
<li>Item 3</li>
<li>Folder 2
<ul>
<li>Sub Item 2.1</li>
<li>Sub Item 2.1</li>
<li>Sub Item 2.1</li>
<li>Sub Item 2.1</li>
<li>Sub Item 2.1</li>
<li>Sub Item 2.1</li>
</ul>
</li>
<li>Item 4</li>
</ul>
JS
jQuery(function(){
amazonmenu.init({
menuid: 'mysidebarmenu'
})
})
I'm trying to have a simple dropdown with product listings which will filter the products on click, so the dropdown is Onclick.
Issue -
I have multiple products in a category, i'm trying to have a dropdown which will collapse other products which are not used on click.
The current script i have collapses everything and opens it up again and not able to attach a class to it to show downarrow when opened.
It is way too buggy is there any other way to achieve this or a tutorial / script or something.
Here is the jsfiddle.
$('.topnav li a').click(function(){
if($(this).parent().children().is('ul'))
{
$(this).parent().find('ul').slideToggle();
}
else
{
if($(this).parent().parent().is('ul.topnav'))
{
$('.topnav').find('ul').slideUp();
}
else
{
$('.topnav').find('ul').slideUp();
$(this).parent().parent().slideDown('slow');
}
}
});
i dont have specific solution for your problem,
but still you can take a look at this Select2 jquery plugin, you can have many facilities like searching and displaying image, just check this link Select2 - DropDown
hope this will help you...
please look below link
http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-menu/
You can check demo over there for multilevel dropdown menu.
Changed a little bit of code(html and script) from your jsfiddle see if that is what you are looking for
http://jsfiddle.net/nextg_tech/4N3wA/
script
$('.topnav li a').click(function(){
if($(this).parent().children().is('ul'))
{
$(this).parent().find('ul').slideToggle();
}
else
{
if($(this).parent().parent().is('ul.topnav'))
{
$('.topnav').find('ul').slideUp();
}
else
{
$('.topnav').find('ul').slideUp();
$(this).parent().parent().slideDown('slow');
}
}
});
html
<div class="container">
<ul class="productfilters topnav">
<li>All</li>
<li class="hasarrow">
Product 1
<ul class="ddone">
<li class="hasarrow">Sub Product 1
<ul class="ddone">
<li>Sub 2 Product 1</li>
<li>Sub 2 Product 1</li>
<li>Sub 2 Product 1</li>
<li>Sub 2 Product 1</li>
</ul>
</li>
<li>Sub Product 2</li>
<li>Sub Product 3</li>
</ul>
</li>
<li class="hasarrow">Product 2
<ul class="ddone">
<li>Sub Product of 2</li>
<li>Sub Product of 2</li>
<li>Sub Product of 2</li>
<li>Sub Product of 2</li>
</ul>
</li>
</ul>
</div>
I have a (semantically incorrect) HTML like this:
<ul>
<li class="year">2009</li>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>
<ul>
<li class="year">2008</li>
<li>Project 4</li>
<li>Project 5</li>
<li>Project 6</li>
</ul>
<ul>
<li class="year">2007</li>
<li>Project 7</li>
<li>Project 8</li>
<li>Project 9</li>
</ul>
and a jQuery script like this:
$(function() {
$('.year').click(function() {
$('ul').find('li:not(.year)').slideUp('fast');
$(this).closest('ul').find('li:not(.year)').toggle('fast');
})
})
It works almost as needed. By default all ul li-s are hidden except those having the class year. When the user clicks on a year, any opened year's links slide up and the clicked year's links slide down. The problem is that if I click on a year when it's opened it first slides up (being intercepted by the first line) and then slides down via the toggle line. I'd like it to stay closed with the slide up line not intercepting the currently clicked year.
Hope this makes sense.
Any help appreciated.
May be you should use the :hidden or :visible selector to distinguish which are already shown.
$(function() {
$('.year').click(function() {
$('ul').find('li:not(.year)').slideUp('fast');
$(this).closest('ul').find('li:not(.year):hidden').toggle('fast');
})
})
In therms of the :not is it not true that you can only use filter as opposed to find expressions in here e.g. :not(:blah) or :not([blah] but not :not(.blah)?