Меню сайта является неотъемлемой частью навигации для сайта, но навигация занимает значительную область дизайна сайта. В данном уроке мы рассмотрим меню сайта в стиле минимализма, которое состоит из маленьких иконок, идея данного меню заключается в том, что при наведении курсора будут раскрываться, а лучше сказать выезжать другие скрытые за иконкой ссылки, или даже форма поиска. Скорость анимации и длину меню можно изменить под свое усмотрение Ничего сложного в меню нет, все как всегда 3 шага: HTML каркас меню CSS файл с оформлением и код JavaScript.

Начнем с разметки HTML. Все наше меню находится в контейнере <div class=»menu»></ div>. Каждую иконку со всем его внутренним содержанием мы вставляем в контейнер <div class=»item»></ div> и уже в нем вы размещаем другие внутренние ссылки, или форму поиска.

Шаг 2: CSS код
Пишем оформление для класса .menu задаем высоту ширину меню, шрифт и размер шрифта, отступы и т.д:

Пишем оформление для класса .item это внутренняя меню, оно у нас скрытое за иконкой:

Здесь вы указываем путь к каждой нашей иконки и прописываем им оформление:

Все остальные элементы меню мы оформляем следующим образом:

Шаг3: JavaScript
Как всегда первым делом подключаем фрейморк jQuery и наши файлы с JavaScript между тегом <head> </head>, которые выполняют всю работу:

И вставляем на сайт JavaScript код между тэгом <body> </ body> который приводит в действие все эффекты нашей анимации:

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