Главная Новости

Затухающее меню: урок CSS и jQuery

Опубликовано: 06.09.2018

Воодушевленный панелью навигации Дэвида Уолша, которая становится полупрозрачной при пролистывании страницы вниз, я решил создать урок на эту тему.

Наша цель – это создать фиксированное навигационное меню, которое будет следовать за пользователем при прокрутке страницы, затухая при этом и становясь практически незаметным. Когда пользователь наводит курсор мыши на него, то оно вновь становится непрозрачным.

Навигационное меню будет представлять собой набор нескольких ссылок, поиска, кнопок быстрого перехода в нижнюю и верхнюю часть страницы.

И так, начнем!

1. HTML

Код довольно прост: мы имеем блочный элемент div, в котором заключены теги элементов списка li. Внутри тегов li будут находиться те самые пункты меню

Классы top и bottom являются теми самыми стрелками, которые перекидывают пользователей в начало или конец страницы. Атрибуты href в данном случае ссылаются на элементы с id вверху и внизу страницы. Убедитесь, что вы ссылаетесь на правильный, существующий элемент. Внизу страницы это может быть секция комментариев в вашем блоге WordPress. В этом случае, вам нужно указать следующее – href=”#comments”.

Теперь, давайте обратимся к CSS

2. CSS

Зададим стиль для элемента div:

Теперь навигационное меню всегда будет находиться в самом верху нашей страницы, благодаря параметру position:fixed и top:0px. Фоновое изображение будет полупрозрачным с небольшим 3D эффектом. Поскольку оно практически полностью прозрачно, вы можете поэкспериментировать с цветами и заменить белый цвет (#ffffff). Мы присвоили z-index большое значение, потому что не хотим, чтобы наши другие элементы с абсолютной позицией оказались выше нашего навигационного меню.

Для нашего неупорядоченного списка ul и его элементов li мы задаем следующие параметры:

Наш ненумерованный список имеет фиксированную ширину 600 пикселей и расположен в центре меню. Добиться такого же эффекта можно, если присвоить величину auto для отступа (margin) слева и справа.

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

Ко всем ссылкам навигационного меню мы применяем следующий стиль:

Несмотря на то, что совсем не обязательно указывать форму курсора, я советую прописывать cursor: pointer для адекватной работы во всех браузерах. Теперь наши ссылки также имеют полупрозрачный фон, как и сама навигация. При наведении на одну из ссылок, мы убираем изображение и изменяем цвет фона.

Давайте рассмотрим стиль, применяемый к навигационным стрелкам:

Теперь определимся с поиском и вводом текста:

Используя nav input[type="text"] вы убеждаетесь, что не измените стили для других элементов с тегом input. Это хороший прием, который позволяет разграничивать различные стили ввода данных.

Отступ на 50 пикселей влево необходим, чтобы отделить поиск от других элементов меню.

Для кнопки поиска необходимо применить следующие параметры:

Это отличный пример использования классов вместо особых стилей, например input[type=”submit”]. Здесь же мы задаем иконку для поиска и фоновый рисунок.

Вот, мы и закончили с CSS! Осталось дело за малым, JavaScript.

3. JavaScript

В первую очередь мы хотим сделать так, чтобы при заходе на страницу меню было непрозрачным, а при первом же движении вниз страницы, оно становилось практически незаметным. При наведении, мы хотим, чтобы оно появлялось вновь. Все это мы сейчас воплотим с помощью JavaScript:

Итак, если мы не наверху страницы, то движение скроллом незамедлительно приводит к потуханию меню. Этот эффект осуществляется всего за 400 миллисекунд (выставите свое время при желании). Если мы наверху страницы, значение прозрачности будет 1, то есть навигационное меню будет совершенно непрозрачно. По такой же системе работает меню при наведении на него.

Вот и все! Наслаждайтесь!

rss