ملت وب مرجع دانلود قالب وردپرس فارسی و قالب فارسی وردپرس و قالب html و افزونه وردپرس
24
ساعت با شما

04144235034

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

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

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

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

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

ساختار

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


 

Open Nav

 

اضافی 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 + ')'
   });
};
  •  
حميد  شریفی
نویسنده
حميد شریفی
تعداد بازدید: 483
تعداد دانلود : 123
تاریخ 1397-3-4
کانال تلگرامی ما تا 50% تخفیف دریافت کنید
مطالبی که شاید خوشتان بیاد