Можно назвать это минишаблоном, но это скорее скрипт чем шаблон. Он позволит вам красиво представить свое портфолио, миниблог, визитку, небольшой каталог или на что хватит фантазии. Смотрится красиво.
Заинтригованы? Ну так давайте начнем.
1. jQuery
Для начала вставим вот этот код между тегами и (У тех, у кого сайты на uCoz вставлять не обязательно):
Code
<script type="text/javascript" src="http://s101.ucoz.net/src/u.js"></script>
Рассмотрим сам скрипт
Что бы его добавить, создайте текстовый файл с расширением .js (например gold.page.js)
И добавьте данную строчку между тегами <head> и </head>
Code
<script src="АДРЕС К СКРИПТУ" type="text/javascript"></script>
Code
jQuery(function(){
function linkopt(a,b){
$('.content div').fadeOut() //Исчезание открытого контента
setTimeout(function(){$(a).fadeIn();},500) //Появление нового
$('.menu').animate({top:'27px', left:'30px'}, "slow") //Передвижение меню влево
$('.menu a').css({opacity: '.4'}) //При нажатии на ссылку остальные ссылки светлеют
$('.bgblur').fadeOut() //Убирание размытия
$('.black').fadeOut() //Убирание затемнения
};
$('body').ready(function(){
setInterval(function(){
$('.stars').animate({backgroundPosition: '+=200px -5px'}, 6000, 'linear') //Передвижение заднего фона со звездами
$('.stars1').animate({backgroundPosition: '+=200px 5px'}, 2500, 'linear') //Передвижение среднего фона со звездами
$('.stars2').animate({backgroundPosition: '+=200px 10px'}, 1000, 'linear') //Передвижение переднего фона со звездами
}, 0)
});
$('.link1').click(function(){
setTimeout(function(){
$('.menu').animate({top:'155px', left:'270px'}, "slow") //При нажатии на главную будет возвращение меню в середину
$('.bgblur').fadeIn() //появление размытия
$('.black').fadeIn() //Появление затемнения
},500)
$('.menu a').css({opacity: '.4'}) //При нажатии на ссылку остальные ссылки светлеют
$(this).css({opacity: '1.0'}) //Данная ссылка темнеет
});
$('.link2').click(function(){
linkopt('.about'); //Появление div'a с указанным классом
$(this).css({opacity: '1.0'}) //Данная ссылка темнеет
});
$('.link3').click(function(){
linkopt('.blog'); //Появление div'a с указанным классом
$(this).css({opacity: '1.0'}) //Данная ссылка темнеет
});
$('.link4').click(function(){
linkopt('.order'); //Появление div'a с указанным классом
$(this).css({opacity: '1.0'}) //Данная ссылка темнеет
});
$('.link5').click(function(){
linkopt('.forum'); //Появление div'a с указанным классом
$(this).css({opacity: '1.0'}) //Данная ссылка темнеет
});
$('.link6').click(function(){
linkopt('.case'); //Появление div'a с указанным классом
$(this).css({opacity: '1.0'}) //Данная ссылка темнеет
});
});
Здесь ничего сложного нету, думаю разберетесь. 2. CSS
Code
body{background:#957400;background-position:0 0;background-size:600px;margin:0;font:12px Arial}
.body{width:700px;height:514px;background:url(img/ground.png);position:relative;left:23%}
.bgblur{position:absolute;width:100%;height:100%;background:url(img/ground-blur.png);z-index:0}
.black{position:absolute;width:100%;height:100%;background:#000;z-index:0;opacity:.5}
.stars{background:url(img/stars.png) repeat;}
.stars1{background:url(img/stars1.png) repeat;}
.stars2{background:url(img/stars2.png) repeat;}
.menu{position:relative;left:270px;top:155px;width:150px;text-align:center;float:left}
.menu a{display:block;height:20px;background:#786319;border:1px solid #2A2103;line-height:20px;margin:5px;text-decoration:none;font-size:10px;color:#000;opacity:.4;;border;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius: 2px;}
.menu a:focus{outline:0}
.content div {height:460px;width:480px;position:relative;top:25px;left:40px;overflow:auto;display:none}
3. HTML
Code
<html>
<head>
<title>Gold Page</title>
<!--[if IE]><style>*{display:none;}</style><[endif]-->
<link type="text/css" rel="StyleSheet" href="style.css" />
<script type="text/javascript" src="http://s22.ucoz.net/src/u.js"></script>
<script type="text/javascript" src="gold.page.js"></script>
</head>
<body><div class="stars"><div class="stars1"><div class="stars2"><div class="black"></div>
<div class="body">
<div class="bgblur"></div>
<div class="menu">
<a class="link1" style="opacity:1.0" href="javascript://">Главная</a>
<a class="link2" href="javascript://">О бо мне</a>
<a class="link3" href="javascript://">Блог</a>
<a class="link4" href="javascript://">Заказать</a>
<a class="link5" href="javascript://">Форум</a>
<a class="link6" href="javascript://">Портфолио</a>
</div>
<div class="content">
<div class="about">
<!-- Содержимое -->
</div>
<div class="blog">
<!-- Содержимое -->
</div>
<div class="order">
<!-- Содержимое -->
</div>
<div class="forum">
<!-- Содержимое -->
</div>
<div class="case">
<!-- Содержимое -->
</div>
<div>
</div>
</div></div></div>
</body>
</html>
Ну что то вроде того. Картинки в архиве...
Если кому понравилось, ставим плюс за изобретение =)
