Скриншот материала «Горизонтальное выпадающее меню с использованием иконических шрифтов»
Хочу представить вам меню для сайта uCoz, меню выполнено в светло - голубых тонах, основная фишка этого меню в том что оно выпадающее. Так же в данном меню присутствует несколько цветов, и вы можете выбрать тот цвет который вам подойдет!
И теперь мы преступим к его установке:
Что бы меню функционировало правильно подключим CSS стили для него:[code
[/code]
Теперь приступим к установке самого меню:
Код
<nav class="blue">
<ul class="menu">
<li class="home"><a href="#"><i class="icon-home"></i></a></li>
<li>
<a href="#">Форум <i class="icon-double-angle-down"></i></a>
<ul>
<li><a href="#">Документы</a></li>
<li><a href="#">Сообщения</a></li>
<li><a href="#">Выход</a></li>
</ul>
</li>
<li>
<a href="#">Блог <i class="icon-double-angle-down"></i></a>
<ul>
<li><a href="#">html5</a></li>
<li><a href="#">css3</a></li>
<li><a href="#">java-script</a></li>
<li><a href="#">ajax</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>
<li><a href="#">Сервисы</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
<ul class="social right">
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-google-plus"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
</ul>
</nav>
Приступим к установке стилей для меню:
Код
.blue {
Зададим размер и отступ иконке домика, она играет роль главной страницы:
Код
.home {
Оформим начальный список ссылок:
Код
.menu li {
Теперь осталось под меню. Сделаем так что бы при наводке оно появлялось плавно:
Код
.menu ul {
Теперь настроим ссылки в нашем выпадающем списке:
Код
.menu ul li {
Ну вот настройку меню мы и закончили, приступим к установке иконок:
Код
.social {
Далее заливаем архив на сайт!
Установка завершена!:)
Горизонтальное выпадающее меню с использованием иконических шрифтов 
