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'
})
})
Related
So I have a navigation bar with links and sub links. I currently have my links and sub links in the structure ul and li elements. The drop down navigation bar is designed using JavaScript, which is working as intended, minus one issue. I need the parent element to not disappear when the children element are shown. I have included a screenshot below along with the HTML and JS.
Children elements covering parent element
If someone provides an answer can you also explain why the parent gets covered up? I have tried to find this on stack and looked on the web and was not able to find exactly what I was looking for.
Thanks a bunch guys!
function main(){
$('.sub-elements').hide();
$('.main-elements').on('click',function(){
$(this).children().slideToggle(300);
});
}
$(document).ready(main);
<div class = "nav-bar">
<ul class = "nav-drop">
<li class = "main-elements">Link 1
<ul class = "sub-elements">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li class = "main-elements">Link 2
<ul class = "sub-elements">
<li>Sub Link 3</li>
<li>Sub Link 4</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</ul>
</li>
<li class = "main-elements"><a href='#'>Link 3</a>
<ul class = "sub-elements">
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
sub links in the structure ul and li elements. The drop down navigation bar is designed using JavaScript, which is working as intended, minus one issue. I need the parent element to not disappear when the children element are shown. I have included a screenshot below along with the HTML and JS.
Children elements covering parent element
If someone provides an answer can you also explain why the parent gets covered up? I have tried to find this on stack and looked on the web and was not able to find exactly what I was looking for.
Thanks a bunch guys!
It should work:
function main() {
$('.sub-elements').hide();
$('.main-elements').on('click', function () {
$(this).find('.sub-elements').slideToggle(300);
});
}
$(document).ready(main);
Maybe you forget to add the children class in jQuery
function main(){
$('.sub-elements').hide();
$('.main-elements').on('click',function(){
$(this).children('.sub-elements').slideToggle(300);
});
}
$(document).ready(main);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class = "nav-bar">
<ul class = "nav-drop">
<li class = "main-elements">Link 1
<ul class = "sub-elements">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li class = "main-elements">Link 2
<ul class = "sub-elements">
<li>Sub Link 3</li>
<li>Sub Link 4</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</ul>
</li>
<li class = "main-elements"><a href='#'>Link 3</a>
<ul class = "sub-elements">
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
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>
I am trying to implement Slicknav plugin on a website, but it seems not to be loading the js, or not applying required actions defined by it. I have prepared a LIVE DEMO with just the HTML code of the nav, as specified on SlickNav's website
The only things added on the DEMO are the HTML code, the piece of script on it to run the nav, and the js and css files to make it work, as specified on editors website:
HTML
<ul id="menu2">
<li>Parent 1
<ul>
<li>item 3</li>
<li>Parent 3
<ul>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
</li>
<li>item 4</li>
</ul>
</li>
<li>item 1</li>
<li>non-link item</li>
<li>Parent 2
<ul>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
</li>
</ul>
Script piece on the html file:
<script>
$('#menu2').slicknav({
label: '',
duration: 1000,
easingOpen: "easeOutBounce", //available with jQuery UI
prependTo:'#menu2'
});
</script>
Js and Css linked
<link rel="stylesheet" href="css/slicknav.css" />
<script src="js/jquery.slicknav.min.js"></script>
Solution: setting scripts at the bottom of the file
#Vitorino Fernandes: try adding all the js files at the bottom like view-source:http://slicknav.com/
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 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.