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

вот и все