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

 

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

Как при создании любого другого материала, для начала необходимо создать html разметку:

Далее мы задаем нашему меню стили, вот такой они будут иметь вид:

Поскольку мы придаем нашему списку свойство float, нам понадобится дополнительный слой для иконок. Иконки, которые в свою очередь являются фоновым изображением в <span>будут иметь абсолютное позиционирование.

Далее создаем элементы списка:

Мы хотим придать нашим ссылкам фиксированную ширину и немного фонового градиента.

Первый и последний элементы меню должны иметь скругленные углы для различных браузеров:

Стиль для всех <span> с иконками будет таким:

Для каждой иконки присваиваемым отдельный стиль:

Если заметили, то мы позиционируем все иконки таким образом, чтобы они находились по центру элемента списка.

Завершающим этапом будет создание анимации, следующим JavaScript, и определим функцию hover для элементов списка.

Данная функция позволит при наведении  иконка появилась сверху, увеличиваем z-index, чтобы иконка стала видимой. Когда пользователь убирает мышку, проделываем обратный процесс. Также мы устанавливаем желаемый интервал исчезновения иконок. Вот и все, указывайте правильный путь к библиотекам, внимательно читайте урок, и у Вас все получится.

На главную