Превъртане до елемент на страница с jQuery
През последните няколко години популярността на сайтовете с една страница (превъртане) нарасна значително. Въпреки че този тип сайт не е за всеки, все пак е полезно да знаете как работят. Днес ще покажа, как да създадете прост сайт с една страница (превъртане) използвайки jQuery.
Преди да започнем, можете да гледате демонстрацията.
Е, да започнем ...
Ще създадем следното:
Маркирането (HTML) на страницата ще бъде изключително просто.
Първо, нека създадем навигацията.
Какво направихме: Навигационният елемент е широк 100%, което означава, че неговата ширина ще бъде равна на ширината на неговия родител. За навигацията свойството позиция е фиксирано, така че когато превъртате страницата, елементът навигация винаги ще бъде пред очите на потребителя. За да създадем навигацията, поставяме ul тага в навигационния таг .
Погледнете връзките - всички те водят до един конкретен параграф.
- Ако потребителят е деактивирал javascript, връзките все още работят.
- С jQuery ще прочетем атрибута href от всяка връзка.
След като създадохме проста навигационна лента, можем да преминем към основното съдържание на страницата.
Както можете да видите, маркирането е изключително просто. Състои се от блок със съдържание, който съдържа абзаци (p). Всеки параграф има свой собствен идентификатор, свързан с връзка в нашата навигация.
Преди да влезете в CSS, не забравяйте да включите Reset Style на Eric Meyer. Той елиминира проблемите, свързани с несъвместимостта на различни браузъри, и ви позволява да работите, без да се чудите дали сайтът ще изглежда еднакво във всички съвременни браузъри.
Нека започнем със стилизиране на основното съдържание на страницата, което е много просто.