Хаки и Скрипты 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;
    }
}

вот и все

Можешь почитать и вот эту статейку "Теги dl"

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

25.03.14 Много-уровневое адаптивное меню
27.03.1517 лучших генераторов кода CSS3
15.01.14Чашка чая на CSS3
10.09.14Обалденные XOVERLAY CSS3 эффекты
29.06.17Будем фиксировать менюшку

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