Сайт это визитная карточка любого разработчика, и каждых из них старается сделать свой блог более привлекательным и простым для рядового пользователя, по этому в этом уроке я объясню как с помощью CSS и дополнительных эффектов сделать вот такое радужнее меню с плавной прокруткой и простотой использования.

По традиции предлагаю просмотреть уже готовые варианты меню или попросту скачать их в готовом виде. Внимание! полные эффекты доступны на Google Chrome:

И так начнем, для начала нам надо сделать HTML разметку:

Для этого мы будем использовать неупорядоченный список для меню. <div class=»floatr»></div> — элемент, который будет подсвечивать выбранную ссылку.

Дальше мы будем стилизировать наше меню при помощи СSS, для этого мы будем использовать такие элементы как border-radius, box-shadow, rgba и gradient.

Следующий код относится к каждому меню:

Последняя часть кода отвечает  за подсветку:


 

 

На этом этапе хочу обратить ваше внимание на свойства transition. C помощью их мы анимируем наш бегунок подсветки ссылок. Это свойство имеет следующий синтаксис:

 

 

Следующий шаг разработки нашего меню является JavaScript. Роль JavaScript в этом примере — это получение текущей позиции активного элемента и позиции мышки при наведении ее на наше меню.
 

 

Так же можно использовать другие цветовые схемы:

 

 

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