Создание меню выстреливания

Feb 1, 2026

Инструкции

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

Мы особенно любим меню выстреливания на сайте для Мороженое салон косметика , разработано Хирока Хасегава (Если вы увидите сайты, которые вам нравятся, обязательно сохраните их в облачное хранилище для вдохновения). Читайте дальше, чтобы узнать, как воспроизвести этот эффект выдвигая на свой собственный веб-сайт. Keen создать сайт, который производит впечатление? Право веб хостинг Сервис или Строитель сайта сделаю только это.

01. Инициация документов

Первый шаг - определить документ Page. Это состоит из контейнера HTML, представляющего собой веб-страницу, которое содержит сечение головы и тела. Хотя голову используется для загрузки внешних ресурсов CSS и JavaScript, секция тела используется для хранения видимой страницы содержимого, созданного на шаге № 2.

 & lt; dotype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; выдвиньте меню OUT & lt; / title & gt;
& lt; link rel = "stylesheeet" Type = "Text / CSS" Media = "Экран" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
*** Шаг 2 здесь
& lt; / body & gt;
& lt; / html & gt;

02. Содержание страницы

Содержание страницы состоит из заголовка заголовка наряду с навигационным контейнером. Эта навигация сохраняет серию ссылок и была назначена атрибут «Data-Action». Именно этот атрибут будет использоваться JavaScript и CSS для применения стилей и функциональных возможностей для контейнера и его элементов.

 & lt; h1 & gt; выдвиньте меню OUT & lt; / h1 & gt;
& lt; nav data-action = "Развернуть" и gt;
  & lt; span & gt; & amp; # 9776; & lt; / span & gt;
  & lt; href = "#" & lt; / a & gt;
  & lt; href = "#" & lt; / a & gt;
  & lt; href = "#" & lt; / a & gt;
& lt; / nav & gt;

03. Инициация CSS

HTML теперь завершен, поэтому создайте новый файл, называемый «Styles.css», чтобы инициировать форматирование презентации. Этот шаг устанавливает HTML-документ и его тело, чтобы не иметь видимого расстояния границы, а также черный фон. Цвет устанавливается на белый как цвет по умолчанию для текста содержимого для наследования.

 HTML, Body {
  Дисплей: блок;
  Ширина: 100%;
  Высота: 100%;
  Фон: # 000;
  Цвет: #fff; }

04. Навигационная настройка

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

 NAV {
  Дисплей: блок;
  Положение: исправлено;
  Размеры коробки: пограничная коробка;
  Вершина: 0;
  Слева: -100VW;
  Z-индекс: 9999;
  прокладки: .5ЕМ 1ЕМ .5ЕМ 1ЕМ ;;
  Ширина: 100 Вт;
  Высота: 100ВХ;
  текстовый выровнян: центр;
  Фон: красный;
  Переход: все 1s; }

05. Nav Open и icon

Левое положение навигации устанавливается на ноль, когда был применен класс «Open», запускающий анимированный переход, определенный на предыдущем шаге. Первый ребенок навигации - это значок расширения, который использует фиксированное позиционирование, чтобы всегда оставаться видимой в центре левой стороны экрана.

 Nav.open {
  Слева: 0;
}
NAV *: первый ребенок {
  Положение: исправлено;
  прокладки: 1ЕМ;
  Курсор: Указатель;
  Слева: 0;
  Топ: 50VH;
  Очистить: оба; }

06. Навигационные ссылки

Каждая ссылка на анкер внутри навигационного контейнера устанавливается в четыре раза больше, чем размер текста по умолчанию. Их цвет устанавливается на черный, с нанесенной на их верхней части, чтобы гарантировать, что вертикальная интервал виден. Установка их дисплея в виде «блока» делает каждая ссылка автоматически сложена вертикально.

 NAV A {
  Дисплей: блок;
  Размер шрифта: 4em;
  Цвет: # 000;
  Font-Family: Arial;
  Текстовое украшение: нет;
  Margin-Top: .2em;
}

07. Прослушиватель JavaScript

Создайте новый файл под названием «Code.js». Этот шаг ждет, пока страница не будет загружена, на которой она ищет первого ребенка всех навигаций с атрибутом «Data», установленным на «Развернуть». Этот первый ребенок, являющийся открытым значком, имеет прикладное слушатель события «Щелкнуть», на котором переключается элемент, чтобы иметь или нет, применимый класс «Open».

 Window.addeventListener («нагрузка», функция () {
  VAR NOUTS = Document.QuerySelectorAll Всел («NAV [Data-Action =« Развернуть »] *: Первый ребенок ');
  для (var i = 0; i & lt; news.length; i ++) {
  узлы [я].addeventListener («Нажмите», функцию () {
  если (this.parentnode.classname == «Open») this.parentnode.classname = "";
  еще this.parentnode.classname = "открыть";
  });
  }
});
***

Эта статья была первоначально опубликована в номере 274 Treative Web Design Web Designer. Купить проблему 274 здесь или же Подписаться на веб-дизайнер здесь Отказ

Статьи по Теме:

Лучшие тенденции навигации
10 правил отличного пользовательского опыта
Добавить визуальные сигналы на свой сайт

Создание меню выстреливания

01. Инициация документов

02. Содержание страницы

03. Инициация CSS

04. Навигационная настройка

05. Nav Open и icon

06. Навигационные ссылки

07. Прослушиватель JavaScript

Инструкции - Самые популярные статьи

Как нарисовать собаку

Как создать эффекты текста глюков и изображения в CSS

10 правил для создания пользовательских веб-форм

Конструктор Affinity: Как использовать Pixel Persona

Как проектировать адаптивные и антростические формы

Создание пользовательских щеток в клипе Studio Paint

Как сделать 3D надписи в Illustrator

Как получить больше из цифровых текстур

Категории