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

В данном уроке мы рассмотрим как создать навигацию для сайта в стиле metro windows 8, такой подход к организации меню отлично подойдет для оформления портфолио или персональной странички. И так, приступим.

Шаг 1. HTML

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

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

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

Читайте также: