Хаки и Скрипты Next Generation CMS

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

irbees2008 irbees2008 Опубликовано - 8 - ноября CSS
3172 - 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;
}
}
вот и все

Можешь почитать и вот эту статейку "Кнопка очистки кеша движка"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [5]
  • Гости: [4]
  • Поисковики: [1] Яндекс
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 31
  • Генерация страницы: 0.093сек
  • Потребление памяти: 4.944 Mb 
  •   яндекс.ћетрика