Почти всеки съвременен сайт е пълна без навигация, освен ако не е сайт-odnostranichnik. В тази статия ние ще подготвим семантично грамотен HTML код за нашето меню, а след това стил с новите чипове на CSS3 (бокс-сянка. Gradient. @ Font лице и т.н. са налице), а в края на малко по-трудно за нас, за да се движите. добавяне на падащ под непретенциозен JQuery-анимация. Получената менюто може да се използва като шаблон за своя развитие.
Семантично подготви HTML кода на нашето меню. Какво е менюто по отношение на код? Обикновено това е неподреден списък с връзки, увити таг
Въпреки това, той е твърде проста меню, нека да добавите няколко допълнителни точки, които по-късно ще се появят на Задържането на курсора и нанасят класове:
За по-стари IE не забравяйте да свържете всички патериците: html5shiv, пай за последваща работа с CSS3 свойства и т.н. Не забравяйте за JQuery връзка. Както можете да видите, всичко, маркирането е достатъчно проста, да отиде по-далеч.
меню Styling
Да вземем като база за моя завършен код за хоризонталното меню с падаща подточки:
На първо място, центъра на хоризонталната навигация в страницата:
тагове
Нека да се изработи точки навигация, за да започнете да печелите градиенти. Преди (и все още е приложимо) за един пиксел на крайната лента и изпълва целия елемент към него, изглежда CSS3 свойства на линеен градиент и радиално-градиент. които създават линейни и радиална градиент, съответно. Можете да използвате някои градиент Онлайн генератор, за да не се запушват всичко на ръка и веднага се пригответе стилове. Използвам ColorZilla услуга. като код се получава веднага:
Определете меню малък заоблен ъгъл, който преди това е било направено позициониране снимки в ъглите и много допълнителни не-семантични единици вече използват граничен радиус имот PIE + патерица за стария IE или постепенно влошаване:
На следващо място, реших да използвам нестандартен шрифт за текстови връзки, например, се шрифта DINMediumRegular. Окачването му имот @ шрифт в лице. Има отличен он-лайн правила генератор за @ шрифт в лице. Font катерица. зареди желания шрифт и да получите изходния файл с предварително дефинирани стилове, можете да ги свързва само с вашия проект:
За по-стари Internet Explorer използвате вградените в филтри за сянка или губим от поглед липсата й и леко разминаване с дизайна.
Останалата част от стила не е необходимо да бъде внимателно обмислено, тъй като тя е много проста и да предизвика малко трудности не трябва.
Падащо суб с JQuery
Нека най-накрая падащи елемент от менюто. Това е много удобно да се използва JQuery библиотеката, която е метод вграден одушевени (), за да анимирате елементи в документа. анимирате () ви позволява да създадете анимирани ефекти за CSS числови свойства, в този случай, ние ще анимирате непрозрачност непрозрачността. Сценарият е много проста, само на няколко реда код:
В непосредствена близост до манипулатор на събитие да се мотае навъртам навигационни елементи. Когато мишката е в настоящия момент е елементът с клас .dropdown-меню. използвате живата () за непрозрачност и да се покаже списък с връзки с метода на шоу (). След това се мотае друг манипулатор, когато курсорът оставя елемента. Правейки всичко точно обратното - намерете позиция, анимирате непрозрачността на 0 и да се скрият в списъка в документа. скрипт е необходимо спиране () метод, за да се предотврати многократното задействат анимации, когато движите мишката напред и назад.
Това е начин да се HTML, CSS и JQuery е направена просто меню, което може да служи като рамка за развитието ви.
Рейтинг статия
Свързани статии