Наш опрос
Любите ли вы участвовать в опросах?
Всего ответов: 30
Случайный анекдот
72 При анализе второй мировой войны американские историки обнаружили интересный факт. А именно, при внезапном столкновении с силами японцев американцы, быстрее принимали решения и, побеждали даже превосходящие силы противника. Исследовав данную закономерность ученые пришли к выводу что средняя длина слова у американцев составляет 5,2 символа, тогда как у японцев 10,8, следовательно на отдачу приказов уходит на 56 % меньше времени, что в коротком бою играет немаловажную роль. Ради "интереса" они проанализировали русскую речь и оказалось, что длина слова в русском языке составляет 7,2 символа на слово (в среднем), однако при критических ситуациях русскоязычный командный состав переходит на ненормативную лексику, и длина слова сокращается до (!) 3,2 символов в слове. Это связано с тем, что некоторые словосочетания и даже фразы заме няются ОДНИМ словом. Для примера приводится фраза: "32-ой приказываю немедленно уничтожить вражеский танк, ведущий огонь по нашим позициям". - "20-ый е@ни по этому х@ю"
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

» Сегодня нас посетили:
» Зарег. на сайте
Всего: 3475
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
» Из них
Администраторов: 1
Модераторов: 3
С активностью: 176
Авторизованных: 3295

   Выезжающее горизонтальное меню на CSS3



Горизонтальное, выезжающее, темное меню выполненное на CSS3 и никаких скриптов. После установки вверху сайта появится черная полоска, шириной 5px, при наведении на которую будет выезжать ваше меню.

Установка:
В верхнюю часть сайта в панели управления, в самый верх сохраняем код:
Код
<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/;}


Html редактор
Автор: Prosvetekvator
Просмотров: 11731
13.12.2013


Другие статьи почитайка;)
Поделись ссылкой на форумах
Ссылка:
BB-code:
HTML:


« Пред. Выезжающее горизонтальное меню на CSS3 След. »


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

Мини-чат
Топ пользователей
Новое на форуме








Комментарии
11.06.2022