Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

Мы собираем и публикуем материалы не только на сайте, но и в нашей группе Вконтакте, нужно отметить то, что на сайте публикуются не все материалы, небольшая часть выкладывается только в группе.

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Скрипты меню » Горизонтальное меню, в стиле нашивок

Горизонтальное меню, в стиле нашивок

Опубликовал: artCreative™
Категория: Скрипты меню
Дата: 19 Июня 2025 в 04:04

0 голосов

Неплохое красное горизонтальное меню в стиле нашивок, реализованное на чистом CSS3. Нажмите здесь, для просмотра Демо.

Установка:

❶ Устанавливаем нижеприведенный код туда, где бы вы хотели видеть меню (желательно в верхнюю часть сайта):

Код

<nav>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Categories</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </nav>

❷ Следующий код вставляем в ваш CSS:

Код

nav ul
  {
  padding: 0;
  margin: 0;
  list-style: none;
  }

  nav li
  {
  float: left;
  }

  nav a
  {
  float: left;
  color: #eee;
  margin: 0 5px;
  padding: 3px;
  text-decoration: none;
  border: 1px solid #831608;
  font: bold 14px Arial, Helvetica;
  background-color: #831608;
  background-image: -moz-linear-gradient(#bb413b, #831608);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));
  background-image: -webkit-linear-gradient(#bb413b, #831608);
  background-image: -o-linear-gradient(#bb413b, #831608);
  background-image: -ms-linear-gradient(#bb413b, #831608);
  background-image: linear-gradient(#bb413b, #831608);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  text-shadow: 0 -1px 0 rgba(0,0,0,.8);
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  }

  nav a:hover
  {
  background-color: #bb413b;
  background-image: -moz-linear-gradient(#831608, #bb413b);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#831608), to(#bb413b));
  background-image: -webkit-linear-gradient(#831608, #bb413b);
  background-image: -o-linear-gradient(#831608, #bb413b);
  background-image: -ms-linear-gradient(#831608, #bb413b);
  background-image: linear-gradient(#831608, #bb413b);
  }

  nav a:active
  {
  background: #bb413b;
  position: relative;
  top: 2px;
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
  }

  nav span
  {
  border: 1px dashed #eba1a3;
  display: inline-block;
  padding: 4px 15px;
  cursor: pointer;
  background-color: #bb413b;
  background-image: -moz-linear-gradient(#d4463c, #aa2618);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d4463c), to(#aa2618));
  background-image: -webkit-linear-gradient(#d4463c, #aa2618);
  background-image: -o-linear-gradient(#d4463c, #aa2618);
  background-image: -ms-linear-gradient(#d4463c, #aa2618);
  background-image: linear-gradient(#d4463c, #aa2618);
  }

  nav a:hover span
  {
  background-color: #bb413b;
  background-image: -moz-linear-gradient(#aa2618, #d4463c);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#aa2618), to(#d4463c));
  background-image: -webkit-linear-gradient(#aa2618, #d4463c);
  background-image: -o-linear-gradient(#aa2618, #d4463c);
  background-image: -ms-linear-gradient(#aa2618, #d4463c);
  background-image: linear-gradient(#aa2618, #d4463c);
  }

Автор файла: VYMPEL-CLAN.RU

Ссылка на источник материала

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 656 « Назад

Теги материала: горизонтальное, нашивок, стиле, меню

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Скрипты меню » Горизонтальное меню, в стиле нашивок

Горизонтальное меню, в стиле нашивок

Комментарии пользователей