I'm trying to build an off-canvas menu that has multiple levels. I've made a quick codepen of my early attempts.
How can I change the code below to have the menu close any open sections if another 'level 1' (+)link is opened? Currently I just have a toggle on any item that is clicked. I'd like to make it a bit more intelligent. Also if the level above is closed all levels below it will close too.
$('.off-canvas__content').on('click', '.nav-click', function(e) {
e.preventDefault();
$this = $(this);
$this.children('i').toggleClass('icon-minus').toggleClass('icon-plus');
$item = $this.parent('.nav__item');
$item.toggleClass('nav__item--open');
});
Adding this to your code will make things work, I guess:
if($item.hasClass('nav__item--open')) {
$item.siblings().find('.nav__item--open').removeClass('nav__item--open');
$item.siblings().find('.icon-minus').addClass('icon-plus').removeClass('icon-minus');
$item.siblings().removeClass('nav__item--open');
}
CodePen
hide all parent elements exept element on which is clicked
Edit this:
$item.toggleClass('nav__item--open').siblings().toggle();
Related
I am trying to finish up my navigation for my site. I'm attaching the jsfiddle code to show you what code I have now. My problem is my child links become gray when they are suppose to but, I want to make the top level link when I click on that gray as well. The way I have my pages labeled is like this
Page1
Page1a
Page1b
Page2
Page2
.
.
.
ETC.
I need Page1 and Page2 to turn gray like the sublevels do. If anyone can help me with this I would really appreciate it. Thank you for your time.
http://jsfiddle.net/gUmYP/
<script type="text/javascript">
$('#body').ready(function(){
var URL = location.pathname.split("/");
URL = URL[URL.length-1];
//<![CDATA[
for(var i = 0; i < 11; i++){ // 4 = number of items, if you add more increase it, make number 1 larger than total items.
if ((URL.indexOf(i) != -1) && (!$('#i'+i).is(':visible'))) {
$('#nav ul:visible').slideUp('normal');
$('#i'+i).slideDown(0);
$('#i'+i)
.find('li')
.each( function() {
var current = $(this).find('a')[0];
if (current.href == window.location.href)
current.style.backgroundColor = "#ccc";
current.style.color = "#006";
});
}
}
});
</script>
Previous question was here, but was never answered fully:
Highlight Links on Navigation
Unfortunately none of the answers below have solved my issue, some have made it so the parent link now highlights, but it makes the other features not work correctly. I need the menu to still highlight in yellow when I hover over everything, I need the submenus to still be the light blue when not active, and I need all active links(parent or child) to show the gray highlight that they are the active link. Does anyone know the solution to fix all those issues?
Look at this JSFiddle.
$('#nav li a').click(
(...)
// Here I removed the "active" class from all siblings "li"
$(this).parent().siblings().removeClass("active");
(...)
// Here I add the "active" class to this "li"
$(this).parent().addClass("active");
(...)
)
Note 1: The new JSFiddle
So I currently have two toggle boxes set up and there will be more soon, I'd like to keep the JS pretty simple and not have a new script for each area, but whenever I attempt to toggle in one place it applies the function to both other the toggle-content boxes I have set up.
In order to see both areas, open the first one and close it before opening the second so a product is added to the Recently Viewed box
http://www.coreytegeler.com/bolivares/shop/pablo-ribbed-winter-skully/
http://www.coreytegeler.com/bolivares/shop/salvador-crewneck-sweater-copy/
Here's what I have in place now:
$(window).load(function(){
$('.toggle-link').click(function(e){
$('.toggle-content').slideToggle();
e.preventDefault();
});
$(".toggle-link div").click(function()
{
$(".toggle-link div").toggle();
});
});
I tried using $(this).find('.toggle-content').slideToggle(); but still no luck.
I know this is a pretty easy fix but just can't figure it out.
Any help would be great!
$(document).ready(function(){
$('.toggle-link').click(function(e){
$(this).closest("ul").children('.toggle-content').slideToggle();
$(this).children('div').toggle();
});
});
Ran into problem with creating custom select dropdown plugin in jQuery. I'm at the one-at-the-time-open feature. Meaning, that when you open a dropdown, then other(s) will close.
My first idea was to create some global array with all dropdowns in it as objects. Then in the "opening"-function, I would add the first line to first check that none of the dropdowns are open (if open, then close them.)
I created a very scaled version of my script: http://jsfiddle.net/ngGGy/1/
Idea would be to have only one dropdown open at the time. Meaning, that when you open one, other(s) must be closed, if not they will automatically close when a new one is opened.
Your dropdown set seems to behave like an accordion.
This is easier to accomplish if you wrap each dropdown in a div with a class, then use that to target all the dropdown uls you have.
I forked your jsfiddle with a working example.
(EDIT updated fiddle link)
You can keep track of the DropDownSelectized lists like this: http://jsfiddle.net/pimvdb/ngGGy/3/.
(function($){
var lists = $(); // cache of lists
$.fn.DropDownSelect = function (settings) {
jQuery.globalEval("var zindex = 100");
var thiselement = $(this);
var thislist = thiselement.next('ul');
lists = lists.add(thislist); // add current one to cache
thiselement.click(function () {
lists.slideUp(); // hide all lists initially
if (thislist.is(':visible')) {
thislist.slideUp();
} else {
thislist.css('z-index', ++zindex).slideDown();
}
});
};
})(jQuery);
You're definitely on the right track, but if you're only going to have one dropdown list open at a time then you want them to be related somehow. Fortunately your markup is already there, so all we should have to do is modify the JS. I've updated your jsFiddle project here: http://jsfiddle.net/ninjascript/ngGGy/4/
First the selector. jQuery will let you select attributes that are similar by using ^= like this:
$('div[id^=button]').DropDownSelect();
Now we just have to update your plugin a bit. Notice that what used to be 'thislist' is now called 'everylist'. Now we can enforce that every list closes on click before opening the list associated with the button that was clicked.
(function($){
$.fn.DropDownSelect = function (settings) {
jQuery.globalEval("var zindex = 100");
var thiselement = $(this);
var everylist = thiselement.next('ul');
thiselement.click(function () {
var thislist = $(this).next('ul');
if (everylist.is(':visible')) {
everylist.slideUp();
}
thislist.css('z-index', ++zindex).slideDown();
});
};
})(jQuery);
Good luck!
Why not raise an event that all drop-downs subscribe to. pass in the id (or instance) of the one currently being opened. In the handler check whether the handling instance is the one being opened. If not, close it.
trying to implement menu from :this tutorial, but dont know how to make when one submenu is toogle open to automaticly closed himself when another is toogle open.
thx
you can use a selector to get "Not This", on the this.click event which will return all of the other menus and will allow you to close them.
Supplying some source code will probably get you a better answer.
You could close all open toggles before the new one is opened.
$(document).ready(function(){
hideMenus();
$('.toggle').click(function(){
var menu = $(this);
hideMenus();
if (menu.hasClass('toggle-open')) {
menuHide(menu);
}else{
menuShow(menu);
}
});
});
function hideMenus(){
$('.toggle').each(function(){
menuHide($(this));
});
}
function menuHide(menu){
menu.removeClass('toggle-open').addClass('toggle-closed').empty('').append('+').parents('li').children('ul').slideUp(250);
menu.parent('.menutop').removeClass('menutop-open').addClass('menutop-closed');
}
function menuShow(menu){
menu.parent('.menutop').removeClass('menutop-closed').addClass('menutop-open');
menu.removeClass('toggle-closed').addClass('toggle-open').empty('').append('–').parents('li').children('ul').slideDown(250);
}
Is there any way to increase the time a drop-down menu created stays on screen? The drop down menu just appears and disappears as I touch the cursor. The drop-down was created using Prototype.
Use a different drop down menu:
Here's over 25 that might better suit your needs:
http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html
Or mention what drop down menu you are using so we can at least discover the option for you!
Whatever function you have attached to the rolloff of the menu to make it disappear, add that code to another function and use a setTimeout() call to pause for a time before removing the menu.
Example:
Old Code
var closeMenu = function() {
$('menu').hide();
};
New Code
var hideMenu = function() {
$('menu').hide();
};
var closeMenu = function() {
setTimeout(hideMenu, 5000);
};
With that change, you've now delayed the menu's disappearing act for 5 seconds. Probably don't want to take that long but you get the idea.