В этом уроке я покажу Вам как сделать разметку сайта с интересным эффектом перехода между пунктами меню. Все будет происходить на одной странице и я уверен, что Ваши посетители останутся в восторге от просмотра Вашего ресурса.
Не будем многословными, а приступим к делу!
HTML
Создадим файл index.html
и используя современные теги HTML5 запишем в него следующий код:
<div id="main"> <section id="box1" class="box"></section> <section id="box2" class="box"></section> <section id="box3" class="box"></section> <section id="box4" class="box"></section> <section id="box5" class="box"></section> <section id="box6" class="box"></section> <section id="box7" class="box"></section> <section id="box8" class="box"></section> <section id="box9" class="box"></section> </div>
Все очень просто каждый section представляет собой часть одного большого блока и с помощью идентификаторов, которые мы присвоили каждому, через стили, чуть позже, зададим определенный background.
Следующим шагом добавим навигацию для переходов между страницами нашего будущего сайта и какую-нибудь текстовую информацию:
<div id="main"> <section id="box1" class="box"> <nav> <ul> <li id="link1"><a href="#">Home</a></li> <li id="link2"><a href="#">Contact</a></li> <li id="link3"><a href="#">About</a></li> <li id="link4"><a href="#">Services</a></li> <li id="link5"><a href="#">Why hire me?</a></li> <li id="link6"><a href="#">Awards</a></li> <li id="link7"><a href="#">Portfolio</a></li> <li id="link8"><a href="#">Clients</a></li> <li id="link9"><a href="#">Resume</a></li> </ul> </nav> <h2>How To Make</h2> <h3>Восхитительная разметка с помощью jQuery</h3> </section> <section id="box2" class="box"> <nav> <ul> <li id="link1"><a href="#">Home</a></li> <li id="link2"><a href="#">Contact</a></li> <li id="link3"><a href="#">About</a></li> <li id="link4"><a href="#">Services</a></li> <li id="link5"><a href="#">Why hire me?</a></li> <li id="link6"><a href="#">Awards</a></li> <li id="link7"><a href="#">Portfolio</a></li> <li id="link8"><a href="#">Clients</a></li> <li id="link9"><a href="#">Resume</a></li> </ul> </nav> <h2>How To Make</h2> <h3>Восхитительная разметка с помощью jQuery</h3> </section> <section id="box3" class="box"> <nav> <ul> <li id="link1"><a href="#">Home</a></li> <li id="link2"><a href="#">Contact</a></li> <li id="link3"><a href="#">About</a></li> <li id="link4"><a href="#">Services</a></li> <li id="link5"><a href="#">Why hire me?</a></li> <li id="link6"><a href="#">Awards</a></li> <li id="link7"><a href="#">Portfolio</a></li> <li id="link8"><a href="#">Clients</a></li> <li id="link9"><a href="#">Resume</a></li> </ul> </nav> <h2>How To Make</h2> <h3>Восхитительная разметка с помощью jQuery</h3> </section> <section id="box4" class="box"> <nav> <ul> <li id="link1"><a href="#">Home</a></li> <li id="link2"><a href="#">Contact</a></li> <li id="link3"><a href="#">About</a></li> <li id="link4"><a href="#">Services</a></li> <li id="link5"><a href="#">Why hire me?</a></li> <li id="link6"><a href="#">Awards</a></li> <li id="link7"><a href="#">Portfolio</a></li> <li id="link8"><a href="#">Clients</a></li> <li id="link9"><a href="#">Resume</a></li> </ul> </nav> <h2>How To Make</h2> <h3>Восхитительная разметка с помощью jQuery</h3> </section> <section id="box5" class="box"> <nav> <ul> <li id="link1"><a href="#">Home</a></li> <li id="link2"><a href="#">Contact</a></li> <li id="link3"><a href="#">About</a></li> <li id="link4"><a href="#">Services</a></li> <li id="link5"><a href="#">Why hire me?</a></li> <li id="link6"><a href="#">Awards</a></li> <li id="link7"><a href="#">Portfolio</a></li> <li id="link8"><a href="#">Clients</a></li> <li id="link9"><a href="#">Resume</a></li> </ul> </nav> <h2>How To Make</h2> <h3>Восхитительная разметка с помощью jQuery</h3> </section> <section id="box6" class="box"> <nav> <ul> <li id="link1"><a href="#">Home</a></li> <li id="link2"><a href="#">Contact</a></li> <li id="link3"><a href="#">About</a></li> <li id="link4"><a href="#">Services</a></li> <li id="link5"><a href="#">Why hire me?</a></li> <li id="link6"><a href="#">Awards</a></li> <li id="link7"><a href="#">Portfolio</a></li> <li id="link8"><a href="#">Clients</a></li> <li id="link9"><a href="#">Resume</a></li> </ul> </nav> <h2>How To Make</h2> <h3>Восхитительная разметка с помощью jQuery</h3> </section> <section id="box7" class="box"> <nav> <ul> <li id="link1"><a href="#">Home</a></li> <li id="link2"><a href="#">Contact</a></li> <li id="link3"><a href="#">About</a></li> <li id="link4"><a href="#">Services</a></li> <li id="link5"><a href="#">Why hire me?</a></li> <li id="link6"><a href="#">Awards</a></li> <li id="link7"><a href="#">Portfolio</a></li> <li id="link8"><a href="#">Clients</a></li> <li id="link9"><a href="#">Resume</a></li> </ul> </nav> <h2>How To Make</h2> <h3>Восхитительная разметка с помощью jQuery</h3> </section> <section id="box8" class="box"> <nav> <ul> <li id="link1"><a href="#">Home</a></li> <li id="link2"><a href="#">Contact</a></li> <li id="link3"><a href="#">About</a></li> <li id="link4"><a href="#">Services</a></li> <li id="link5"><a href="#">Why hire me?</a></li> <li id="link6"><a href="#">Awards</a></li> <li id="link7"><a href="#">Portfolio</a></li> <li id="link8"><a href="#">Clients</a></li> <li id="link9"><a href="#">Resume</a></li> </ul> </nav> <h2>How To Make</h2> <h3>Восхитительная разметка с помощью jQuery</h3> </section> <section id="box9" class="box"> <nav> <ul> <li id="link1"><a href="#">Home</a></li> <li id="link2"><a href="#">Contact</a></li> <li id="link3"><a href="#">About</a></li> <li id="link4"><a href="#">Services</a></li> <li id="link5"><a href="#">Why hire me?</a></li> <li id="link6"><a href="#">Awards</a></li> <li id="link7"><a href="#">Portfolio</a></li> <li id="link8"><a href="#">Clients</a></li> <li id="link9"><a href="#">Resume</a></li> </ul> </nav> <h2>How To Make</h2> <h3>Восхитительная разметка с помощью jQuery</h3> </section> </div>
Все очень просто и понятно: мы создали базовую HTML
структуру будущего сайта, думаю сложностей у Вас не возникнет, а если же что-то не получится то исходный код прилагается)
CSS
После того как мы создали базовую HTML
структуру, давайте придадим ей стилей, которые сделают наш сайт привлекательным.
Начнем с общего стиля
body { overflow: hidden; } h2 { color: #ffffff; text-align: center; font: 54px Verdana; margin-top: 50px; } h3 { color: #ffffff; text-align: center; font: 16px Verdana; margin-top: 20px; }
Теперь займемся навигационной панелью:
nav { height: 50px; width: 100%; } nav ul li { height: 50px; width: 11.1%; text-align: center; float: left; } nav ul li a { text-decoration: none; color: #ffffff; line-height: 50px; display: block; } #link1 { background: #fe4632; } #link2 { background: #005fe5; } #link3 { background: #ffb40a; } #link4 { background: #80bf34; } #link5 { background: #26bfa3; } #link6 { background: #2d93cf; } #link7 { background: #ab250f; } #link8 { background: #e99702; } #link9 { background: #9adf56; }
Тут тоже все просто навигационному блоку мы задали высоту 50px и ширину 100%. Элементы списка выровняли по левому краю и так как их 9 то задали им ширину 11,1%, чтобы они растягивались на всю ширину навигационного блока и выравнивание в них по центру. Ссылкам в элементах списка присвоим блочное отображение и высоту строки 50px — для отображения в середине блока, и каждой ссылки зададим свою особую заливку.
Далее займемся стилями для самих блоков, для них мы тоже зададим выравнивание по левому краю и заливку совпадающую с заливкой одноидентификаторных ссылок:
.box { float: left; } #box1 { background: #fe4632; } #box2 { background: #005fe5; } #box3 { background: #ffb40a; } #box4 { background: #80bf34; } #box5 { background: #26bfa3; } #box6 { background: #2d93cf; } #box7 { background: #ab250f; } #box8 { background: #e99702; } #box9 { background: #9adf56; }
С CSS
закончили.
jQuery
Прежде чем приступить к написанию кода я внесу определенную ясность.
Мы будем использовать функцию resizeBoxes()
, с помощью которой мы определим высоту и ширину окна браузера, увеличим размеры основного блока #main в три раза и блокам контента .block
присвоим размеры окна браузера.
function resizeBoxes() { var browserWidth = $(window).width(); var browserHeight = $(window).height(); $('#main').css({ width: browserWidth*3, }); $('.box').css({ width: browserWidth, height: browserHeight, }); } resizeBoxes();
После вызовем функцию resize()
$(window).resize(function() { resizeBoxes(); });
Следующим шагом предотвратим обычное поведение навигационных ссылок
$('nav ul li a').click(function(){ return false; });
Теперь будем использовать функцию GoTo
, которая просматривает и записывает размеры окна в две переменные и оживляет анимацию доставки блока при клике
function goTo(horizontal,vertical) { var browserWidth = $(window).width(); var browserHeight = $(window).height(); $('#main').animate({ marginLeft: '-'+browserWidth*horizontal, marginTop: '-'+browserHeight*vertical, }, 1000); } $('#link1 a').click(function(){ goTo(0,0); }); $('#link2 a').click(function(){ goTo(1,0); }); $('#link3 a').click(function(){ goTo(2,0); }); $('#link4 a').click(function(){ goTo(0,1); }); $('#link5 a').click(function(){ goTo(1,1); }); $('#link6 a').click(function(){ goTo(2,1); }); $('#link7 a').click(function(){ goTo(0,2); }); $('#link8 a').click(function(){ goTo(1,2); }); $('#link9 a').click(function(){ goTo(2,2); }); });
Используя функцию GoTo()
мы избегаем расчетов для каждого клика, что уменьшает количество кода.
Вот такой еще один интересный анимационный эффект jQuery.
Подскажите, как подправить скрипт, чтобы при закрытии браузера выводилось диалоговое окно или при смещение курсора из области сайта?
А как сделать подобную анимацию для загрузки следующей страницы?например-текущая страница «уезжает влево», а справа «выезжает» новая.
Спасибо большое за подсказку.
Вопрос следом: Что делать с Iphonом, он отображает 4 окна сразу.
Есть ли способ оптимизировать под него?
Многие сидят уже давно на Ipad & Iphone.
Alexsander, нужно блоку с меню добавить стилей
только не забудьте, что само меню в каркасе нужно вынести из блока
#main
и удалить дубли с блоков.block
Наталья, а подскажите, как зафиксировать меню, чтобы только сам контент менялся.
Классное решение, единственное что я бы изменила так это оставить неподвижным верхнее меню, что бы не пришлось его дублировать на все блоки .box