Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Как сделать на сайте Скрытые блоки.

Автор: Андрей Краснокутский

Дата: 2011-07-17

Скрипт для сайта: Скрытые блоки.

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

Кликая по ссылке, блок открывается (разворачивается), при повторном клике - блок сворачивается. Располагать в таком скрытом блоке можно все что угодно: текст, картинки, ссылки, смешанное содержимое и т.д. Я например использую этот скрипт в правой панели для сокрытия ссылок Архива материалов сайта разбитого по годам.

Вот пример работы одного из блоков скрипта раздела Архив:

2010 год:

Кликните по тексту-ссылке (выше) 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 обложку или картинку.

 

Просмотров: 11856


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Георгий
Дата: 2011-07-17

Спаибо, Андрей! У Вас очень полезный материал. Думаю, что наше сотрудничество(если Вы будете не против) - не за горами.

Комментарии добавил(а): АндрейК
Дата: 2011-07-17

Всегда рад новым знакомствам и готов рассмотреть все предложения о сотрудничестве

Комментарии добавил(а): Александр
Дата: 2011-07-17

Благодарю Андрей! хороший скипт, где нибудь попробую. С уважением Александр.

Комментарии добавил(а): Лариса
Дата: 2011-07-17

Скрипт очень полезный, но в IE не срабатывает... Очень жаль. С уважением, Лариса.

Комментарии добавил(а): АндрейК
Дата: 2011-07-18

Скрипт работает во всех браузерах, в том числе и в IE. Вероятно Вы где-то ошииблись.

Комментарии добавил(а): Vladimir
Дата: 2011-07-18

У меня паралельно с другими браузерами стоит и IE 9. Так вот в нем ссылки для раскрытия списка не активны. Даже на Вашем блоге, в разделе "Архив", ничего не открывается.

Комментарии добавил(а): Олег Гузь
Дата: 2011-07-20

Андрей! Я тоже сначала думал, что скрипт не работает. Он работает, но не при наведении курсора. Надо кликать! Молодец! Надо будет и себе попробовать!

Комментарии добавил(а): Темирлан
Дата: 2011-08-04

А можно сделать так, чтоб при наведении курсора оно само открылся?

Комментарии добавил(а): максим
Дата: 2011-11-02

супер - еще вставил php скрипт и вообще круто

Комментарии добавил(а): Лена
Дата: 2012-10-29

Очень нужный мне скрипт, но почему-то не работает. Что делать?

Комментарии добавил(а): Лена
Дата: 2012-10-29

В таблице стилей нужно что-то менять?

Комментарии добавил(а): АндрейК
Дата: 2012-10-30

Лена. Если скрипт не работает, значит Вы где то допустили ошибку. Вывод: нужно ее (ошибку) найти и устранить. Таблица стилей определяет внешний вид, если считаете что внешний вид нужно изменить, значит меняйте (то что Вам нужно). Но из всех стилей я умышленно здесь оставил только изменение курсора.

Комментарии добавил(а): Лена
Дата: 2013-01-31

Андрей, подскажите, пожалуйста, что нужно прописать в таблице стилей. У меня почему-то не скрывается содержимое.

Комментарии добавил(а): АндрейК
Дата: 2013-01-31

Лена, у Вас проблема не в таблице стилей, CSS - это только внешнее оформление скрипта, его вообще может не быть, как в примере этого урока.

Комментарии добавил(а): Сергей, sv-servisvostok@yandex.ru
Дата: 2013-04-09

Андрей, подскажите, в какое именно место в Вашем примере надо поставить ссылку на картинку, чтобы она стала фоном открывающегося блока?

Комментарии добавил(а): Сергей, sv-servisvostok@yandex.ru
Дата: 2013-07-12

Андрей, подскажите, что нужно сделать, чтобы подменю открывалось не вниз, а вверх?

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT