Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

Чтобы это случилось, все, что нам требуется, это добавить и удалить несколько классов. Остальное происходит в CSS. Вот логика, которой мы придерживаемся:

• Применяем класс с названием js к «телу» документа и прячем все элементы articleв CSS по селектору .jsarticle {…}(в этом случае позиционируем их абсолютно и передвигаем их в экране).

• К статье, выбранной пользователем, добавляем класс с названием current, который подменяется в CSS на .jsarticle.current {…}.

• Для того чтобы показать пользователю, где он находится, добавляем класс с названием current к меню ссылки, соответствующей текущей видимой статье.

Рисунок 5.4. Сайт простой кафешки с названием «Винтаж», где все разделы показаны один за другим

Сначала мы добавим класс с названием js к «телу» документа. Это позволит нам определить стили для версий с и без JavaScript. Потом мы возьмем элементы, которые нам нужны. В этом случае нам нужны первый элемент articleи первая ссылка, потому что они будут доступны первыми по умолчанию.

Рисунки 5.5–5.7. Если JavaScript доступен, статьи на странице «оживают», когда пользователь нажимает на элемент навигации

document.body.classList.add('js');

var nav = document.querySelector('nav'),

article = document.querySelector('article'),

link = document.querySelector('nav a');

Мы установим их классы на current:

link.classList.add('current');

article.classList.add('current');

Остальные функции – это делегирование событий:

nav.addEventListener('click', function (ev) {

var t = ev.target;

if (t.tagName === 'A') {

article.classList.remove('current');

link.classList.remove('current');

article = document.querySelector(t.getAttribute('href'));

link = t;

article.classList.add('current');

link.classList.add('current');

}

}, false);

Теперь мы назначим обработчик нажатия в навигационном меню, проверим, что на ссылку щелкнули и удалим класс current из ссылки и из статьи, которая демонстрируется. Потом мы доходим до новой статьи, которую нужно показать, обращаясь к ней через атрибут href– ссылки, на которую щелкаем – и затем назначаем класс current новым элементам.

Это почти все, что нам нужно сделать. Другой случай, который нам нужно учесть, это когда пользователь попадает на сайт через ссылку, содержащую хеш (когда ссылка указывает на статью, которая показывается не по умолчанию); в этом случае нам нужно показать правильную статью. Для этого мы можем использовать два селектора:

if (document.location.hash) {

var cleanhash = document.location.hash.replace(/^#/, '');

article = document.querySelector(document.location.hash);

link = document.querySelector('nav a[href$=' + cleanhash + ']'

);

}

CSS-селектор проверяет, заканчивается ли ссылка тем, что мы передаем. Анимация сделана в CSS с использованием перемещений:

section {

overflow: hidden;

min-height: 340px;

position: relative;

}

article {

position: relative;

height: 350px;

}

body.js article {

width: 700px;

position: absolute;

top: -700px;

– webkit-transition: 0.8s;

– moz-transition: 0.8s;

– ms-transition: 0.8s;

– o-transition: 0.8s;

transition: 0.8s;

}

body.js article.current {

position: absolute;

top: 0;

}

Здесь мы видоизменяем статьи. Мы просто говорим браузеру расположить их относительно в разделе, когда JavaScript недоступен, и разместить их абсолютно на 700 пикселей над верхней частью контейнера, когда JavaScript доступен. Так как в разделе применяется overflow: hidden, они никогда не показываются.

Если статья текущая, значение top изменяется на 0, и статья перемещается сверху вниз.

Параграфы действуют по тому же принципу:

article p {

position: absolute;

left: 320px;

width: 370px;

}

js article p {

left: 900px;

opacity: 0;

– webkit-transition: 1s ease 0.7s;

– moz-transition: 1s ease 0.7s;

– ms-transition: 1s ease 0.7s;

– o-transition: 1s ease 0.7s;

transition: 1s ease 0.7s;

}

js article.current p {

position: absolute;

left: 320px;

width: 370px;

opacity: 1;

}

В этом примере мы создали 1-секундное перемещение с задержкой в 0,7 секунды. Обратите внимание, что мы анимируем и положение слева и прозрачность одним махом. И нам не нужно ничего делать в JavaScript.