Меню состоит из восьми блоков без выпадающих продолжений и поэтому сгодится для лёгких сайтов, которые не требуют большого количества подменю.
Для начала посмотрим разметку меню
Код
<nav>
<ul>
<li><a href="#">PixelsDaily</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Podcast</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Исходя из html кода разметки вы убедились что тут ничего сложного нет и мы переходим к стилям
Код
{ padding: 0; margin: 0;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}nav { width: 90%; margin: 100px auto; overflow: hidden; }nav ul { list-style: none; overflow: hidden;}nav li a { background: #444; border-right: 1px solid #fff; color: #fff; display: block; float: left; font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; padding: 10px; text-align: center; text-decoration: none; text-transform: uppercase; width: 12.5%;
/*TRANSISTIONS*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;}/*HOVER*/nav li a:hover { background: #222;}/*SMALL*/nav small { font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif; text-transform: none; color: #aaa;}/*BORDER FIX*/nav li:last-child a { border: none;}/*BLUE MENU*/nav .blue { margin-top: 50px;}.blue li a { background: #75b1de;}.blue small { color: white;}.blue li a:hover { background: #444;}/*RED MENU*/nav .red { margin-top: 50px;}.red li a { background: #5C0002;}.red small { color: white;}.red li a:hover { background: #a60306;}/* MEDIA QUERIES*/@media only screen and (max-width : 1220px),only screen and (max-device-width : 1220px){ nav li a { font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; }
nav small { font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif; }}@media only screen and (max-width : 930px),only screen and (max-device-width : 930px){ nav li a { width: 25%; border-bottom: 1px solid #fff; font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; }
nav li:last-child a, nav li:nth-child(4) a { border-right: none; }
nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a { border-bottom: none; }}@media only screen and (max-width : 580px),only screen and (max-device-width : 580px){ nav li a { width: 50%; font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; padding-top: 12px; padding-bottom: 12px; }
nav li:nth-child(even) a { border-right: none; }
nav li:nth-child(5) a, nav li:nth-child(6) a { border-bottom: 1px solid #fff; }}@media only screen and (max-width : 320px),only screen and (max-device-width : 320px){ nav li a { font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; }}
Добавлено (15.03.2015, 00:12)
---------------------------------------------
Осталось добавить пару скриптов
Код
<link href='http://fonts.googleapis.com/css?family=Cutive' rel='stylesheet' type='text/css'>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
И наше меню уже готово в употреблении.
Данное меню можно подкорректировать на вкус и цвет по вашему желанию и поэтому оно очень функционально в плане адаптации!