|
|
|
|
Как сделать на сайте Скрытые блоки. Автор: Андрей Краснокутский Дата: 2011-07-17 Скрипт для сайта: Скрытые блоки.Сегодня мы рассмотрим новый скрипт (JavaScript) для сайта: Скрытые блоки. Скрипт полезен в случаях, когда на сайте уже не хватает места или Вы просто хотите скрыть какие-то блоки, например блок не вписывается в общий дизайн сайта или же блок имеет внушительный размер. Кликая по ссылке, блок открывается (разворачивается), при повторном клике - блок сворачивается. Располагать в таком скрытом блоке можно все что угодно: текст, картинки, ссылки, смешанное содержимое и т.д. Я например использую этот скрипт в правой панели для сокрытия ссылок Архива материалов сайта разбитого по годам. Вот пример работы одного из блоков скрипта раздела Архив:
Кликните по тексту-ссылке (выше) 2010 год: - блок развернется, при повторном клике - блок свернется. Внешний вид изменяется с помощью каскадных таблиц стилей CSS. А теперь как всегда давайте разбираться как установить этот скрипт на сайт. Код Листинга 1 вставляем в код web-страницы между тегами <head> и </head> : Листинг 1.
Хотя этот код прекрасно работает и в любом другом месте web-страницы. Поэтому, если по каким-то причинам не получается этот код установить между тегами <head> и </head>, ставьте там где можно - работать будет без проблем. Далее идет сам выпадающий (открывающийся) блок в Листинге 2 привожу код работающего выше примера: Листинг 2.
Ключевые элементы здесь: <p style='cursor:hand' onClick='expandit(this)'>2010 год:</p> <span style='display:none';> и закрывающий тег: </span>. Между этими элементами и располагается то, что будет открываться при клике на ссылку, в данном случае анкор ссылки у меня 2010 год: . Как Вы понимаете Вам нужно прописать здесь свои элементы: текст, графику, ссылки, короче все, что пожелаете. Код Листинга 2 располагаете в том месте где нужен выпадающий блок. Для перечисления я использовал теги абзаца: <p> </p>, но без проблем работает и <div> </div> и даже просто <br>. Вот и всё. Как видите все очень просто. Всего Вам доброго.
Читайте так же: Заказать создание Блога в Смоленске. Чего нельзя делать продвигая и раскручивая сайт. Внутренняя перелинковка web-страниц - очередной шаг к оптимизации сайта. Закачиваем сайт на Хостинг. Ура!!! Наш сайт заработал в Интернете. Как сделать красивую 3D обложку или картинку.
Просмотров: 15552 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Георгий Спаибо, Андрей! У Вас очень полезный материал. Думаю, что наше сотрудничество(если Вы будете не против) - не за горами. Комментарии добавил(а): АндрейК Всегда рад новым знакомствам и готов рассмотреть все предложения о сотрудничестве Комментарии добавил(а): Александр Благодарю Андрей! хороший скипт, где нибудь попробую. С уважением Александр. Комментарии добавил(а): Лариса Скрипт очень полезный, но в IE не срабатывает... Очень жаль. С уважением, Лариса. Комментарии добавил(а): АндрейК Скрипт работает во всех браузерах, в том числе и в IE. Вероятно Вы где-то ошииблись. Комментарии добавил(а): Vladimir У меня паралельно с другими браузерами стоит и IE 9. Так вот в нем ссылки для раскрытия списка не активны. Даже на Вашем блоге, в разделе "Архив", ничего не открывается. Комментарии добавил(а): Олег Гузь Андрей! Я тоже сначала думал, что скрипт не работает. Он работает, но не при наведении курсора. Надо кликать! Молодец! Надо будет и себе попробовать! Комментарии добавил(а): Темирлан А можно сделать так, чтоб при наведении курсора оно само открылся? Комментарии добавил(а): максим супер - еще вставил php скрипт и вообще круто Комментарии добавил(а): Лена Очень нужный мне скрипт, но почему-то не работает. Что делать? Комментарии добавил(а): Лена В таблице стилей нужно что-то менять? Комментарии добавил(а): АндрейК Лена. Если скрипт не работает, значит Вы где то допустили ошибку. Вывод: нужно ее (ошибку) найти и устранить. Таблица стилей определяет внешний вид, если считаете что внешний вид нужно изменить, значит меняйте (то что Вам нужно). Но из всех стилей я умышленно здесь оставил только изменение курсора. Комментарии добавил(а): Лена Андрей, подскажите, пожалуйста, что нужно прописать в таблице стилей. У меня почему-то не скрывается содержимое. Комментарии добавил(а): АндрейК Лена, у Вас проблема не в таблице стилей, CSS - это только внешнее оформление скрипта, его вообще может не быть, как в примере этого урока. Комментарии добавил(а): Сергей, sv-servisvostok@yandex.ru Андрей, подскажите, в какое именно место в Вашем примере надо поставить ссылку на картинку, чтобы она стала фоном открывающегося блока? Комментарии добавил(а): Сергей, sv-servisvostok@yandex.ru Андрей, подскажите, что нужно сделать, чтобы подменю открывалось не вниз, а вверх? Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |