Как сделать на сайте Скрытые блоки.
Автор: Андрей Краснокутский
Дата: 2011-07-17 Скрипт для сайта: Скрытые блоки.
Сегодня мы рассмотрим новый скрипт (JavaScript) для сайта: Скрытые блоки. Скрипт полезен в случаях, когда на сайте уже не хватает места или Вы просто хотите скрыть какие-то блоки, например блок не вписывается в общий дизайн сайта или же блок имеет внушительный размер.
Кликая по ссылке, блок открывается (разворачивается), при повторном клике - блок сворачивается. Располагать в таком скрытом блоке можно все что угодно: текст, картинки, ссылки, смешанное содержимое и т.д. Я например использую этот скрипт в правой панели для сокрытия ссылок Архива материалов сайта разбитого по годам.
Вот пример работы одного из блоков скрипта раздела Архив:
Кликните по тексту-ссылке (выше) 2010 год: - блок развернется, при повторном клике - блок свернется. Внешний вид изменяется с помощью каскадных таблиц стилей CSS.
А теперь как всегда давайте разбираться как установить этот скрипт на сайт. Код Листинга 1 вставляем в код web-страницы между тегами <head> и </head> :
Листинг 1.
<script language="JavaScript1.2">
<!--
var ns6=document.getElementById&&!document.all?1:0
var head="display:''"
var folder=''
function expandit(curobj){
folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+1].style
if (folder.display=="none")
folder.display=""
else
folder.display="none"
}
//-->
</script> |
Хотя этот код прекрасно работает и в любом другом месте web-страницы. Поэтому, если по каким-то причинам не получается этот код установить между тегами <head> и </head>, ставьте там где можно - работать будет без проблем.
Далее идет сам выпадающий (открывающийся) блок в Листинге 2 привожу код работающего выше примера:
Листинг 2.
<p style='cursor:hand' onClick='expandit(this)'>2010 год:</p>
<span style='display:none';>
<p><a href='http://www.luksweb.ru/view_date.php?date=2010-12' target='_blank'>Декабрь</a></p>
<p><a href='http://www.luksweb.ru/view_date.php?date=2010-11' target='_blank'>Ноябрь</a></p>
<p><a href='http://www.luksweb.ru/view_date.php?date=2010-10' target='_blank'>Октябрь</a></p>
<p><a href='http://www.luksweb.ru/view_date.php?date=2010-09' target='_blank'>Сентябрь</a></p>
<p><a href='http://www.luksweb.ru/view_date.php?date=2010-08' target='_blank'>Август</a></p>
<p><a href='http://www.luksweb.ru/view_date.php?date=2010-07' target='_blank'>Июль</a></p>
<p><a href='http://www.luksweb.ru/view_date.php?date=2010-06' target='_blank'>Июнь</a></p>
<p><a href='http://www.luksweb.ru/view_date.php?date=2010-05' target='_blank'>Май</a></p>
<p><a href='http://www.luksweb.ru/view_date.php?date=2010-04' target='_blank'>Апрель</a></p>
<p><a href='http://www.luksweb.ru/view_date.php?date=2010-03' target='_blank'>Март</a></p>
<p><a href='http://www.luksweb.ru/view_date.php?date=2010-02' target='_blank'>Февраль</a></p>
<p><a href='http://www.luksweb.ru/view_date.php?date=2010-01' target="_blank">Январь</a></p>
</span>
|
Ключевые элементы здесь: <p style='cursor:hand' onClick='expandit(this)'>2010 год:</p>
<span style='display:none';> и закрывающий тег: </span>. Между этими элементами и располагается то, что будет открываться при клике на ссылку, в данном случае анкор ссылки у меня 2010 год: . Как Вы понимаете Вам нужно прописать здесь свои элементы: текст, графику, ссылки, короче все, что пожелаете.
Код Листинга 2 располагаете в том месте где нужен выпадающий блок. Для перечисления я использовал теги абзаца: <p> </p>, но без проблем работает и <div> </div> и даже просто <br>.
Вот и всё. Как видите все очень просто.
Всего Вам доброго.
Читайте так же:
Заказать создание Блога в Смоленске.
Чего нельзя делать продвигая и раскручивая сайт.
Внутренняя перелинковка web-страниц - очередной шаг к оптимизации сайта.
Закачиваем сайт на Хостинг. Ура!!! Наш сайт заработал в Интернете.
Как сделать красивую 3D обложку или картинку.
Просмотров: 15770
Спаибо, Андрей! У Вас очень полезный материал. Думаю, что наше сотрудничество(если Вы будете не против) - не за горами.
Всегда рад новым знакомствам и готов рассмотреть все предложения о сотрудничестве
Благодарю Андрей! хороший скипт, где нибудь попробую.
С уважением Александр.
Скрипт очень полезный, но в IE не срабатывает... Очень жаль.
С уважением, Лариса.
Скрипт работает во всех браузерах, в том числе и в IE. Вероятно Вы где-то ошииблись.
У меня паралельно с другими браузерами стоит и IE 9. Так вот в нем ссылки для раскрытия списка не активны. Даже на Вашем блоге, в разделе "Архив", ничего не открывается.
Андрей! Я тоже сначала думал, что скрипт не работает. Он работает, но не при наведении курсора. Надо кликать! Молодец! Надо будет и себе попробовать!
А можно сделать так, чтоб при наведении курсора оно само открылся?
супер - еще вставил php скрипт и вообще круто
Очень нужный мне скрипт, но почему-то не работает. Что делать?
В таблице стилей нужно что-то менять?
Лена. Если скрипт не работает, значит Вы где то допустили ошибку. Вывод: нужно ее (ошибку) найти и устранить. Таблица стилей определяет внешний вид, если считаете что внешний вид нужно изменить, значит меняйте (то что Вам нужно). Но из всех стилей я умышленно здесь оставил только изменение курсора.
Андрей, подскажите, пожалуйста, что нужно прописать в таблице стилей. У меня почему-то не скрывается содержимое.
Лена, у Вас проблема не в таблице стилей, CSS - это только внешнее оформление скрипта, его вообще может не быть, как в примере этого урока.
Андрей, подскажите, в какое именно место в Вашем примере надо поставить ссылку на картинку, чтобы она стала фоном открывающегося блока?
Андрей, подскажите, что нужно сделать, чтобы подменю открывалось не вниз, а вверх?
|