Свернуть

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

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

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

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

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

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

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

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

Свернуть

Прямой эфир

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

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

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

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

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

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

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

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

Свернуть

Статистика

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

Гости сайта

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

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

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

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

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

Всплывающее меню на чистом CSS

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

1 голос

Очень оригинальное исполнение вида всплывающего навигационного горизонтального меню для сайта. За все спасибо создателю Kelin'у и его сайту web41k

Код меню:

Код

<ul class="wmtop">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Главная</a></li>
</ul>

CSS-стили:

Код

.wmtop {position:fixed;top:0;box-sizing:border-box;-moz-box-sizing:border-box;width:100%;padding:0 20px;background:rgba(0,0,0,.7);background:#333\0/;list-style:none;margin-top:-5px;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);transform:translateY(-40px);-webkit-transition:-webkit-transform .5s cubic-bezier(.7,-0.2,.3,1.5);-moz-transition:-webkit-transform .3s ease;-ms-transition:-webkit-transform .3s ease;transition:transform .5s cubic-bezier(.7,-0.2,.3,1.5);}
.wmtop:hover {-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
.wmtop li {display:table-cell;width:1%;-webkit-transform:skewX(160deg);-moz-transform:skewX(160deg);-ms-transform:skewX(160deg);transform:skewX(160deg);}
.wmtop a {color:#fff;text-decoration:none;display:block;text-align:center;-webkit-transform:skewX(-160deg);-moz-transform:skewX(-160deg);-ms-transform:skewX(-160deg);transform:skewX(-160deg);padding:18px;}
.wmtop li:hover {background:rgba(0,0,0,.3);background:#222\0/;}

Спонсор материала: Дизайн-Ателье по разработке сайтов и граффики RealARTs

Автор файла: web41k.ru

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

Ссылка на ДЕМО

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

Просмотров 1373 | Комментариев: 1 « Назад

Теги материала: css, всплывающее, Чистом, меню, на

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

Порядок вывода комментариев:

Like 0
Цитировать

Написано 18 Февраля 2015 в 04:24
Комментарий №1

muxa

Не работает

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

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

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

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

Всплывающее меню на чистом CSS

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