Красивое меню «Гаражные двери»

0 511

Категория: Ucoz » Меню для ucoz Опубликовал: DavGev Дата: 19.05.2013

Меню для ucoz - Красивое меню «Гаражные двери»

Очень красивое меню, реализованное при помощи Jquery, сравнимое только с меню реализованными на флеше. При наведении на окошко(с нужной категорией) возникает эффект «Гаражной двери», тоесть затвор подымается, и появляеться картика. Меню можно настроить под свой вкус. Ваша фантазия, и эффект поразит Ваших посетителей. Советую посмотреть Демо меню.

Установка меню:

1)Создадим сам каркас меню, которий вставляем туда, где хотим видить на сайте. Обычно это "верхняя часть сайта" в П.У:

<ul id="menuback">
  <li class="shutter" id="shutter1"><a class="link" href="#1">Ссылка 1</a></li>
  <li class="shutter" id="shutter2"><a class="link" href="#2">Ссылка 2</a></li>
  <li class="shutter" id="shutter3"><a class="link" href="#3">Ссылка 3</a></li>
  <li class="shutter" id="shutter4"><a class="link" href="#4">Ссылка 4</a></li>
</ul>

2)В CSS:

* { margin:0px; padding:0px; }
body { background:#c1c1c1; }
a { outline-style: none; }

ul#menuback {
  margin: 50px auto;
  list-style: none;
  background: url(http://wallaby.ucoz.ru/images2/menu-bgss.jpg);
  width: 800px;
  overflow: auto;
}

ul#menuback li.shutter {
  width: 200px;
  height: 100px;
  display: block;
  float: left;
}

ul#menuback li#shutter1 {
  background: url(http://wallaby.ucoz.ru/images2/shutter-africanplains.jpg) no-repeat;
}
ul#menuback li#shutter2 {
  background: url(http://wallaby.ucoz.ru/images2/shutter-reptiles.jpg) no-repeat;
}
ul#menuback li#shutter3 {
  background: url(http://wallaby.ucoz.ru/images2/shutter-aviary.jpg) no-repeat;
}
ul#menuback li#shutter4 {
  background: url(http://wallaby.ucoz.ru/images2/shutter-arcticzone.jpg) no-repeat;
}

a.link {
  width: 200px;
  height: 100px;
  display: block;
  background: url(http://wallaby.ucoz.ru/images2/window.png) no-repeat bottom center;
  text-indent: -9999px;
}

3)Перед </head> :

Источник материала: Не указан.

Всего комментариев: 0