Създаване на динамични и анимирани меню
LPgenerator - Професионална целевата страница платформа за увеличаване на продажбите на Вашия бизнес
МАГАЗИН Кацане УНИВЕРСИТЕТ НА АКЦИИ от страна на партньорите
Сигурно сте виждали на някои сайтове динамични и анимирани менюта, които се променят като превъртите надолу. Минимизиране на главното меню навигация, те оставя повече място за съдържание. В този урок ще ви обясни как можете да създадете свой собствен меню с помощта на HTML5, CSS3 и малко JQuery.
Има няколко начина да направите това. В този урок ще ви обясни как да се създаде ширина цяла страница с фиксирана меню, което се различава по височина заедно с лого, създаване на минимизиране на първоначалната версия на оригинала. Ако желаете, можете също така да замени логото на друга опция, като инициали или икона, но имайте предвид, че последователността е много важно тук, така че потребителят да се разбира като елемент се променили и че основната му цел е все още навигацията на сайта.
Създаване на основна структура в HTML5
Започваме от създаване на основен HTML код, който се нуждаем. Да започнем с това, ние ще се придържаме към една много проста HTML5 структура.
Сега, когато нашия оригинален HTML код е писано, ще добавите кода за менюто, както и някои други елементи за нашия файл заглавието HTML.
Тъй като ние тук не разполагат с никакви съдържание,
И всичко това е част от HTML. Сега трябва да стилови елементи, използвайки CSS и да направи меню динамичен.
Стайлинг менюта и страници
За да запишете този код в един файл, ние ще създадем CSS в
. По този начин, всички наши CSS ще бъде преди затварящия маркер .
Малко CSS да се направи нашето меню 960 пкс в средата, в организацията на нашето меню в дясно и в ляво от логото. Ние също внос Амарант шрифт от Web Fonts Google, за да го използвате, за да ни текста на страницата.
Ето, ние просто се участък на страница, за да провокира превъртане (превъртане) и позиционирането на текста, за да се посочи в началото и края на съдържанието.
Тук ние завърши основния стил на нашата титла.
Динамично промените размера на меню
Нашето меню е направено и стил, но ние все още искат да работят на нейна минимизиране. За да създадете тази "статус", ние ще се създаде нов клас за
Така че, както виждате, тези стилове са почти идентични с тези в повечето менюта, ние просто се промени класа на "голям" на "малък" и промяна на ценностите, които се използват за по-малките. Ние използваме отрицателен марж-отгоре върху изображението, за да го централизира в съда, тъй като изображението е с тънка сянка, както и по-висока от писането за своите аксесоари. Сега, когато имаме всички необходими стилове, за да персонализирате преоразмеряване на менюто, и ако се опитате да го промените във вашия
Промяна клас меню с JQuery
Ако потребителят е превърта повече от 100 пиксела, а след това в класа на «голям» след това тя ще бъде премахната, което сме създали, и допълни, нашият нов клас «малки». По този начин, в менюто ще се промени в размера, тъй като ние сме преди това е дефинирано в CSS. Опитайте го, този път би трябвало вече да работи, но може да забележите, че преходите между класове, като че ли са много остър.
CSS преходи за анимация меню
С цел да се плавно превключване между класове в нашето меню, ние ще използваме CSS преходи. Просто използвайте тази част от кода до останалата част от CSS.
Тук ние определяме преход за всички CSS имоти за и
LPgenerator - Професионална целевата страница платформа за увеличаване на продажбите на Вашия бизнес
Сходни публикации
ВНИМАНИЕ! Използвате остарял браузър Internet Explorer
Този сайт е изграден върху най-напредналите и модерни технологии и не поддържа Internet Explorer втората и седмата версия.
