Створіть меню слайдів

Sep 11, 2025

Як

Відмінний спосіб покращити досвід користувача На вашому сайті є додавання меню слайдів; Він створює привабливий шлях для користувачів, щоб знайти те, що вони хочуть - де б вони не могли бути на сторінці - і це означає, що вони не повинні прокручувати назад до верхнього ВЧ.

Ми особливо любимо слайд-меню на сайті Косметика для морозива , спроектований Hiroka Hasegawa (Якщо ви бачите сайти, які вам подобаються, обов'язково збережіть їх хмара зберігання для натхнення). Читайте далі, щоб дізнатись, як повторювати цей ефект слайд на власний веб-сайт. Прагнути створити веб-сайт, який створює враження? Право веб хостинг обслуговування або Веб-будівельник буде робити це.

01. Ініціація документів

Перший крок - визначити документ сторінки. Це складається з HTML-контейнера, що представляє веб-сторінку, яка містить розділ голови та тіла. Хоча головний розділ використовується для завантаження зовнішніх ресурсів CSS та JavaScript, розділ тіла використовується для зберігання помітної сторінки, створеної на кроці # 2.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; Посуньте меню & lt; / title & gt;
& lt; link rel = "stylesheet" 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; Посуньте меню & lt; / h1 & gt;
& lt; nav data-action = "Розгорнути" & gt;
  & lt; span & gt; & amp; # 9776; & lt; / span & gt;
  & lt; href = "#" & gt; Сторінка 1 & lt; / a & gt;
  & lt; href = "#" & gt; Сторінка 2 & lt; / a & gt;
  & lt; href = "#" & gt; Page 3 & lt; / a & gt;
& lt; / nav & gt;

03. Ініціювання CSS

HTML тепер завершено, тому створіть новий файл під назвою "Styles.css", щоб ініціювати форматування презентації. Цей крок встановлює HTML-документ та його тіло, щоб не мати видимого інтеркорду, разом з чорним фоном. Колір встановлюється білим, як колір за замовчуванням для змісту тексту, щоб успадкувати.

 HTML, тіло {
  Дисплей: блок;
  Ширина: 100%;
  Висота: 100%;
  фон: # 000;
  Колір: #fff; }

04. Налаштування навігації

Навігація полягає в тому, щоб відобразити з фіксованим позиціонуванням і з Z-індексом над усім, щоб він міг, здається, покрив повний екран незалежно від того, де користувач прокручений. Він спочатку розташований поза видом на ліву сторону видимого перегляду екрана. Правило переходу застосовується для анімації будь-яких змін протягом однієї секунди.

 Nav {
  Дисплей: блок;
  Позиція: фіксована;
  коробка: кордон-коробка;
  Верх: 0;
  ліворуч: -100VW;
  Z-індекс: 9999;
  підкладка :.5em 1em .5em 1em ;;
  Ширина: 100в.
  Висота: 100вх;
  Текст-вирівнювання: Центр;
  фон: червоний;
  Перехід: Всі 1; }

05. Nav Open And Icon

Ліва позиція навігації встановлюється до нуля, коли було застосовано клас "відкритий", запустіть анімований перехід, визначений на попередньому кроці. Перша дитина навігації - це значок розширення, який використовує фіксований позиціонування, щоб завжди залишатися видимим у центрі лівої сторони екрана.

 nav.open {
  ліворуч: 0;
}
NAV *: перша дитина {
  Позиція: фіксована;
  підкладка: 1EM;
  курсор: покажчик;
  ліворуч: 0;
  Верх: 50вх;
  Очистити: обидва; }

06. Навігаційні посилання

Кожна анкерна посилання всередині навігаційного контейнера встановлюється в чотири рази розміром тексту за замовчуванням. Їх колір встановлюється чорним, з маржу, що застосовується у верхній частині, щоб гарантувати вертикальне відстань, видно. Встановлення їх дисплея як "блок" робить кожне посилання автоматично, як видається, укладається вертикально.

 Nav a {
  Дисплей: блок;
  Шрифт-розмір: 4EM;
  Колір: # 000;
  Шрифт-Сім'я: Аріал;
  Текст-прикраса: Ні;
  маржа-вершина: .2em;
}

07. Слухач JavaScript

Створіть новий файл під назвою "code.js". Цей крок чекає, поки сторінка завантажена, на яку вона шукає першу дитину всіх навігцій з атрибутом "DATA-ACTION", встановленим для "розширення". Ця перша дитина, будучи відкритою піктограмою, має "клацання", напевно, застосовується, після чого було застосовано елемент або не мати "відкритого" класу.

 вікно.addeventlistener ("Навантаження", функція () {
  var nodes = document.queryselectorall ('nav [data-action = "Розгорнути"] *: перша дитина');
  для (var i = 0; i & lt; вузли .length; i ++) {
  вузли [i].addeventlistener ("натисніть", функція () {
  якщо (це. aparentnode.classname == "open") this.parentnode.classname = "";
  else this.parentnode.classname = "відкритий";
  });
  }
});
***

Ця стаття була опублікована у випуску 274 журналу Web Design Web Design Web Design. Купити проблему 274 тут або Підписатися на веб-дизайнер тут .

Пов'язані статті:

Top Web Trends
10 правил великого досвіду користувачів
Додайте візуальні сигнали на свій сайт

Створіть меню слайдів

01. Ініціація документів

02. Зміст сторінки

03. Ініціювання CSS

04. Налаштування навігації

05. Nav Open And Icon

06. Навігаційні посилання

07. Слухач JavaScript

Як - Найпопулярніші статті

Як додати енергію на ваші життєві малюнки

Як приховати свій код JavaScript з джерела перегляду

Створити бог променів у V-Ray

Додайте багатомовну підтримку кутових

Побудуйте крос-платформні мобільні програми з флатіром Google

Завантажити файли для 3D-світового 232

Як цифрово скульптувати в Zbrushcore

7 Вбивства шляхів впливу поведінки користувачів

Категорії