Сегодня 18 марта, вторник ГлавнаяНовостиО проектеЛичный кабинетПомощьКонтакты Сделать стартовойКарта сайтаНаписать администрации
Поиск по сайту
 
Ваше мнение
Какой рейтинг вас больше интересует?
 
 
 
 
 
Проголосовало: 7279
Кнопка
BlogRider.ru - Каталог блогов Рунета
получить код
Хаки и Скрипты Next Generation CMS
Хаки и Скрипты Next Generation CMS
Голосов: 1
Адрес блога: http://ngcmshak.ru
Добавлен: 2013-12-31 14:21:51 блограйдером 88888888
 

Адаптивное навигационное меню

2013-11-07 22:36:54 (читать в оригинале)

Адаптивные сайты все больше прорываются в веб ппостранство,и вот я нашел урок по созданию адаптивного меню.
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<br> <small>Go Home</small></a></li>
<li><a href="#">About<br> <small>Meet Us</small></a></li>
<li><a href="#">Clients<br> <small>Meet Our Friends</small></a></li>
<li><a href="#">Work<br> <small>See Our Work</small></a></li>
<li><a href="#">Podcast<br> <small>Hear Us</small></a></li>
<li><a href="#">Downloads<br> <small>Steal Our Stuff</small></a></li>
<li><a href="#">Blog<br> <small>Read About Us</small></a></li>
<li><a href="#">Contact<br> <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;
}
}
вот и все

Тэги: css

 


Самый-самый блог
Блогер ЖЖ все стерпит
ЖЖ все стерпит
по количеству голосов (152) в категории «Истории»


Загрузка...Загрузка...
BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.