Приветствую Вас Прохожий | RSS Суббота, 10.12.2016, 05:57
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 6
Гостей: 5
Пользователей: 1
MaDaRa



Главная » Файлы » Скрипты для uCoz » Скрипты блоки и шапки

Горизонтальное выпадающее меню с использованием иконических шрифтов

Горизонтальное выпадающее меню с использованием иконических шрифтов Горизонтальное, выпадающее, меню, использованием, иконически
Описание: Меню создавалось с 6 разными цветами на ваш вкус.
Что бы работали наши иконки подключите стили для их реализации.
Код 1:
Код
<link rel="stylesheet" href="css/font-awesome.min.css">  
<!--[if IE 7]><link rel="stylesheet" href="css/font-awesome-ie7.min.css"><![endif]-->

Далее - разметка.

HTML:

Напишем блок с навигацией и разместим в нем два списка: основное меню и соц. сети
Код 2:
Код
<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>

Далее добавим красок в наше меню
СSS
Оформляем блок ссылок, здесь он назван blue т.к. у нас несколько цветов, каждый из них имеет свой класс
Код 3:
Код
.blue {  
  background: #0099FF;  
  height: 51px;  
  border: 1px solid #0099FF;  
  padding: 1px 0;  

  -webkit-border-radius: 4px;  
  -moz-border-radius: 4px;  
  border-radius: 4px;  

  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 6px 1px rgba(0,0,0,.15),inset 0 -1px 0 rgba(0,0,0,.05);  
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 6px 1px rgba(0,0,0,.15),inset 0 -1px 0 rgba(0,0,0,.05);  
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 6px 1px rgba(0,0,0,.15),inset 0 -1px 0 rgba(0,0,0,.05);  

}

Задаем размер и отступ иконке домика, она играет роль главной страницы
Код 4:
Код
.home {  
  font-size: 18px;  
  margin-left: 10px;  
}


Оформляем начальный список ссылок
Код 5:
Код
.menu li {  
  position: relative;  
  float: left;  
  display: block;  
  padding: 13px 20px;  

  -webkit-border-radius: 2px;  
  -moz-border-radius: 2px;  
  border-radius: 2px;  

  cursor: pointer;  
}  

.menu li a {  
  display: block;  
  color: #fff;  
}  

.menu li:hover {  
  background: #0082D8;  
}


Осталось подменю. Делаем его плавным
Код 6:
Код
.menu ul {  
  position: absolute;  
  top: 45px;  
  left: 0;  
  opacity: 0;  
  border: 2px solid #0099FF;  
  background: #fff;  

  -webkit-border-radius: 0 0 5px 5px;  
  -moz-border-radius: 0 0 5px 5px;  
  border-radius: 0 0 5px 5px;  

  -webkit-transition: opacity .25s;  
  -moz-transition: opacity .25s;  
  -o-transition: opacity .25s;  
  -ms-transition: opacity .25s;  
  transition: opacity .25s;  
}  

.menu li:hover > ul { opacity: 1; }

И мы на финишной прямой установки, иконки соц.сетей
Код 7:
Код

  .social {  
  float: right;  
  margin-right: 10px;  
}  

.social li {  
  float: left;  
  display: block;  
  padding: 13px 20px;  
  cursor: pointer;  
}  

.social li a {  
  color: #fff;  
  font-size: 14px;  
}  

.social li:hover {  
  background: #0082D8;  
  -webkit-border-radius: 2px;  
  -moz-border-radius: 2px;  
  border-radius: 2px;  
}


Все.
Автор\Источник: http://get-element.3dn.ru/

Для того что бы скачать архив необходимо зайти на сайт как пользователь. Размер: 18.0Kb
Просмотров: 4989 | Комментарии: 3 | Рейтинг: 3.0/4 | |Категория: Скрипты блоки и шапки | Добавил: makcim19997 | Дата: 13.01.2014 | Скачали: 30 | Теги: иконических, использованием, Горизонтальное, шрифтов, меню, выпадающее
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 3
-1   Спам
3 SlowMotion   Дата: 23.01.2014  Время: 22:14   [№ 15185]
автор материала немножко не верно сделал...
makcim19997, в дальнейшем, будьте добры, учитывайте то, что не все знакомы с понятиями css, html.
Если конкретно - установку css не стоило так расписывать, поскольку это может запутать не посвященных.
все те объяснения что вы писали перед отрезком кода, лучше бы вставить как комментарии в css код, и со всех частей сделать один сплошной код.
Так же, не помешало бы разъяснение куда вставлять первый код (и все остальные тоже..) и куда загружать содержание архива.

1 orizontpr   Дата: 23.01.2014  Время: 18:12   [№ 15183]
не разобрался как установить меню, кто может помочь ?

2 Fallen™   Дата: 23.01.2014  Время: 20:27   1 [№ 15184]
Что именно не получилось?


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru