Горизонтальное раздвижное меню для сайта | RUDEBOXМеню сайта позволяет не только быстро и удобно искать нужную информацию, но это и первый элемент на который пользователь обращает внимание при поиске, и здесь Вы прост не имеете права промахнуться в выборе, навигация должна не только соответствовать цветовой палитре. Часто я встречаю применение наших уроков на сайтах которые об этом не задумывались, в итоге получается очень большие расхождения в цветовой схеме сайта, соответственно это очень «режет» глаз. По этому стоит не только вставлять исходники, а еще немного их редактировать под себя.

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

Шаг 1. HTML

Для начала мы создаем простую разметку с указанными подписями и и классами присвоения иконок:

Как вы заметили мы указываем вывод иконок для предосмотра, у нас будет большие и маленькие, соответственно размеры мы пропишем в стилях. Кроме этого у нас текст с указанным размером h2.

Горизонтальное раздвижное меню для сайта | RUDEBOX

Шаг 2. CSS

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

Как вы уже поняли, мы указываем абсолютное позиционирование для навигации, добавляем небольшие рамки для выделения, и процент в сдвижении при активации курсором мыши.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.