Спойлер html или выпадающее меню


Здесь лежат Гигатонны очень полезной инфы!!



Спойлер html или выпадающее меню

Добрый вечер уважаемый читатель.
Сегодня я продолжаю публиковать статьи на тему шаблонов,
вот только данная статья скорее всего будет относиться сразу ко всем cms (кам)
о которых я пишу здесь, сегодня речь пойдёт о модернизации шаблонов,
а точнее о «спойлер html или
выпадающее меню».




В действительности,
побудили меня написать эту статью мои глубоко уважаемые читатели,
а именно Миха своими вопросами, вот подавай понимаешь-ли нам хак —
как спрятать часть текста в его родительскую категорию, вопрос в принципе по моему профилю,
я же о шаблонах пишу, значит и разбираться должен,
всё правильно.

Вот я  и отвечаю на его вопрос,
вам он тоже я думаю ответ будет полезен:
для начала, спойлер html и выпадающее меню есть одно и то-же,
работу реального спойлера вы сможете увидеть здесь:
Po4itayka.Ru нажав на категорию (новости) в верхнем меню,
сразу после нажатия появятся под категории данного ресурса.

вот пример работы спойлера (кликабельно):

пример работы спойлера

Здесь код уже встроен в шаблон,
теперь непосредственно о коде:
вариант первый:
установить данный код нужно внизу страницы:

футер

а это туда где нужен сам спойлер:

нужное место

Скачать код можно здесь.

Если у вас WordPress
первую часть ставите в футере, а вторую там где вам необходимо.
Если вы хотите поставить несколько спойлеров,
проставте в втором варианте где: id="1" 2 или 3,
вот так всё просто!

Вариант второй: данный код требуется разместить между тегами <head>...</head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript">

$(document).ready (function (){

$('.splLink').click (function (){

$(this).parent ().children ('div.splCont').toggle ('normal');
return false;

});

});

</script>

а этот код нужно установить до спойлера:

<style type="text/css">

.splCont{display:none; padding:3px 5px;}

</style>

а это код самого что ни на есть спойлера, размещается  внужном месте:

<a href="javscript://" class="splLink"><strong>Спойлер:</strong> пример</a>
<div class="splCont">

Это примерный текст!

</div>

Вот так всё просто,
так что если вы захотите немного облагородитиь ссвой сайт или блог пользуйтесь спойлерами и выпадающими меню ;)

Есть ещё вопросы, постараюсь ответить!

Понравилась статья «Спойлер html или выпадающее меню», почитайте и эти,
там то-же интересного много:

Где зарегистрировать блог? | DLE Screenshoter v.1.0 | Шаблоны для фотоблога (for WordPress)
или перейдите на главную: вебмастерам.

2leep.com


Хочешь быть в курсе последних новинок блога, подпишись на мою ленту RSS прямо сейчас и снимай сливки!

RSS Лента:"WMasterCMS.Ru"




Комментирование и размещение ссылок запрещено.

Комментарии закрыты.