| Категории раздела |
|
Профиль для ucoz
[9]
Новый профиль для ucoz, мини профиль для ucoz, скрипт для ucoz профиль, профиль для сайта ucoz
|
|
Ajax для ucoz
[13]
Ucoz ajax, ajax окна для ucoz, скрипты ajax для ucoz, новые ajax окна для ucoz, новый вид ajax ucoz
|
|
Скрипты для ucoz
[128]
скачать скрипты для ucoz, скрипты ucoz
|
|
Меню для ucoz
[45]
меню для ucoz, горизонтальное меню для ucoz, раздвижное меню ucoz, вертикальное, выпадающие меню ucoz
|
|
Календари для ucoz
[20]
скрипт календарь cs, скрипт для ucoz календарь, календарь для ucoz cs 1.6, календари ucoz
|
|
Часы для ucoz
[31]
часы для ucoz, часы для ucoz cs 1.6
|
|
Статистика для ucoz
[11]
статистика cs для ucoz
|
|
Форма входа для ucoz
[15]
форма входа для ucoz
|
|
Переключатели для ucoz
[9]
Переключатели страниц для ucoz
|
|
Шапки для ucoz
[13]
шапки для ucoz cs 1.6
|
|
|
-
Главная
-
Скрипты для ucoz
-
Меню для ucoz
-
Красивое меню «Гаражные двери»
Красивое меню «Гаражные двери»
|
Очень красивое меню, реализованное при помощи Jquery, сравнимое только с меню реализованными на флеше. При наведении на окошко(с нужной категорией) возникает эффект «Гаражной двери», тоесть затвор подымается, и появляеться картика. Меню можно настроить под свой вкус. Ваша фантазия, и эффект поразит Ваших посетителей. Советую посмотреть Демо меню.
Установка меню:
1)Создадим сам каркас меню, которий вставляем туда, где хотим видить на сайте. Обычно это "верхняя часть сайта" в П.У:
Code
<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:
Code
* { 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> :
Code
<script type="text/javascript" src="http://wallaby.ucoz.ru/js_template/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://wallaby.ucoz.ru/js_template/jquery.backgroundPosition.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Set css in Firefox (Required to use the backgroundPosition js)
$('#shutter1').css({backgroundPosition: '0px 0px'});
//Animate the shutter
$(".link").hover(function(){
$(this).parent().animate({backgroundPosition: '(0px -100px)'}, 500 );
}, function() {
$(this).parent().animate({backgroundPosition: '(0px 0px)'}, 500 );
});
});
</script>
|
|
Категория
Меню для ucoz
| Добавил:
Wallaby
| Просмотров:
4597
|
|
|
Комментарии отсутствуют