Адаптивное вертикальное многоуровневое меню на CSS3
Установка:
1#: Между head и /head на нужных страницах вставьте:
|
1 2 |
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'> <link rel='stylesheet prefetch' href='/css/mcv.css'> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<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-female"></i>Девка</a></li> <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> <li><a href="#"><i class="fa fa-female"></i>Девка #2</a></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> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
А как поставить свои иконки??
Список всех доступных иконок можно найти на официальном сайте http://fontawesome.io/icons/