Анимирани менюта за сайта

Анимирани менюта за сайта

С помощта на малък плъгин, ние ще създадем анимиран меню, което ще заема целия екран, и ще се намира в горната част на страницата (т.е. няма да заемат място на страницата, и само на 45 пиксела от горната част). Plug-in за да създадете анимирани меню съдържа редица настройки, които ние също ще разгледат (можете да зададете скоростта на анимацията, когато елемент от менюто, изберете вида на анимация, която ще се появи списък с елементи).

Всички менюта са примери, моля, вижте линка по-долу:

Как да си направим анимиран меню на сайта си?

HTML част

Изтеглете JQuery библиотеката (тук) и включете jquery.fullpage-menu.js с стилове (тук), а след това се свържете между тагове :

А самият ключ е поставен със следния код:

JQuery част

С HTML и сега ние сме готови преди крайния въведете следния код:

Какви качества:

  • openButton - уточнява текстът, който се намира върху бутона отворите менюто. По подразбиране, текстът на "Меню".
  • closeButton - определя текста, който е на закриването на бутона за менюто. По подразбиране, текстът "Close X".
  • animationSpeed ​​- за да използвате този имот да се определи скоростта на поява на елементите от менюто. Стойността по подразбиране е 100.
  • autoNumber - използването на този имот може да се настрои автоматично номерирани елементи от менюто. По подразбиране е вярно.
  • анимация - определя типа на анимации. Следните видове анимация: «fadeInLeft". «FadeInRight». «FadeInUp» и «fadeInDown».

Лесен за използване плъгин, който ви позволява да създадете красиви анимирани меню на вашия сайт. Също така е възможно да се направи фиксирана меню (когато превъртате през менюто менюто ще бъде записано на върха) - урокът на фиксирания позициониране.