تخفیف

سبد خرید

نمایش خلاصه ای از خرید هایی که شما انجام خواهید داد

مبلغ کل
0
تسویه حساب
سبد خرید خالی می باشد

دانلود سورس استایل CSS برای منو کشویی با انیمیشن
حميد  شریفی
حميد شریفی
تعداد کل دانلود ها : 734296
تعداد کل مطالب : 1350

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

تعداد دانلود:
433
تعداد بازدید:
2476
تاریخ:
دسته بندی:

هشتگ ها :

#سورس 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 + ')'
   });
};
  •  
محصولات مشابه فروشی
هشتگ ها :

این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید

ارسال نظر

آخرین های مشابه مشاهده بیشتر

  • تلفن : 04136383693
  • پیامک : 500020606688
  • آدرس : آذربایجان شرقی، تبریز، شهرک مصلی، خیابان راجی، راجی 4، کوچه بیست هشتم، قطعه 1339، طبقه چهارم

ملت وب در سال 1393 فعالیت خود را در چهار بخش قالب های آماده، طراحی لوگو، طراحی سایت، طراحی بنر آغاز کرده است، که در مدت بسیار کم با تلاش های بی وقفه خود و همکاران توانسته بزرگترین وب سایت ارائه دهنده قالب های با کیفیت در ایران باشد رمز موفقیت شرکت ملت وب پشتیبانی بی دریغ از کاربران خود می باشد ما موقعیت خود را مدیون مشتریان وفادار خود هستیم پس همیشه همراهشان خواهیم بود .

  • logo-samandehi