Розробка, створення та просування сайтів в Гомелі - як виділити активний пункт меню

Розділи → Статті → Розробка сайтів → Як виділити активний пункт меню

Активним пункт меню стає при прописаним йому якогось класу і виділення цього класу в CSS.

Тепер розберемо як це зробити на прикладі.

В CSS ми поставимо стилі і градієнти меню. А активному меню задамо градієнт той же, як і всім, але в іншу сторону.
Наприклад - у всього меню градієнт йде від світла вгорі до тіні внизу, а у активного меню навпаки. Можливості CSS3 допоможуть нам в цьому:

Тепер залишилося «навісити» активний пункт меню за допомогою яваскрипт.
Тобто поставити клас "active" поточної посиланням.

Крок перший - створимо підсвічувати функцію. Будемо викликати її на кожному меню. Поки у нас одне, але раптом буде багато - потім буде потрібно дописати лише рядок.

Вставте код функції в свого сайту, щоб вона вже була визначена в документі до того, як він завантажиться.

Тепер залишилося її викликати в кінці документа, найкраще перед закриттям , щоб підсвітити всі посилання всередині id = "menu" *

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

Як бачимо, навіть без використання jQuery на нативном яваскрипт - все просто.

Але якщо у Вас на сторінці підключений jQuery, то все ще простіше.
Можна обійтися зовсім без функції, а код більш простий і зрозумілий:

Використання jQuery дає ще ту перевагу, що писати цей код можна в будь-якому місці (а не перед ) - він спрацює все одно тільки після завантаження всієї сторінки.

Ну і за традицією - в кінці результат:

З відключеним яваскрипт підсвічування активного посилання не побачите.
Все по чесному

Залишається додати, що код тільки здається складним через те, що ми додали до меню градієнти за допомогою CSS. А так меню можна підсвічувати набагато простіше. Наприклад виділяти жирним за допомогою font-weight: bold. Або ставити інший фон картинкою - як забажаєте.