دانلود سورس استایل CSS برای منو کشویی با انیمیشن

ساختار

از دو عنصر اصلی تشکیل شده است nav.main-navبرای موارد ناوبری بالا و div.morph-dropdown-wrapperبسته بندی عناصر کرکره. 
برای هر آیتم لیست در nav.main-navعنصر، a li.dropdownدر داخل ایجاد می شود .morph-dropdown-wrapper.

Open Nav

• About
• Pricing
• Contact

اضافی div.bg-layerدر داخل ساخته شده است div.morph-dropdown-wrapperو برای ایجاد پس زمینه morphing dropdown استفاده می شود.

افزودن سبک

در دستگاه های کوچک، به div.morph-dropdown-wrapper طور پیش فرض پنهان است. هنگامی که یک کاربر روی آیکون منو کلیک کند،  .nav-open کلاس  .cd-morph-dropdownبه نمایش داده می شود که ناوبری است.

.cd-morph-dropdown {
  position: relative;
}
.cd-morph-dropdown .morph-dropdown-wrapper {
  display: none;
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
}
.cd-morph-dropdown.nav-open .morph-dropdown-wrapper {
  display: block;
}

در دستگاه های بزرگتر (دید عرض بیشتر از 1000px)، در .dropdown-listو li.dropdownعناصر پیش فرض پنهان هستند.

@media only screen and (min-width: 1000px) {
  .cd-morph-dropdown .dropdown-list {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
  }
  .cd-morph-dropdown .dropdown {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    transition: opacity .3s, visibility .3s;
  }
}

هنگامی که کاربر بر روی یکی از عناصر درون آن قرار می گیرد nav.main-nav، .is-dropdown-visibleکلاس به آن اضافه می شود .cd-morph-dropdownو  .dropdown-list دید به تغییر قابل مشاهده است. در این مرحله، بسته بندی کشویی قابل مشاهده است، اما محتوای آن هنوز هم پنهان است. برای نشان دادن محتوا که توسط کاربر انتخاب شده است، .activeکلاس به li.dropdownعنصر انتخاب شده اضافه می شود (یکی با شناسه ای برابر با محتوای داده ای از آیتم ناوبری که کاربر روی آن حرکت می کند).

@media only screen and (min-width: 1000px) {
  .cd-morph-dropdown .dropdown.active {
    opacity: 1;
    visibility: visible;
  }
}

از آنجا که li.dropdownعناصر یک موقعیت مطلق دارند، در واقع در داخل پدر و مادر خود ( div.dropdown-list) فضایی نمی گیرند ، به این معنی که div.dropdown-listعرض و ارتفاع با توجه به محتوای قابل مشاهده تغییر نمی کنند. از آنجایی که ویژگی سرریز آن به پنهان (به طوری که هیچ محتوایی در خارج از بسته بندی کشویی قابل مشاهده است) تنظیم شده است، ما از جاوا اسکریپت برای تغییر ارتفاع و عرض خود استفاده می کنیم تا اطمینان حاصل کنیم که محدوده بازشو انتخاب شده همیشه قابل مشاهده است.

برای ایجاد پس زمینه کشویی، از ما استفاده می کنیم div.bg-layer. این موقعیت مطلق، عرض و ارتفاع برابر با 1 پیکسل و کدورت صفر است. هنگامی که  .is-dropdown-visibleکلاس به آن اضافه می شود .cd-morph-dropdown، کدورت آن به یک تغییر می کند و با استفاده از JavaScrip (به وسیله جاوا اسکریپت) به اندازه محتوا قابل مشاهده می شود.

@media only screen and (min-width: 1000px) {
  .cd-morph-dropdown .bg-layer {
    /* morph dropdown background */
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 1px;
    background: #FFFFFF;
    opacity: 0;
    transition: opacity .3s;
    transform-origin: top left;
  }
  .cd-morph-dropdown.is-dropdown-visible .bg-layer {
    opacity: 1;
    transition: transform .3s, opacity .3s;
  }
}

هنگامی که کاربر از یک آیتم ناوبری به یک آیتم دیگر حرکت می کند، مقادیر scaleX و scaleY  div.bg-layerتغییر می کند (با استفاده از جاوا اسکریپت) برای ایجاد اثر مورف.

مدیریت رویدادها

برای پیاده سازی این ناوبری، ما یک morphDropdown شی ایجاد کردیم و از  bindEventsروش برای پیوستن رویداد پردازنده به عناصر مناسب استفاده کردیم.

function morphDropdown( element ) {
   this.element = element;
   this.mainNavigation = this.element.find('.main-nav');
   this.mainNavigationItems = this.mainNavigation.find('.has-dropdown');
   this.dropdownList = this.element.find('.dropdown-list');
   //...

   this.bindEvents();
}

این bindEventsروش برای تشخیص رویدادهای mouseenter / mouseleave در عناصر .has-dropdownو .dropdownعناصر استفاده می شود.

morphDropdown.prototype.bindEvents = function() {
   var self = this;
	
   this.mainNavigationItems.mouseenter(function(event){
      //hover over one of the nav items -> show dropdown
      self.showDropdown($(this));
   }).mouseleave(function(){
      //if not hovering over a nav item or a dropdown -> hide dropdown
      if( self.mainNavigation.find('.has-dropdown:hover').length == 0 && self.element.find('.dropdown-list:hover').length == 0 ) self.hideDropdown();
   });
   //...
};

showDropdownروش طول می کشد مراقبت از تغییر ارتفاع، عرض و translateX ارزش های  .dropdown-listو به مقیاس بالا / پایین  .bg-layerعنصر.

morphDropdown.prototype.showDropdown = function(item) {
   var selectedDropdown = this.dropdownList.find('#'+item.data('content')),
       selectedDropdownHeight = selectedDropdown.innerHeight(),
       selectedDropdownWidth = selectedDropdown.children('.content').innerWidth(),
       selectedDropdownLeft = item.offset().left + item.innerWidth()/2 - selectedDropdownWidth/2;

   //update dropdown and dropdown background position and size
   this.updateDropdown(selectedDropdown, parseInt(selectedDropdownHeight), selectedDropdownWidth, parseInt(selectedDropdownLeft));

   //add the .active class to the selected .dropdown and .is-dropdown-visible to the .cd-morph-dropdown 
   //...
};

morphDropdown.prototype.updateDropdown = function(dropdownItem, height, width, left) {
   this.dropdownList.css({
      '-moz-transform': 'translateX(' + left + 'px)',
      '-webkit-transform': 'translateX(' + left + 'px)',
      '-ms-transform': 'translateX(' + left + 'px)',
      '-o-transform': 'translateX(' + left + 'px)',
      'transform': 'translateX(' + left + 'px)',
      'width': width+'px',
      'height': height+'px'
   });

   this.dropdownBg.css({
      '-moz-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
      '-webkit-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
      '-ms-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
      '-o-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
      'transform': 'scaleX(' + width + ') scaleY(' + height + ')'
   });
};