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

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

Шаг 1. HTML

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

<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Metro: Навигация для сайта в стиле windows 8 | Демонстрация для сайта RUDEBOX</title>
 <meta name="description" content="" />
 <meta name="keywords" content="" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
 <link rel="stylesheet" type="text/css" media="all" href="css/metro.css" />
 <script src="js/jquery.min.js"></script>
 <script src="js/jquery.plugins.min.js"></script>
 <script src="js/metro.js"></script>
 <!--[if lt IE 9]>
 <script src="js/respond.min.js"></script>
 <![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
 <div class="metro-layout horizontal">
 <div class="header">
 <h1>Навигация для сайта в стиле windows 8</h1>
 <div class="controls">
 <span class="down" title="Scroll down"></span>
 <span class="up" title="Scroll up"></span>
 <span class="next" title="Scroll left"></span>
 <span class="prev" title="Scroll right"></span>
 <span class="toggle-view" title="Toggle layout"></span>
 </div>
 </div>
 <div class="content clearfix">
 <div class="items">
 <a class="box" href="#">
 <span>Mail</span>
 <img class="icon" src="images/mail.png" alt="" />
 </a>
 <a class="box" href="#" style="background: #6b6b6b;">
 <span>Settings</span>
 <img class="icon" src="images/settings.png" alt="" />
 </a>
 <a class="box" href="#" style="background: #43b51f;">
 <span>Make a call</span>
 <img class="icon" src="images/phone.png" alt="" />
 </a>
 <a class="box width2 height2" href="#">
 <span>Photos</span>
 <img class="cover" src="images/gallery.jpg" alt="" />
 </a>
 <a class="box" href="#" style="background: #00aeef;">
 <span>Music</span>
 <img class="icon" src="images/music.png" alt="" />
 </a>
 <a class="box" href="#" style="background: #f58d00;">
 <span>Firefox</span>
 <img class="icon" src="images/firefox.png" alt="" />
 </a>
 <a class="box" href="#" style="background: #640f6c;">
 <span>Yahoo</span>
 <img class="icon" src="images/yahoo.png" alt="" />
 </a>
 <a class="box height2" href="#" style="background: #d32c2c;">
 <span>GMail</span>
 <img class="icon big" src="images/gmail.png" alt="" />
 </a>
 <a class="box" href="#" style="background: #3c5b9b;">
 <span>Facebook</span>
 <img class="icon" src="images/facebook.png" alt="" />
 </a>
 <a class="box" href="#" style="background: #ffc808;">
 <span>Winamp</span>
 <img class="icon" src="images/winamp.png" alt="" />
 </a>
 <a class="box" href="#" style="background: #00a9ec;">
 <span>Tasks</span>
 <img class="icon" src="images/tasks.png" alt="" />
 </a>
 <a class="box height2" href="#" style="background: #4c5e51;">
 <span>DeviantART</span>
 <img class="icon big" src="images/deviantart.png" alt="" />
 </a>
 <a class="box" href="#" style="background: #f874a4;">
 <span>Dribbble</span>
 <img class="icon" src="images/dribbble.png" alt="" />
 </a>
 </div>
 </div>
 </div>
</body>
</html>

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

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

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