ijquery

منوی زیبای گوگل پلی

منوی بسیار زیبا جی کوئری که شبیه منوی گوگل پلی می باشد….

screenshot

آموزش استفاده از پلاگین

کدهای مربوط به بخش 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();
            });
          });
      });

 


پیش نمایش دانلود فایل پلاگین

7 دیدگاه دربارهٔ «منوی زیبای گوگل پلی»

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *