Меню навігації в стилі lava-lamp

Меню навігації в стилі Lava-Lamp

Перш ніж почати опис структури меню, мабуть не зайвим буде поглянути на нього в дії:

Відразу хочу сказати, що найкраще таке меню виглядає в браузерах Сhrome і Firefox.

Крок 1 HTML

Зверніть увагу, як ми встановили ідентифікатор «selected» на головну сторінку. Це стандартний для більшості сайтів спосіб, що дозволяє визначити стиль для основного розділу меню.
Далі, ми повинні підключити до роботи (активувати) плагін jQuery. Для цього нам знадобитися невеликий скрипт:


Для виконання всього сценарію ми створили новий файл і назвали його jquery.spasticNav.js підключивши надалі до документа html.

Якихось особливих налаштувань не потрібно, хіба що знадобитися змінити розміри і колірну гамму самого меню. Для цього можете поекспериментувати з окремими значеннями властивостей в таблиці стилів:

В Інтернеті все на відстані витягнутої руки. Треба тільки знати, як витягнути руку.

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

Схожі статті