Спойлер с плавно раскрываемым содержимым , содержимое может быть как текстом так и изображением и другими функциями jQuery . |
Главная страница сайта . |
Исходный вид действующего плавного спойлера . Все " виды спойлера " действующие примеры .
Изначальный HTML спойлера .
<script type="text/javascript">
$(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});});
</script>
<div>
<a title="Click" href="javascript://" class="sliEsq">
<input value="Название , заголовок спойлера" type="button" class="InStyle"></a>
<div class="sliesQ slicont"><img alt="" src="http://runettex.clan.su/FPC/FPOptic.jpg" style="width: 200px;"><br>Плавно раскрываемое содержаниe</div>
</div>
Начальная CSS спойлера .
.slicont {width: 200px; cursor: pointer; display: none;}
.InStyle {width: 200px; cursor: pointer;}
Step . 1
Уберём стандартную кнопку спойлера и поставим свою, изображение butt00.png. Сразу пропишем стиль кнопки , ширину , высоту и для того что бы изображение кнопки под ссылкой не окружала рамка пропишем нулевой бордюр . Прописываем стиль кнопки классом .imgbott и заносим его в CSS таблицу .
В итоге получаем :
Уберём стандартную кнопку спойлера и поставим свою, изображение butt00.png. Сразу пропишем стиль кнопки , ширину , высоту и для того что бы изображение кнопки под ссылкой не окружала рамка пропишем нулевой бордюр . Прописываем стиль кнопки классом .imgbott и заносим его в CSS таблицу .В итоге получаем :
- Все изменения CSS и HTML выделяются .
- Вид спойлера .
Плавно раскрываемое содержаниe
- Вид спойлера .
название спойлера
Плавно раскрываемое содержаниe
HTML спойлера .
<script type="text/javascript">
$(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});});
</script><div class="divsli">
<a title="Click" href="javascript://" class="sliEsq">
<img alt="" src="butt00.png" class="imgbott">
<span class="spansli">название спойлера</span>
</a>
<div class="sliesQ"><img alt="" src="butt02.png" class="imgbott"></div>
</div>
CSS спойлера .
.slicont {width: 200px; cursor: pointer; display: none;}
.imgbott {width: 200px; height: 20px; border: 0px;}
.divsli {position: relative; top: 0px; left: 0px; border: 1px #ff0 solid;}
.spansli {position: absolute; top: 0px; left: 0px; font: bold 10pt Tahoma, sans-serif; text-align: center; border: 1px #f00 solid;}
На примере меню видно что красный бордюр тега SPAN обтекает надпись пункта и нет ни какой центровки надписи на кнопке . Так же видно что тег меню DIV вытянулся во всю ширину экрана . Это всё связано со специфическими свойствами этих тегов требующих в нашем случае применить для них стиль длинны width со значениями доводящими размеры этих элементов до размера спойлера - 200px . Убираем бордюры .В итоге получаем :
- Вид спойлера .
название спойлера
Плавно раскрываемое содержаниe
CSS спойлера .
.slicont {width: 200px; cursor: pointer; display: none;}
.imgbott {width: 200px; height: 20px; border: 0px;}
.divsli {position: relative; top: 0px; left: 0px; width: 200px;}
.spansli {position: absolute; top: 0px; left: 0px; font: bold 10pt Tahoma, sans-serif; text-align: center; width: 200px;}
Пример с бордюрами приведён не просто так . Этот способ контроля за поведением элементов меню потребуется для доводки CSS и в дальнейшем . Так же он необходим при изменении параметров шрифта , положения надписей при изменении каких либо параметров в CSS спойлера в дальнейшем . Если что то начинает съезжать не так как предполагается , включите ( написать стиль бордюра в соответствующем элементу классе CSS ) бордюр и смотрите что и как располагается относительно остального .