marioloncarek / megamenu-js

Last responsive megamenu you'll ever need
MIT License
360 stars 115 forks source link

Accordian Issues #3

Open govind2988 opened 8 years ago

govind2988 commented 8 years ago

Hi, How to close other opened ul's when i clicking "+". Also need to changes + to - when displaying submenu.

marioloncarek commented 8 years ago

Hello @govind2988 ! This is the feature that will be in the next version of this script. This version is NOT supporting opening submenus as accordions out of the box and you could very easily make it work :) In the meantime please wait for new version(soon). Thanks for using megamenu.js!

govind2988 commented 8 years ago

Ok thank you Mario Loncarek.

TeeDubyaWa commented 8 years ago

I think this is what he was asking for.

$(".menu > ul > li").click(function () { if ($(window).width() <= 943) { $(this).children("ul").fadeToggle(150); $(this).siblings("li").find("ul:first").hide(); } });

marioloncarek commented 8 years ago

Thanks for your contribution!!

marioloncarek commented 8 years ago

Hello, just to let you know, your request is in development with v2

G-dogger commented 7 years ago

Hi, any idea when v2 will be available???

marioloncarek commented 7 years ago

You can already use it, just chose v2 in branch dropdown on github. Only thing is there are no animations.

webCoordinator commented 7 years ago

Here's how I got the +/- thing working on the mobile submenus. Note that I renamed the menu-dropdown-icon class to menu-open-icon, didn't use the image font, and claim no jQuery mastery.

CSS Changes

/ Screen Styles / .menu-open-icon:before, .menu-close-icon:before { display: none; cursor: pointer; float: right; font-size: 3em; background: #8f2615; color: #fff; } .menu-open-icon:before { content: "+"; padding: .5em; } .menu-close-icon:before { content: "-"; padding: .45em .5em .55em; }

/ Mobile Styles / .menu-open-icon:before, .menu-close-icon:before { display: block; }

JavaScript Changes (aside from changing 'dropdown' to 'open' near the top to match my CSS change)

$(".menu > ul > li").click(function() { if ($(window).width() <= 959) { / Shows or hides the submenu / $(this).children("ul").fadeToggle(150); } if ($(this).hasClass("menu-open-icon")) { / Swap + with - when the submenu is opened / $(this).removeClass('menu-open-icon'); $(this).addClass('menu-close-icon'); } else { / Swap - with + when the submenu is closed / $(this).removeClass('menu-close-icon'); $(this).addClass('menu-open-icon'); } });

G-dogger commented 7 years ago

Any chance you can just make a new complete css and js version?

On Wed, Aug 2, 2017 at 1:47 AM, Michael Mitchell notifications@github.com wrote:

Here's how I got the +/- thing working on the mobile submenus. Note that I renamed the menu-dropdown-icon class to menu-open-icon, didn't use the image font, and claim no jQuery mastery.

CSS Changes

/ Screen Styles / .menu-open-icon:before, .menu-close-icon:before { display: none; cursor: pointer; float: right; font-size: 3em; background: #8f2615; color: #fff; } .menu-open-icon:before { content: "+"; padding: .5em; } .menu-close-icon:before { content: "-"; padding: .45em .5em .55em; }

/ Mobile Styles / .menu-open-icon:before, .menu-close-icon:before { display: block; }

JavaScript Changes (aside from changing 'dropdown' to 'open' near the top to match my CSS change)

$(".menu > ul > li").click(function() { if ($(window).width() <= 959) { /* Shows or hides the submenu

/ $(this).children("ul").fadeToggle(150); } if ($(this).hasClass("menu-open-icon")) { / Swap + with - when the submenu is opened

/ $(this).removeClass('menu-open-icon'); $(this).addClass('menu-close-icon'); } else { / Swap - with + when the submenu is closed */ $(this).removeClass('menu-close-icon'); $(this).addClass('menu-open-icon'); } });

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/marioloncarek/megamenu-js/issues/3#issuecomment-319574031, or mute the thread https://github.com/notifications/unsubscribe-auth/AXc__5IZb3DL2eXqkGWGw4Yki_whI6dEks5sUA11gaJpZM4IklWC .