Хаки и Скрипты Next Generation CMS : CSS : Адаптивное навигационное меню

irbees2008 Опубликовано - 8 - ноября CSS

Автор: 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;
    }
}

вот и все

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

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

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