آموزش ایجاد منوی متحرک با جی کوئری
آموزش ایجاد منوی پیمایش با جی کوئری

آموزش ایجاد منوی متحرک با جی کوئری

امروز ما در این آموزش قصد داریم تا به شما نحوه ایجاد یک منو متحرک با استفاده از جی کوئری رو بدهیم.ما برای ملموس شدن آموزش یک صفحه مربوط به یک رستوران را برایتان پیاده سازی خواهیم کرد که در آن از این نوع منو ها استفاده شده است.

برای مشاهده لینک وارد شود

 خوب ما کار رو با کدهای HTML آغاز می کنیم.کد HTML ما دارای بخش های مختلفی مانند تصویر زمینه،آیکون ها ،منوهاو… است.ما در زیر کد مربوط به تصویر زمینه را برایتان می آوریم.

<div id="ac_background" class="ac_background">
	<img class="ac_bgimage" src="images/Default.jpg" alt="Background"/>
	<div class="ac_overlay"></div>
	<div class="ac_loading"></div>
</div>

 تصویر پس زمینه که از آن به عنوان تصویر اصلی یاد می کنیم هنگام بازگذاری صفحه به کاربران نمایش داده خواهد شد،سپس با کلیک بر روی هر یک از منو ها تصویر مربوط با آن برای کاربران نمایش داده خواهد شد یعنی تصویر پس زمینه عوض خواهد شد.

کد مربوط یه بارگذاری منو ها و محتوای آنها در زیر قرار دارد که ما  آن را برایتان نمایش می دهیم.

<div id="ac_content" class="ac_content">
			<h1><span>رستوران</span>کنج دل</h1>
			<div class="ac_menu">
				<ul>
					<li>
						<a href="images/Appetizers.jpg">پیش غذا</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>پیش غذا</h2>
							<ul>
								<li>آرامش عجیبی در روح من قرار دارد،پس از این صبح شیرین بهاری بیشترین لذت را ببرید.</li>
								<li>آش رشته</li>
								<li>باقلوا</li>
								<li>سوپ سنتی</li>
								<li>سوپ خامه</li>
							</ul>
						</div>
					</li>
					<li>
						<a href="images/MainCourse.jpg">غذای اصلی</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>غذای اصلی</h2>
							<ul class="anim_item">
								<li>باران  با ضربه های خود به شیشه پنجره،غم خود را با نابودی خود بیان می کند.</li>
								<li>کباب بره</li>
								<li>کباب سلطانی</li>
								<li>شاندیز</li>
								<li>جوجه سلطانی </li>
								<li>کوفته تبریزی</li>
								<li>آش اوماج(آش سنتی)</li>
								<li>قورمه سبزی</li>
								<li>قیمه بادمجان</li>
							</ul>
						</div>
					</li>
					<li>
						<a href="images/Specials.jpg">پیشنهاد سرآشپز</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>پیشنهاد سرآشپز</h2>
							<ul>
								<li>در دوردست ترین منزل هنوز سوی چراغی به عشق تو در حال خودنمایی است.</li>
								<li>آش اوماج</li>
								<li>کوفته تبریزی</li>
								<li>خوراک بوقلمون</li>
								<li>کوکتل ماهی</li>
								<li>آش با کشک محلی</li>
								<li>شاندیز</li>
							</ul>
						</div>
					</li>
					<li>
						<a href="images/Desserts.jpg">دسرها</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>دسرها</h2>
							<ul>
								<li>برای داشتن یک زندگی آسان دعا نکنید، دعا کنید تا توانایی آن را داشته باشید که از پس یک زندگی دشوار برآیید.</li>
								<li>ژله</li>
								<li>سالاد کاهو</li>
								<li>سالاد میوه</li>
								<li>بستنی</li>
							</ul>
						</div>
					</li>
					<li>
						<a href="images/Wines.jpg">نوشیدنی ها</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>نوشیدنی ها</h2>
							<ul>
								<li>اگر بدانید بسیاری از مردم هزاران بار بیشتربه یک سردرد معمولی خود اهمیت می دهند تا به خبر مرگ من و شما ،دیگر نگران نخواهید شد که درباره شما چه فکری می کنند!</li>
								<li>بیت مالت</li>
								<li>پپسی </li>
								<li>دوغ</li>
								<li>قهوه</li>
								<li>نسکافه</li>
								<li>چای</li>
								<li>پیشنهاد روز</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>

 ما برای هر یک از آیتم های منو یک تگ با عنوان “ac_subitem” داریم که محتوای مربوط به زیر منو ها را برایمان نگه میدارد.

CSS

به علت ساده بودن کدهای مربوط به استایل ها ما فقط بخشی از کدها را که نیاز به توضیح دارند را برایتان نمایش می دهیم و شما برای مشاهده کامل کدها  باید به سورس مراجعه فرمایید.

.ac_subitem{
	width:400px;
	height:0px; /* animate to 400px */
	top:50%;
	left:0px;
	margin-top:0px; /* animate to -200px */
	position:fixed;
	z-index:99;
	overflow:hidden;
	background:transparent url(../images/bg_menu.png) repeat top left;
  text-align:right;
  direction: rtl;
}

تکه کد بالا برای زیر منو ها عرض اولیه ۴۰۰ پیکسل و ارتفاع ۰ را در نظر می گیرد و سپس ما  متناسب با اندازه محتوای زیرمنوها  ارتفاع را تنظیم می کنیم (برای متحرک سازی )

جاوااسکریپت

 ما برای استفاده از افکت ها  پس از وارد کردن اسکریپت جی کوئری خود از jQuery Easing  استفاده می کنیم.

اجازه بدهید در ابتدا عناصر اصلی را برایتان مشخص کنیم.

var $ac_background	= $('#ac_background'),
  $ac_bgimage		= $ac_background.find('.ac_bgimage'),
  $ac_loading		= $ac_background.find('.ac_loading'),
  
  $ac_content		= $('#ac_content'),
  $title			= $ac_content.find('h1'),
  $menu			= $ac_content.find('.ac_menu'),
  $mainNav		= $menu.find('ul:first'),
  $menuItems		= $mainNav.children('li'),
  totalItems		= $menuItems.length,
  $ItemImages		= new Array();

چون ما میخواهیم تمام تصاویر پیش بارگذاری بشوند پس ما تمام  آنها را با استفاده از تابع زیر بارگذاری می کنیم

  /* 
  برای این منو ما تمام تصاویر را در ابتدا بارگذاری خواهیم کرد
  اجازه بدهید تا تمام تصاویر را در داخل آرایه اضافه کنیم
  */
$menuItems.each(function(i) {
    $ItemImages.push($(this).children('a:first').attr('href'));
  });
  $ItemImages.push($ac_bgimage.attr('src'));

سپس ما تابع اصلی خود را تعریف می کنیم

var Menu 			= (function(){
    var init				= function() {
      loadPage();
      initWindowEvent();
    },
    loadPage			= function() {
      /*
        ۱-بارگذاری تصویر زمینه و تمام تصاویر مورد نیاز آیتم ها
        ۲-نمایش تصویر زمینه
        ۳-نمایش و حرکت منوها
        ۴- نمایش آیتم های منوها
        ۵-مقداردهی اولیه ایونت های آیتم های منو
       */
      $ac_loading.show();//نمایش آیکون بارگذاری
      $.when(loadImages()).done(function(){
        $.when(showBGImage()).done(function(){
          //مخفی کردن آیکون بارگذاری(لودینگ
          $ac_loading.hide();
          $.when(slideOutMenu()).done(function(){
              $.when(toggleMenuItems('up')).done(function(){
              initEventsSubMenu();
            });
          });
        });
      });
    },
    showBGImage			= function() {
      return $.Deferred(
      function(dfd) {
        //تنظیم ابعاد تصاویر متناسب با صفحه
        adjustImageSize($ac_bgimage);
        $ac_bgimage.fadeIn(1000, dfd.resolve);
      }
    ).promise();
    },
    slideOutMenu		= function() {
      /* محاسبه اندازه جدید برای منوها */
      var new_w	= $(window).width() - $title.outerWidth(true);
      return $.Deferred(
      function(dfd) {
        //اسلایدکردن منوها
        $menu.stop()
        .animate({
          width	: new_w + 'px'
        }, ۷۰۰, dfd.resolve);
      }
    ).promise();
    },
      /* نمایش/مخفی کردن منوها */
      toggleMenuItems		= function(dir) {
      return $.Deferred(
      function(dfd) {
        /*
        اسلایدشکردن منوهابرای ورود/خروج 
        با زمان نمایش متفاوت برای هر یک
        */
        $menuItems.each(function(i) {
              var $el_title	= $(this).children('a:first'),
                marginTop, opacity, easing;
              if(dir === 'up'){
                marginTop	= '0px';
                opacity		= ۱;
                easing		= 'easeOutBack';
              }
              else if(dir === 'down'){
                marginTop	= '۶۰px';
                opacity		= ۰;
                easing		= 'easeInBack';
      }
          $el_title.stop()
          .animate({
                    marginTop	: marginTop,
                    opacity		: opacity
                   }, ۲۰۰ + i * 200 , easing, function(){
            if(i === totalItems - 1)
              dfd.resolve();
          });
        });
      }
    ).promise();
    },
    initEventsSubMenu	= function() {
      $menuItems.each(function(i) {
        var $item		= $(this), // the <li>
        $el_title	= $item.children('a:first'),
        el_image	= $el_title.attr('href'),
        $sub_menu	= $item.find('.ac_subitem'),
        $ac_close	= $sub_menu.find('.ac_close');
        
        /* کلیک کاربرروی هر یک از منوها */
        $el_title.bind('click.Menu', function(e) {
            $.when(toggleMenuItems('down')).done(function(){
            openSubMenu($item, $sub_menu, el_image);
          });
          return false;
        });
        /* بستن زیر منوها */
        $ac_close.bind('click.Menu', function(e) {
          closeSubMenu($sub_menu);
          return false;
        });
      });
    },
    openSubMenu			= function($item, $sub_menu, el_image) {
      $sub_menu.stop()
      .animate({
        height		: '۴۰۰px',
        marginTop	: '-۲۰۰px'
      }, ۴۰۰, function() {
              //تغییر تصویر زمینه
        showItemImage(el_image);
      });
      
      // تابع برای مقدار اولیه انیمیشن
      var d1=function(item){
        return $.Deferred(function(dft){
        $item.first("ul")
        .find("li")
        .each(function(index,item){
          var anim=$(item);
            anim.stop()
            .animate({
              marginRight:  "-100px"
            },۱۰۰+index*100,function(){
              $(this).animate({
                marginRight:"10px"
              },۲۰۰,function(){dft.resolve();});
            });
          });
        });
      };
      // نابع برای برگرداندن به حالت اولیه
      var d2=function(anim){
          anim.animate({
                marginRight:"-10px"
              },۳۰۰);
          
      };
      
      // برای اعمال انیمیشن برای زیرمنو
      $item.first("ul")
      .find("li")
      .each(function(index,item){
        var anim=$(item);
        $.when(d1(anim)).done(d2(anim));
      });
    },
      /* تعویض تصویر پس زمینه */
    showItemImage		= function(source) {
        //اگر تصویر فعلی باشد آنگاه برگرد
      if($ac_bgimage.attr('src') === source)
        return false;
          
      var $itemImage = $('<img src="'+source+'" alt="Background" class="ac_bgimage"/>');
      $itemImage.insertBefore($ac_bgimage);
      adjustImageSize($itemImage);
      $ac_bgimage.fadeOut(1500, function() {
        $(this).remove();
        $ac_bgimage = $itemImage;
      });
      $itemImage.fadeIn(1500);
    },
    closeSubMenu		= function($sub_menu) {
      $sub_menu.stop()
      .animate({
        height		: '0px',
        marginTop	: '0px'
      }, ۴۰۰, function() {
        //نمایش آیتم ها
              toggleMenuItems('up');
      });
    },
      /*
      هنگام تغییر اندازه صفحه،منوها و تصویر زمینه را متناسب با آن تنظیم میکنیم
      */
    initWindowEvent		= function() {
      /*   هنگام تغییر اندازه صفحه،عرض منو ها را تنظیم کن */
      $(window).bind('resize.Menu' , function(e) {
        adjustImageSize($ac_bgimage);
        /* محاسبه عرض جدید برای منو ها */
        var new_w	= $(window).width() - $title.outerWidth(true);
        $menu.css('width', new_w + 'px');
      });
    },
      /* تصویر را در مرکز و بصورت تمام صفحه در می آوریم */
    adjustImageSize		= function($img) {
      var w_w	= $(window).width(),
      w_h	= $(window).height(),
      r_w	= w_h / w_w,
      i_w	= $img.width(),
      i_h	= $img.height(),
      r_i	= i_h / i_w,
      new_w,new_h,
      new_left,new_top;
        
      if(r_w > r_i){
        new_h	= w_h;
        new_w	= w_h / r_i;
      }
      else{
        new_h	= w_w * r_i;
        new_w	= w_w;
      }
        
      $img.css({
        width	: new_w + 'px',
        height	: new_h + 'px',
        left	: (w_w - new_w) / 2 + 'px',
        top		: (w_h - new_h) / 2 + 'px'
      });
    },
      /* بارگذاری اولیه تصاویر */
    loadImages			= function() {
      return $.Deferred(
      function(dfd) {
        var total_images 	= $ItemImages.length,
        loaded			= ۰;
        for(var i = 0; i < total_images; ++i){
          $('<img/>').load(function() {
            ++loaded;
            if(loaded === total_images)
              dfd.resolve();
          }).attr('src' , $ItemImages[i]);
        }
      }
    ).promise();
    };
      
    return {
      init : init
    };
  })();

  /*
فراخوانی متد initمنوها
   */
  Menu.init();
});

تابع فوق تابع اصلی ما میباشد و چون ما در داخل کد آنها را به طور قابل فهم توضیح دادیم از توضیح مجدد آنها خوداری می کنیم.

0
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

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

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


− یک = 7

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>