Главная  Отзывы  WarFace   Clash of Clans   World of Tanks   AimJunkies


Страница 1 из 11
Форум » О uCoz » Скрипты » Красивое вертикальное меню на чистом CSS3
Красивое вертикальное меню на чистом CSS3

Andrey


Дата: Вторник, 29.04.2014, 15:53:16 | Сообщение # 1
Проверенные
Сообщений: 283
Статус: Offline
3

Нет наград

Ещё одно стильное, красивое вертикальное меню, построенное на чистом CSS3

Тест на фидле - (раздвиньте область с результатом)

Теперь давайте начнём установку меню

На странице где будет само меню между <head> и </head> прописываем три файла с CSS стилями:
Код
<link rel='stylesheet prefetch' href='/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='/css/normalize.css'>
<link rel="stylesheet" href="/css/style.css">


Теперь пропишем само меню:
Код
<div class="container">
    <nav>
     <ul class="mcd-menu">
      <li>
       <a href="">
        <i class="fa fa-home"></i>
        <strong>Главная</strong>
        <small>вернуться домой</small>
       </a>
      </li>
      <li>
       <a href="" class="active">
        <i class="fa fa-edit"></i>
        <strong>О нас</strong>
        <small>краткая информация</small>
       </a>
      </li>
      <li>
       <a href="">
        <i class="fa fa-gift"></i>
        <strong>Избранное</strong>
        <small>любимые сайты</small>
       </a>
      </li>
      <li>
       <a href="">
        <i class="fa fa-globe"></i>
        <strong>Новости</strong>
        <small>только самые интересные</small>
       </a>
      </li>
      <li>
       <a href="">
        <i class="fa fa-comments-o"></i>
        <strong>Блог</strong>
        <small>все, о чем я думаю</small>
       </a>
       <ul>
        <li><a href="#"><i class="fa fa-globe"></i>Новости</a></li>
        <li>
         <a href="#"><i class="fa fa-group"></i>Наша команда</a>
         <ul>
          <li>
          <a href="#"><i class="fa fa-male"></i>Воробъёв Андрей</a>
         <ul>
                              <li><a href="#"><i class="fa fa-leaf"></i>Проекти</a></li>
                              <li><a href="#"><i class="fa fa-tasks"></i>Контакты</a></li>
                              </ul>
                              </li>
           
           
         </ul>
        </li>
        <li><a href="#"><i class="fa fa-trophy"></i>Награды</a></li>
        <li><a href="#"><i class="fa fa-certificate"></i>Контракты</a></li>
       </ul>
      </li>
      <li>
       <a href="">
        <i class="fa fa-picture-o"></i>
        <strong>Портфолио</strong>
        <small>мои работы</small>
       </a>
      </li>
      <li>
       <a href="">
        <i class="fa fa-envelope-o"></i>
        <strong>Контакты</strong>
        <small>оставайся с нами на связи</small>
       </a>
      </li>
      <li class="float">
       <a class="search">
        <input type="text" value="поиск ...">
        <button><i class="fa fa-search"></i></button>
       </a>
       <a href="" class="search-mobile">
        <i class="fa fa-search"></i>
       </a>
      </li>
     </ul>
    </nav>
   </div>


И залить три файла из прикреплённого ниже архива к себе на хост в папку "css"

Вот и всё!

Материал подготовил: Andrey


9172714.png(14Kb) · 4460823.rar(9Kb)
Форум » О uCoz » Скрипты » Красивое вертикальное меню на чистом CSS3
Страница 1 из 11
Поиск: