Красивое меню «Гаражные двери» для uCoz
Увы, шаблон недоступен для скачивания или покупки, в связи с обращением правообладателя!
По всем вопросам обращайтесь к Администратору.
По всем вопросам обращайтесь к Администратору.
Кстати, все скрипты и картинки желательно скопировать себе в Файловый Менеджер, чтоб не потерять и не искать их потом.
Установка меню
Вставляем это в 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;}
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;}
Это вставляете где-нибудь между тегами <head> и </head>:
Код
<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>
<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>
Ну и теперь вставляете код самого меню туда, где вы бы хотели его видеть:
Код
<ul id="menuback">
<li class="shutter" id="shutter1"><a class="link" href="ссылка">Пункт_1</a></li>
<li class="shutter" id="shutter2"><a class="link" href="ссылка">Пункт_2</a></li>
<li class="shutter" id="shutter3"><a class="link" href="ссылка">Пункт_3</a></li>
<li class="shutter" id="shutter4"><a class="link" href="ссылка">Пункт_4</a></li>
<a href="http://fullweb.ucoz.ru/" style="display: none;"></a>
</ul>
<li class="shutter" id="shutter1"><a class="link" href="ссылка">Пункт_1</a></li>
<li class="shutter" id="shutter2"><a class="link" href="ссылка">Пункт_2</a></li>
<li class="shutter" id="shutter3"><a class="link" href="ссылка">Пункт_3</a></li>
<li class="shutter" id="shutter4"><a class="link" href="ссылка">Пункт_4</a></li>
<a href="http://fullweb.ucoz.ru/" style="display: none;"></a>
</ul>
Все готово!
Теги:
4 Комментария
подскажите ещё такую штуку! <head> и </head> я нашёл в -Дизайн-Страницы сайта-
HTML-далее 2-й пункт <head>, я удаляю всё между <head> и </head>, это с 3-11 пункты, вставляю ваш код, но получается какае то береберда. Вообщем у меня окошки не открываются при наведении на них курсора, помогите разобраться.
HTML-далее 2-й пункт <head>, я удаляю всё между <head> и </head>, это с 3-11 пункты, вставляю ваш код, но получается какае то береберда. Вообщем у меня окошки не открываются при наведении на них курсора, помогите разобраться.
Все это, как сами окна, так и дверки, и то что за ними - это картинки, и все они прописываются в стилях.