• 2011
  • 0
  • Автор: Joshua Johnson
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt

Адаптивные сайты все больше прорываются в веб ппостранство,и вот я нашел урок по созданию адаптивного меню.
1.Будем использовать HMLT5,за меню у нас отвечает

Код:
<nav>
</nav>
Но вот проблема IE9,так что не забываем подключить скрипт приведенный ниже
Код:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
2.Создаем список,само основание менюшки
Код:
<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>
3.Добавим еще строчку пояснений
Код:
<nav>
<ul>
<li><a href="#">PixelsDaily
<small>Go Home</small></a></li>
<li><a href="#">About
<small>Meet Us</small></a></li>
<li><a href="#">Clients
<small>Meet Our Friends</small></a></li>
<li><a href="#">Work
<small>See Our Work</small></a></li>
<li><a href="#">Podcast
<small>Hear Us</small></a></li>
<li><a href="#">Downloads
<small>Steal Our Stuff</small></a></li>
<li><a href="#">Blog
<small>Read About Us</small></a></li>
<li><a href="#">Contact
<small>Email Us</small></a></li>
</ul>
</nav>
4. Теперь добавим стили
Код:
* {
padding: 0;
margin: 0;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nav {
width: 90%;
margin: 50px auto;
}

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%;
}

/*SMALL*/
nav small {
color: #aaa;
font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
text-transform: none;

}
nav li a {
display: block;
float: left;
width: 12.5%;
padding: 10px;

background: #444;
border-right: 1px solid #fff;

color: #fff;
font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
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;
}

nav li:last-child a {
border: none;
}

/* 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;
}
}
вот и все

Можешь почитать и вот эту статейку "Красивые лоадеры использующие HTML5 canvas."

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

TWIG -что это?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element