В этом уроке Вы узнаете, как создать простой, но очень интересный информационный блок.
Ему можно придумать разные применения: от навигации по сайту, до простой галереи. Кроме этого, это может пригодиться при описании преимуществ какого-либо товара или сервиса (например, хостинга).
Суть работы очень проста: при нажатии на одну из ссылок в левой части блока, контент в правой меняется.
HTML
<div id="example-links">
<a href="#">Example 1</a>
<a href="#">Example 2</a>
<a href="#">Example 3</a>
<a href="#">Example 4</a>
<a href="#">Example 5</a>
</div>
<div id="example-content-container">
<div id="example-content">
<div><b>Example content 1</b><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque varius volutpat. Etiam non neque erat, nec molestie orci. Donec a lacus ut diam semper interdum et quis magna. Donec sagittis quam sit amet dui venenatis malesuada placerat quam facilisis.</div>
<div><b>Example content 2</b><br />Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</div>
<div><b>Example content 3</b><br />Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</div>
<div><b>Example content 4</b><br />Proin pretium purus ac ligula interdum varius. Mauris lobortis, risus id dapibus molestie, ipsum nunc consectetur risus, vel elementum nisi augue aliquet sapien. Phasellus vehicula purus et ante ultrices a mollis velit consectetur. Duis sapien risus, condimentum et pharetra in, sagittis quis felis. Suspendisse ornare odio non augue scelerisque volutpat. Phasellus interdum urna in erat adipiscing fringilla.</div>
<div><b>Example content 5</b><br />Ut nisi lacus, mollis id convallis a, accumsan quis nisi. Donec tempus lacinia hendrerit. Mauris fermentum nibh ac mi bibendum laoreet. Sed faucibus libero est, pulvinar aliquet justo. Nullam nisi nisl, sollicitudin vel lobortis id, commodo ut est. Pellentesque tellus mauris, imperdiet id condimentum vitae, condimentum eget ligula. Duis ut lacus magna, non consectetur justo.</div>
</div>
</div>
<div style="clear:both"></div>
Как Вы видите, слева у нас ссылки переключения блоков, справа сами блоки с контентом.
jQuery
$('#example-links a').click(function(){
var index = $("#example-links a").index(this);
$('#example-content').animate({"marginTop" : -index*220 + "px"}); // multiply by height+top/bottom padding/margin/border
return false;
});
Данный код производит переключение между блоками при нажатии.
Если же хотите, чтобы блоки менялись при наведении мышки, тогда используйте следующий код:
$('#example-links a').hover(function(){
var index = $("#example-links a").index(this);
$('#example-content').animate({"marginTop" : -index*220 + "px"}); // multiply by height+top/bottom padding/margin/border
});
Javascript код для правильной работы необходимо вставлять в тело документа, а не в шапку как обычно.
Кроме этого обязательно необходимо в шапке документа подключить фреймворк jQuery:
<script language="javascript" src="jquery-1.2.6.min.js" type="text/javascript">
</script>
CSS
И в конце нам понадобится немного стилей оформления для придания формы. Их Вы можете разместить в отдельном файле, или же вставить в тот же документ.
<style type="text/css">
#example-links {
border: 1px solid #ccc;
border-bottom: none;
float: left;
width: 200px;
}
#example-links a {
border-bottom: 1px solid #ccc;
display: block;
font-size: 17px;
height: 39px;
line-height: 39px;
padding-left: 10px;
}
#example-links a:focus {
outline: 0;
}
#example-links a:hover {
background-color: #ddd;
}
#example-content-container {
border: 1px solid #ccc;
border-left: none;
height: 200px;
overflow: hidden;
width: 350px;
}
#example-content div {
height: 200px;
padding: 10px;
}
</style>
Вот и все готово! До следующих уроков.