Hello i have created a multi level navigation in magento. Now i have a problem with the opening and closing of my menu. I want my menu to close the "active" Top Menu when the other Top Menu is clicked.
I cant seem to get this part correct.
Javascript:
jQuery(document).ready(function(jQuery) {
jQuery(".sub_category").hide();
jQuery(".sub_sub_category").hide();
jQuery('#product-nav li a').click(function () {
jQuery('#product-nav li a').removeClass('active');
jQuery(this).addClass('active');
});
jQuery('ul li.expanded a').each(function(i){
var subUl = jQuery(this).parent().find('ul'); //Get the sub ul.
jQuery(this).bind('click',function(e){
// Prevent the default action of the link
subUl.toggle();
}) ;
});
jQuery(".head_child").click(function(e) {
e.preventDefault();
});
jQuery('li:has(ul) > a').click(function(e) {
e.preventDefault();
});
var url = window.location.toString();
jQuery('ul li.expanded a').each(function(){
var myHref= jQuery(this).attr('href');
var subUl = jQuery(this).parent().find('ul'); //Get the sub ul.
if( url.match(myHref)) {
jQuery(this).addClass('activeElement')
subUl.toggle();
}
});
});
Please see my jsfiddle for the example of my code.
http://jsfiddle.net/wvEcF/1/
Related
I am working on adding several expanding divs to a page, but am running into trouble getting the divs to automatically collapse when another expands. Here is the script that I am working with:
$(document).ready(function() {
$('.nav-toggle').click(function(){
var collapse_content_selector = $(this).attr('href');
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
}
});
});
});
Try this:
$(document).ready(function() {
$('.nav-toggle').click(function() {
var selected = $($(this).attr('href'));
$(".tab").not(selected).hide();
selected.toggle();
});
});
Replace .tab with the class you use for your expandable DIVs.
I need to make menu with multi-level sub menus for mobile.
This is dynamic menu, so I can not add more classes to html.
Menu is sliding down when I click on element which have child .sub-menu:
> ul.sub-menu
But when I want to click another (deeper) element in same node all this node menu is going to slideUp.
Here is my code:
jsFiddle
For example:
First > 03 > (closing) > First > (03 is opened) > 03-02 > (closing) > First > 03 > (closing) > First > My node to element 03-02-02 is already opened.
Thanks for advance for your help
FULL SOLUTION HERE:
jsFiddle
Try using this to solve the issue
var test1 = $( '#menu-mobile-slide ul.menu li' );
test1.on( 'click', function(e) {
e.preventDefault();
var mobileMenu = $(e.target).parent().find( '> ul.sub-menu' );
if( mobileMenu.css('display') == 'none' ) {
mobileMenu.slideDown();
e.stopPropagation();
} else {
mobileMenu.slideUp();
e.stopPropagation();
}
});
You can try to bind the click events to every a(instead of li) and find the submenu to slide up/down with siblings() function.
You can also use slideToggle() to open/close submenus.
The click is prevented only if is present a sibling ul.
var test1 = $('#menu-mobile-slide li > a');
test1.on('click', function(e) {
var mobileMenu = $(this).siblings('ul');
if (mobileMenu.length > 0) {
e.preventDefault();
}
mobileMenu.slideToggle();
});
I have a navigation menu which the style of the elements change if i click on them..they get the class "active".
I have a dropdown Menu in my navigation, how can i make it that the drop down title get the class and not only the elements at the dropdown. Here my page.
Here is the code for the navigation:
$('#content').children('section').not('#home').hide();
$('.active:has(a.anavigation-element)').not('.navbar-brand').not('#home').removeClass('active');
$(".a").click(function(e){
var $this = $(this);
e.preventDefault();
if ($(this).hasClass('navigation-element')){
var $target = $('#' + $(this).attr('href')).stop(true, true);
var $secs = $('#content > section').not($target).stop(true, true).filter(':visible');
if ($secs.length) {
$('.active:has(a.navigation-element)').not('.navbar-brand').removeClass('active');
$this.not('.navbar-brand').parent().addClass('active');
$secs.fadeOut(function () {
$target.fadeIn();
});
} else {
$this.not('.navbar-brand').parent().addClass('active');
$target.fadeIn();
}
} else if ($(this).hasClass('hide')){
$(this).parent().fadeOut();
}
});
Thank you for helping me!
This is the code and this is the result: you can see test the menu by clicking inside.
$(document).ready(function () {
var $links = $('#menu-menu-1 .menu-item a').click(function () {
var submenu = $(this).next();
$subs.not(submenu).hide()
submenu.toggle(500);
$("#menu-2").slideToggle(300);
});
var $subs = $links.next(); });
The problem is that if I click on the menu it appears the submenu, but if I don't close the submenu that I have open and I open another voice in the menu it doesn't work properly.
If I click another .menu-item a when #menu-2 is open what happens? The script close and open another submenu correctly but my #menu-2 close only close. And then if I close .menu-item a so... #menu-2 open. How can I do to fix?
Try
$(document).ready(function () {
var $menu2 = $("#menu-2");
var $links = $('#menu-menu-1 .menu-item a').click(function () {
var submenu = $(this).next();
$subs.not(submenu).hide();
var isVisible = submenu.stop(true, true).is(':visible');
$menu2.stop(true, true);
if (isVisible) {
submenu.hide(500);
$menu2.slideUp(300);
} else {
$menu2.slideUp(300, function () {
$menu2.slideDown(300);
submenu.show(500);
});
}
});
var $subs = $links.next();
});
I think you could simplify what you're trying to do with something along these lines (untested):
$(function () {
var menuItems = $('#menu-menu-1 > li');
var submenus = $('ul', menuItems)
menuItems.click(function () {
submenus.slideUp(); // Hide all menus to their default hidden state
var submenu = $('ul', $(this)); // Show the child menu for the clicked menu
submenu.toggle(500);
});
});
I want to close my Javascript menu by clicking outside of the menu. I am using this menu. I'm not professional, please tell me how to change my code to do that:
$("#theme_select").click( function () {
if (theme_list_open == true) {
$(".center ul li ul").fadeOut();
theme_list_open = false;
} else {
$(".center ul li ul").show();
theme_list_open = true;
}
return false;
});
$("#theme_list ul li a").click(function () {
var theme_data = $(this).attr("rel").split(",");
$("li.purchase a").attr("href", theme_data[1]);
$("li.remove_frame a").attr("href", theme_data[0]);
$("#iframe").attr("src", theme_data[0]);
$("#theme_list a#theme_select").text($(this).text());
$(".center ul li ul").hide();
theme_list_open = false;
return false;
});
If you want to close that menu when the iframe area is clicked, you have to do that in the iframe. Try putting this in your iframe's document ready function:
$("html").click( function () {
$(".center ul li ul", window.parent.document).fadeOut();
window.parent.theme_list_open = false;
});
Seems you use $("#theme_select").click( function () { for both open and close the menu. and use $("#theme_list ul li a").click(function () { to handle click on menuitem, which will close the menu after.
In fact there is simple solution to your problem. Use $("#theme_select").click for only open the menu, and $("#theme_list ul li a") for handle the link, and introduce $(window).click to close the menu.
function checkAndCloseMenu(evt) {
var dropmaker = $('#theme_select')[0];
for (var node = evt.target; node != document.body; node = node.parentNode)
if (node == dropmaker) return false; // check if click in the dropmaker
$('.center ul li ul').fadeOut();
$(window).unbind('click', checkAndCloseMenu);
}
$("#theme_select").click(function() {
$(".center ul li ul").show();
$(window).click(checkAndCloseMenu);
});
$("#theme_list ul li a").click(function() {
var theme_data = $(this).attr("rel").split(",");
$("li.purchase a").attr("href", theme_data[1]);
$("li.remove_frame a").attr("href", theme_data[0]);
$("#iframe").attr("src", theme_data[0]);
$("#theme_list a#theme_select").text($(this).text());
return false;
});
PS: may be you should give the menu and menuitems some class names, your selector is painful to read.