منوی بسیار زیبا جی کوئری که شبیه منوی گوگل پلی می باشد….
آموزش استفاده از پلاگین
کدهای مربوط به بخش html
<nav class="navigation"> <a href="#" class="active home"> <span class="icon"><i class="icon-home"></i></span> <span class="content">Home</span> </a> <a href="#app_nav" class="green"> <span class="icon"><i class="icon-website"></i></span> <span class="content">Apps</span> </a> <div class="hide second_level" id="app_nav"> <a href="#" class="back"> <i class="icon-chevron-left"></i> </a> <div class="content"> <a href="http://www.google.com"> <span class="content">Popular Apps</span> </a> …. </div> </div> …. </nav>
کدهای مربوط به بخش جاوااسکریپت
$(window).load(function () { $(".navigation > a").click(function() { if (!$(this).hasClass("active")) { $(".navigation").unbind('mouseleave'); $(".navigation .second_level").removeClass("animated <<second-level-animation>>").hide(); var el = $(this); el.addClass("hover"); $(".navigation > a.active").fadeOut("fast", function() { var prev = $(this) prev.removeClass('active'); container_pos = $(".navigation").offset() button_pos = el.offset() el.animate({ top: container_pos.top - button_pos.top }, 500, function() { el.addClass("active").removeClass("hover").css("top", 0); if (el.attr("href").length > 1 && el.attr("href") != "#") { $(".navigation > a:not(.active)").removeClass("<<first-level-animation>> animated").hide(); $(el.attr("href")).addClass("<<second-level-animation>> animated").show(); } else { prev.addClass("<<first-level-animation>> animated").fadeIn("fast"); } }); }); } }); $(".navigation .back").hover( function () { var el = $(this) $(".navigation .second_level").removeClass("animated <<second-level-animation>>").hide(); $(".navigation > a:not(.active)").addClass("<<first-level-animation>> animated").show() $(".navigation").hover(function() {}, function() { $(this).unbind('mouseleave'); $(".navigation > a:visible:not(.active)").hide().removeClass("<<first-level-animation>> animated"); el.closest(".second_level").addClass("animated <<second-level-animation>>").show(); }); }); });
عالی بود
خواهش 😉
سلام این که کار نمیده
سلام امیر جان کجاش مشکل داره ؟
سلام مشکلی نداشت
اینجا رو ببین
http://www.webyar.net
این مشکل داره یه امتحان کنید متوجه می شید روش کلیک کنید قاطی می کنه
بسیار زیبا و کاربردی بود ..باتشکر