Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!
Сегодняшний урок будет о том, как сделать слайдер-панель в виде аккордеона. Очень удобно использовать данный вид панели если вы пишите FAQ или что либо еще. Даже малая презентация сайта в виде такого разворачивающегося списка будет выглядеть очень элегантно. Лично я планирую в дальнейшем использовать этот прием в разработке на других сайтах. А пока рекомендую разобраться вам. Как всегда начнем с того, что разберемся с тем, что должно присутствовать в <head>.
<!-- Стиль панели -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Скрипты на базе jQuery -->
<script type="text/javascript" src="hbp://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.acc_container').hide();
$('.acc_trigger:first').addClass('active').next().show();
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) {
$('.acc_trigger').removeClass('active').next().slideUp();
$(this).toggleClass('active').next().slideDown();
}
return false;
});
});
</script>
Как вы уже наверное успели заметить, я предпочитаю вставлять ссылку на jQuery, а именно беру ее с Google. Это не напрягает мой сайт и в то же время я всегда могу обновить версию jQuery на более позднюю, изменив лишь версию скрипта.
Далее рассмотрим, что у нас находится в файле style.css.
html {
overflow-Y: scroll;
}
*, * focus {
outline: none;
margin: 0;
padding: 0;
}
.container {
width: 500px;
margin: 0 auto;
}
h3 {
font: 4em normal Georgia, 'Times New Roman', Times, serif;
text-align:center;
padding: 20px 0;
color: #aaa;
}
h3 span { color: #666; }
h3 small{
font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
leber-spacing: 0.5em;
display: block;
color: #666;
}
h4.acc_trigger {
padding: 0; margin: 0 0 5px 0;
background: url(img/h2_trigger_a.png) no-repeat;
height: 46px; line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h4.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h4.acc_trigger a:hover {
color: #ccc;
}
h4.active {background-position: left bobom;}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bobom-right-radius: 5px;
-webkit-border-bobom-left-radius: 5px;
-moz-border-radius-bobomright: 5px;
-moz-border-radius-bobomleft: 5px;
border-bobom-right-radius: 5px;
border-bobom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}
.acc_container .block p {
padding: 5px 0;
margin: 5px 0;
}
.acc_container h3 {
font: 2.5em normal Georgia, "Times New Roman", Times, serif;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bobom: 1px dashed #ccc;
}
.acc_container img {
float: left;
margin: 10px 15px 15px 0;
padding: 5px;
background: #ddd;
border: 1px solid #ccc;
}
Для лучшей поисковой оптимизации вы можете в файле style.css изменить <h3></h3> и <h4></h4> соответственно на <h1></h1> и <h2></h2>.
Рассмотрим теперь html-код.
<div class="container"> <h4 class="acc_trigger"><a href="#">Заголовок 1</a></h4> <div style="display: none;" class="acc_container"> <div class="block"> <h3>Подзаголовок 1</h3> <a href="hbp://ruvisio.ru"></a> <p>Ваш текст будет находиться здесь!</p> </div> </div> <h4 class="acc_trigger active"><a href="#">Заголовок 2</a></h4> <div style="display: block;" class="acc_container"> <div class="block"> <h3>Подзаголовок 2</h3> <a href="hbp://ruvisio.ru"></a> <p>Ваш текст будет находиться здесь! </p> </div> </div> </div>
Вы можете дублировать контейнеры для создания новых вкладок в панели по мере необходимости. На этом урок закончен.
Панель «Аккордеон» с использованием CSS и jQuery (103.2 KB, 13 скачиваний)
Файл залит 14.08.2010 в 13:18
Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!
Комментарии
(1 weeks назад)
(4 weeks назад)
(4 weeks назад)
(28 weeks назад)
(28 weeks назад)