How do simplify megamenu this jQuery code? -
hi i'm trying simplify code can't think way it, ideas? mega mega
$(function() { $('#globalnavigation').find("a").bind({ click: function() { if (".submenu:hidden") { $(".submenu").css("display", "block"); } if ($('a[href$="#a-menu"]')) { $(this).addclass("active"); $("#services-menu").css("display", "none"); $("#innovations-menu").css("display", "none"); $("#insights-menu").css("display", "none"); $("#professionals-menu").fadein(750); } if ($('a[href$="#b-menu"]')) { $(this).addclass("active"); $("#professionals-menu").css("display", "none"); $("#innovations-menu").css("display", "none"); $("#insights-menu").css("display", "none"); $("#services-menu").fadein(750); } if ($('a[href$="#c-menu"]')) { $(this).addclass("active"); $("#services-menu").css("display", "none"); $("#innovations-menu").css("display", "none"); $("#professionals-menu").css("display", "none"); $("#insights-menu").fadein(750); } if ($('a[href$="#d-menu"]')) { $(this).addclass("active"); $("#services-menu").css("display", "none"); $("#professionals-menu").css("display", "none"); $("#insights-menu").css("display", "none"); $("#innovations-menu").fadein(750); } } }); });
css:
.submenu-content { display: none; }
html:
<nav id="globalnavigation"> <ul> <li><a id="menu-item-a" href="#professionals-menu">professionals</a></li> <li><a id="menu-item-b" href="#services-menu">services</a></li> <li><a id="menu-item-c" href="#insights-menu">insights</a></li> <li><a id="menu-item-d" href="#innovation-menu">innovation</a></li> </ul> </nav> <section class="submenu" style="display: block;"> ... <div class="submenu-content" id="submenu-content-a"> <div class="submenu-content" id="submenu-content-b"> <div class="submenu-content" id="submenu-content-c"> <div class="submenu-content" id="submenu-content-d"> ... </section>
javascript:
$('#globalnavigation').find("a").click(function () { $(this).addclass("active"); $('.submenu').show(); $('.submenu-content').hide(); var id = $(this).attr('id').replace('menu-item-', ''); $('#submenu-content-' + id).fadein(750); });
Comments
Post a Comment