This tutorial about creating metro style windows 8 CSS3 menu. We will teach you how you can style the menus just like window eight by using HTML5 and CSS3.
It’s easy to build with the help of DIV element then we will use fonts and apply different color classes to make them look like the Window Startup style.
The Metro style is a new interface of Microsoft applications which can be seen in Window 8 and also in Window 7 phones. These main menus are simple and based on tiles. This navigation menu can be used for modern flat design websites.
These Metro Menus are in different sizes, usually in two sizes. The sizes of tiles have two type, one is called small or regular, and another one is wide style.
How to Style Menu Like Windows 8 with CSS3
We have wrapped the div and each menu consists of a class name btn-big for wide menus and for small btn-small have been used. We have added another class for colors. Each color hold own class name, e.g., Red, blue, yellow, etc.
We keep the HTML structure as simple as we can. All of the titles inside the wrap div and each div inside the wrap represent one title. The icons used are from Font Awesome
Mail
Calendar
Store
User
Application
The CSS for Metro Style Menu
Let’s see how we have developed the CSS. Remember here we will show you some basic CSS stuff but you can download full source from above.
Each tile has some unique styles which we have defined like below.
However, this is the simple solution to create your own custom Metro style Windows 8 like tiles menu using CSS3. But if you are looking for ready-made solution than you can use this kit.
Please leave comments below and tell us about it. We will bring more excellent Tutorials which will help you to make your website more outstanding.
Стало известно, что новая операционная система windows будет отличатся от своих предшественниц футуристическим дизайном меню пуск, и отсутствие кнопки вызова в низу панели задач, это весьма насторожило, ведь прежние удобства стали недоступны и приходится переучиваться, но есть и поклонники данного нововведения. Безусловно, что новый пуск стал весьма эффектно смотреться, появились новые возможности и естественно инновация в нестандартном оформлении. Не успела данная операционная система толком выйти, как появились интересные решение.
В данном уроке мы рассмотрим как создать навигацию для сайта в стиле metro windows 8, такой подход к организации меню отлично подойдет для оформления портфолио или персональной странички. И так, приступим.
Шаг 1. HTML
Для начала рассмотрим разметку, в которой мы подключим необходимы репозитории и веб-шрифты. С помощью класса создадим организацию навигации, с помощью которой можно переключать варианты разметки и прокрутки меню.
