Плавно раскрывающийся блок на HTML

Как сделать так, что бы при нажатии на надпись из под неё плавно выдвегался скрытый текст, типа как из под спойлера на сайтах, ток плавно, можно как нибудь сделать? Кто нибудь в курсе?
Я знаю, что это делается через div тег, но как именно?

Комментарии: 11
Ваш комментарий

Я знаю, что это делается через div тег, но как именно?
O'rly? Если узнаешь как это сделать через div, обязательно научишь меня.

0

Вместо фигурных скобок ставь угольные, кроме тех, что внутри style, это CSS стиль, там должны быть фигурные.

{style} - Задаём стиль
#menu { - Идентификатор отвечающий за параметры раскрывающегося меню
position: relative; - Задаем относительную позицию окну
top: -19px; - Отступ сверху -19, можно заменить отступом снизу и просто 19, но я не стал заморачиваться
display: none; - Скрываем меню
text-align: left; - Выравнивание текста внутри меню по левому краю
}
.menuCur { - Создаём класс
cursor: pointer; - Задаём определённый курсор
}
span { - Задаём параметры для тега span
color: #0064C8; - Цвет
cursor: pointer; - Курсор
}
span:hover { - Задаём параметры для него же, но когда курсор на нём
color: #0096FA; - Цвет
text-decoration: underline; - Подчёркивание текста
}
{/style} - Завершаем работу со стилями

{div"document.getElementById('menu').style.display='block'"} - Создаём див, при нажатии на который у нас открывается меню
{span}Раскрывающееся меню{/span} - Текст на который нам предстоит нажать
{/div}
{div id="menu"} - Создаём само меню
{div"document.getElementById('menu').style.display='none'" "color:#808080;" } - Создаём Див при нажатии на которого меню закрывается
Раскрывающееся меню - Текст на котоый нужно будет жать, нужно писать тот же, иначе будет выглядеть плохо, т.к. сам блок с меню прозрачный.
{/div}
{ul} - Создаём маркированный список
{li}Что-то одно{/li} - Первый пункт
{li}Что-то другое{/li} - Второй
{li}Что-то третье{/li} - И третий
{/ul} - Закрываем список
{/div} - Закрываем меню

Собственно так делал я, можешь пофантазировать и задать цвет или картинку на фон меню, поменять названия и т.д. и т.п.
Всё, что в style можно прописать и в отдельном .css файле и подключить его к документу прописав в заголовке (между тегами head) {link type="text/css" rel="StyleSheet" href="название файла стилей.css"}

0

Спс, кэп. Только вот я просил показать, как делать именно через div.

0

Это и есть через div. Что ещё ты ожидал увидеть?

0

Это и есть через div.
ЛоЛ. Это через CSS. Аналогично можно сделать, к примеру, через ol.

0

Что бы только через div я не знаю, но я искал именно это, просто я видел где-то, что там учавствует div тег, но, что бы только через один div, наврятли такое есть, разве, что через джава скрипт.

0

0003Spy
Во, первых, таким способом можно только моментально открыть/скрыть блок, плавно открыть не получится. А автор просил именно плавно. Во-вторых, u{div"document.getElementById('lcmLuaScripting').style.display='block'"} где элемент с id='lcmLuaScripting'? Неполный код. Принцип понятен, но сам код нерабочий, надо дополнять.

Моментальное открытие/скрытие сделать элементарно, оперируя значениями свойства display (none/block), под управлением обработчика событий на Javascript. А вот плавных блок - уже сложнее. Тут надо либо делать обработчик на jQuery, либо использовать фильтры на javаscript.

Вот хорошая статья по раскрытию плавных блоков.
http://jquerylist.ru/t0oltipe/contextual-slideout-tips.html

В ссылке замените ноль на английскую о. Галимый ПГшный антимат обнаружил какую-то хню u*/to. Ппц

0

Во, первых, таким способом можно только моментально открыть/скрыть блок, плавно открыть не получится. А автор просил именно плавно.
Без кэпа не обойтись: 0003Spy и есть автор.

0

nick hander aka Night Bloomer

Когда я заливал код сюда, я для сайта его делал, следовательно не исправил одну строчку, т.к. менял под сайт и упустил это, сам код рабочий, могу показать даже. Что бы сдеать плавно раскрывающийся блок, я в курсе, что там нужен джаваскрипт, но т.к. я с ними не особо в друзьях, то для начала хотя бы это сгодится. За ссылку спасибо, посмотрю на досуге.

0

Без кэпа не обойтись: 0003Spy и есть автор
:) Не обратил внимание.

Что бы сдеать плавно раскрывающийся блок, я в курсе, что там нужен джаваскрипт, но т.к. я с ними не особо в друзьях, то для начала хотя бы это сгодится.
Ну учи тогда) Javascript - неотъемлимая часть веб-сайтов.

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

|script|function otrkblok() {if(document.getElementById('blok').style.display=='none') {document.document.getElementById('blok').style.display='block'} else {document.getElementById('blok').style.display='none'}}|/script|
|div oncl()ick='otkrblok()'|Описание|/div||div sty()le='display:none' id='blok'|Содержание блока|/div|

Вот и сам непосредственный минимум, обеспечивающий функционал. (прямые палки убрать, в style и onclick убрать скобки внутри). Это просто, но если хочется плавности и еще разнообразных фишек, то переходи по моей ссылке.

0

nick hander aka Night Bloomer
Ну учи тогда) Javascript - неотъемлимая часть веб-сайтов.
Согласен, ну что тут поделать, буду учить ;)

0