Мой блоХ

тут я иногда что-то пишу

Добавляем в блог спойлеры (только CSS)

Monday, July 26, 2010 9:01:50 PM

, ,

Так как расширение функционала форумов MyOpera у разработчиков не на первом месте, расширять функционал блога будем вручную rolleyes
Сейчас речь пойдет о спойлерах.

Чтобы добавлять собственные стили в блог, нужно зайти в Учетную запись - Дизайн - и выбрать любую тему (кроме Default).
После этого вверху списка этих тем появится ссылка customize your design.
Заходим туда и выбираем вкладку Advanced.
В этой вкладке появится поле, в которое и нужно вставлять свой CSS-код. Profit headbang

Итак, первый спойлер:
Контент появляется при наведении курсора на заголовок, при этом заголовок не исчезает.
В стиле пишем этот CSS-код:
div.spoiler {
	background:#888;
	height:auto;
	text-align:center;
	border:2px solid #666;
	}
div.spoilerCont {
	display:none;
	padding:2px;
	text-align:left;
	}
div.spoiler:hover div.spoilerCont {
	display:block;
	}
В блоге пишем этот HTML-код:
<div class="spoiler">
  Заголовок спойлера
  <div class="spoilerCont">
    Содержимое спойлера<br>
    Содержимое спойлера
  </div>
</div>
div class="spoiler" - это слой, в котором будет находится заголовок спойлера и слой с его содержимым.
div class="spoilerCont" - это слой, в котором будет находится содержимое спойлера. Он должен находится внутри div.spoiler.
Результат:
Заголовок спойлера
Содержимое спойлера
Содержимое спойлера

Второй спойлер:
Контент появляется при наведении курсора на заголовок, при этом заголовок исчезает.
В стиле пишем этот CSS-код:
div.spoiler {
	background:#888;
	position:relative;
	overflow-x:hidden;
	overflow-y:hidden;
	z-index:1;
	border:2px solid #666;
	}
div.spoilerTitle {
	position:relative;
	display:block;
	z-index:2;
	text-align:center;
	}
div.spoilerCont {
	background:#888;
	position:relative;
	display:none;
	z-index:3;
	padding:2px;
	}
div.spoilerTitle:hover + div.spoilerCont, div.spoilerCont:hover {
	display:block;
	margin-top:-20px;
	}
В блоге пишем этот HTML-код:
<div class="spoiler">
  <div class="spoilerTitle">
    Заголовок спойлера
  </div>
  <div class="spoilerCont">
    Содержимое спойлера<br>
    Содержимое спойлера
  </div>
</div>
div class="spoiler" - это слой, в котором будет находится слой с заголовком спойлера и слой с его содержимым.
div class="spoilerTitle" - это слой, в котором будет находится заголовок спойлера. Он должен находится внутри div.spoiler.
div class="spoilerCont" - это слой, в котором будет находится содержимое спойлера. Он должен находится внутри div.spoiler.
Результат:
Заголовок спойлера
Содержимое спойлера
Содержимое спойлера

Третий спойлер:
Контент появляется после нажатия курсором на заголовок, при этом заголовок исчезает.
В стиле пишем этот CSS-код:
div.spoiler {
	background:#888;
	position:relative;
	overflow-x:hidden;
	overflow-y:hidden;
	z-index:1;
	border:2px solid #666;
	}
div.spoilerTitle {
	position:relative;
	display:block;
	z-index:2;
	text-align:center;
	}
div.spoilerCont {
	background:#888;
	position:relative;
	display:none;
	z-index:3;
	padding:2px;
	}
div.spoilerTitle:active + div.spoilerCont, div.spoilerCont:hover {
	display:block;
	margin-top:-20px;
	}
В блоге пишем такой же код, как и в предыдущем примере:
<div class="spoiler">
  <div class="spoilerTitle">
    Заголовок спойлера
  </div>
  <div class="spoilerCont">
    Содержимое спойлера<br>
    Содержимое спойлера
  </div>
</div>
Результат:
Заголовок спойлера
Содержимое спойлера
Содержимое спойлера
Примечание:
Особенность третьего примера в том, что после того, как мы убрали курсор с содержимого спойлера - он обратно сворачивается awww
На этой страничке показано два примера выпадающих меню на CSS. Во втором примере (меню вылазит после нажатия) меню не сворачивается, если убрать с него курсор. После этого примера мне и захотелось сделать спойлеры для MyOpera, но так как я не вкурил принцип работы второго примера (даже после 100 грамм cheers ) - пришлось изобретать свои велосипеды со своими недостатками bigsmile
Почему-то в комментах к блогу вставка html-кода работает, в на форуме - нет. Так что расширить функционал наших форумов не выйдет awww
upd:
Четвертый спойлер от AntonDiaz:
Контент появляется при нажатии на заголовок, заголовок не исчезает. Контент прячется после нажатия за пределами спойлера.
В стиле пишем этот CSS-код:
a.spoilerTitle {
	text-align:center;
	display:block;
	width:100%;
	}
.spoilerCont {
	background:#222;
	border:2px solid #222;
	text-align:left;
	padding:0px 2px;
	margin:0 2px 2px 2px;
	display:none;
	}
.spoilerTitle:focus .spoilerCont {
	display:block;
	}
В блоге пишем этот HTML-код:
<a class="spoilerTitle" href="#1">
  Заголовок спойлера
  <div class="spoilerCont">
    Содержимое спойлера<br>
    Содержимое спойлера
  </div>
</a>
a class="spoilerTitle" - это блок, в котором будет находится заголовок спойлера и блок с контентом.
div class="spoilerCont" - это слой, в котором будет находится содержимое спойлера. Он должен находится внутри a.spoilerTitle.
Результат:
Заголовок спойлера
Содержимое спойлера
Содержимое спойлера
Содержимое спойлера
Содержимое спойлера

Тема для OperaRed Evil skin changelog

Comments

Anton DiazAntonDiaz Tuesday, July 27, 2010 1:10:24 AM

ЧЕТВЕРТЫЙ СПОЙЛЕР: 
<style>
.spoiler-title {text-align: center;}
.spoiler-content {display:none;}
.spoiler-title:focus + .spoiler-content, .spoiler-content:hover {display:block;}
</style>

<div class="box">
	<a class="spoiler-title" href="#">Заголовок</a>
	<div class="spoiler-content">Контент</div>
</div>
• Если кликнуть по заголовку спойлера, то содеражание спойлера не исчезнет даже после отвода указателя мыши • Однако если кликнуть по содержимому (например, для выделения текста) или любому другому элементу страницы, то содержимое всё-таки исчезнет после того, как уведут курсор от содержимого

Anton DiazAntonDiaz Tuesday, July 27, 2010 1:19:54 AM

ПЯТЫЙ ВАРИАНТ 
<style>
.spoiler-title {text-align: center;}
.spoiler-content {display:none;}
.spoiler-title:visited + .spoiler-content, .spoiler-content:hover {display:block;}
</style>

<div class="box">
	<a class="spoiler-title" href="#123">Заголовок</a>
	<div class="spoiler-content">Контент</div>
</div>
• После открытия уже никак не закрыть, даже если юзер очень захочет (закроется только через некоторое время само, после того, как «забудется» посещенная ссылка) smile

СергейSerega124 Tuesday, July 27, 2010 9:58:22 AM

У тебя четвертый пример заработал?

Вроде :focus должен применятся к ссылкам, но у меня заголовок почему-то не реагирует на нажатие awww

Anton DiazAntonDiaz Tuesday, July 27, 2010 5:11:55 PM

Да, работает.

СергейSerega124 Tuesday, July 27, 2010 6:27:53 PM

Все, разобрался cheers

Anton DiazAntonDiaz Tuesday, July 27, 2010 7:26:09 PM

ШЕСТОЙ ВАРИАНТ (Я ГЕНИЙ! happy ) 
<style>
.spoiler {display:block; text-decoration:none; color:#000;}
.spoiler-content {display:none;}
.spoiler:focus .spoiler-content {display:block;}
.spoiler-content:after {display:block; font-size:x-small; content:"Кликните мимо спойлера, чтобы свернуть его";}
</style>

<a class="spoiler" href="#">Заголовок
	<div class="spoiler-content">Содержимое спойлера. Здесь может находиться очень длинный текст, который нужно спрятать</div>
</a>
То же, что пятый вариант, но не закрывается если кликнуть на содержимое спойлера и отвести курсор. Закрывается только если кликнуть мимо спойлера.

СергейSerega124 Wednesday, July 28, 2010 5:37:05 PM

Originally posted by AntonDiaz:

Я ГЕНИЙ! happy


up

mnmKillavad Tuesday, August 10, 2010 12:04:01 AM

работает...up happy

StelianLZ2SDC Tuesday, August 10, 2010 6:18:46 PM

Большое спасибо! Буду попробовать. up

Tuấn Ngọcngtuanngoc Saturday, August 14, 2010 3:24:37 AM

wow, nice design
bigsmile

AndrewAndrewSpamer Sunday, November 7, 2010 6:50:22 PM

Полезная штука со спойленрами ! up

Anton DiazAntonDiaz Sunday, November 7, 2010 7:49:00 PM

Вах, дизайн +100500

СергейSerega124 Sunday, November 7, 2010 7:50:28 PM

happy

Anton DiazAntonDiaz Sunday, November 7, 2010 10:41:47 PM

И Котэ зачетный на автарке) Оригинальный размер можешь скинуть?)

Unregistered user Tuesday, November 9, 2010 11:24:31 AM

Аноним writes: эАЭэа КотЭ отаke, спасибо за спойлеры

Unregistered user Sunday, November 21, 2010 1:38:07 PM

Я writes: div.spoiler { background:#e6e6fa; height:auto; text-align:center; border:3px solid #4169e1; } div.spoilerCont { display:none; padding:2px; text-align:left; } div.spoiler:hover div.spoilerCont { display:block; } ****************** Парни помогите закруглить углы и у заголовка шрифт покрупнее сделать! Спасибо!

Anton DiazAntonDiaz Sunday, November 21, 2010 7:20:10 PM

Свойства border-radius и font-size для закругления и установки размера шрифта соответственно.

Unregistered user Monday, November 22, 2010 7:29:03 PM

Anton Diaz спасибо огромное )))))))) writes: Anton Diaz спасибо огромное ))))))))

Unregistered user Tuesday, November 23, 2010 11:37:59 PM

Зацените как я сделал.... writes: http://steel-cool.livejournal.com/

СергейSerega124 Tuesday, November 30, 2010 5:40:08 PM

Молодец, анонимус №24!

Personal TEDvinichenko Wednesday, December 1, 2010 2:41:03 PM

а темы готовые поможешь достать?) или написать)

СергейSerega124 Wednesday, December 1, 2010 2:45:18 PM

Originally posted by vinichenko:

а темы готовые поможешь достать?) или написать)


Для Оперы или блога?

Unregistered user Sunday, January 23, 2011 5:50:31 PM

muha writes: Люди, мне нужен Первый спойлер, только чтобы он открывался и закрывался не при наведении курсора, а при нажатии ! очень нужно ! если кто знает как сделать постучите плиз ! icq:401-715-245

СергейSerega124 Sunday, January 23, 2011 6:05:00 PM

Эти примеры только для данного блога.
Если у вас свой сайт - реализуйте на Javascript и не парьтесь с этими костылями rolleyes

Unregistered user Thursday, February 17, 2011 7:51:45 AM

Анонимно writes: "Эти примеры только для данного блога. Если у вас свой сайт - реализуйте на Javascript и не парьтесь с этими костылями rolleyes" Javascript игнорируют поисковые машины. А для открытия полного текста эти варианты идеальны. Автору респект!

Anton DiazAntonDiaz Thursday, February 17, 2011 10:16:55 AM

Originally posted by anonymous:

Javascript игнорируют поисковые машины. А для открытия полного текста эти варианты идеальны. Автору респект!


Ну и что? Если вам нужно, чтобы спойлер видели поисковики, то блок сделайте через CSS с display:block, а в JavaScript-е присвойте display:none. Если нужно, чтоб НЕ видели, то наоборот.

Gaius BaltarU-2 Monday, February 21, 2011 9:49:21 AM

Доходчиво. Спасибо

Unregistered user Tuesday, February 22, 2011 10:55:09 AM

Анонимно writes: >Ну и что? Если вам нужно, чтобы спойлер видели поисковики, то >блок сделайте через CSS с display:block, а в JavaScript-е >присвойте display:none. Если нужно, чтоб НЕ видели, то наоборот. Смысл тогда js юзать? Тем более что он не у всех включен. ИМХО если можно сделать через таблицу стилей, то костыль - js

Unregistered user Friday, March 25, 2011 3:15:39 PM

Анонимно writes: Уматовый урок! Спасибо.

Abhinavdecodedthought Saturday, July 9, 2011 1:21:04 PM

unfortunately I dont have the translator plugin enabled but I am guessing this is regarding your blog theme p
Great work up
cheers

Anton DiazAntonDiaz Sunday, July 10, 2011 1:12:22 AM

Originally posted by anonymous:

Смысл тогда js юзать? Тем более что он не у всех включен.
ИМХО если можно сделать через таблицу стилей, то костыль - js


Ну вы жжете. Если вы сделаете в CSS displayblock, а через JS уберете (а также сделаете возможно раскрыть через кнопку), то все поисковые машины и пользователи смогут в любом случае увидеть содержание спойлера (кто-то после клика, а кто-то сразу). А CSS-варианты таковы, что содержание спойлеров не смогут увидеть (ВООБЩЕ не смогут): 1) все поисковые машины 2) все пользователи некоторых браузеров.

Unregistered user Monday, July 11, 2011 9:53:33 AM

Kirill writes: А как сделать спойлер что б когда нажал на страницу она по верх окон открылась? в данном случае http://otdix.pp.ua/poisk тут поиск не влазит поэтому хочу что б открывалась по верх окон

AnnyAnhenFreedom Sunday, July 24, 2011 12:05:11 PM

Ребят, простите, что влаЗЮ rolleyes smile , но мне так интересно, что такое спойлер. В википедии не совсем точное определение, касающееся именно этой затронутой темы. Логически догадываюсь "с чем это едят", но хотелось бы немного поконкретней. Заранее благодарю smile

Anton DiazAntonDiaz Sunday, July 24, 2011 12:22:56 PM

Спойлер — блок с неким материалом (текст, картинки и т.д.), который показывается читателю не сразу, а только после какого-то его осмысленного действия (обычно — клика мышью).

Мотив использования может быть разным: спрятать сюжетную информацию, которая может испортить впечатления от чтения/просмотра («убийца — дворник!»), спрятать слишком большой блок, который нужен не всем читателям и т.д.

А название взялось от первого случая использования, так как такую сюжетную информацию и называют спойлерами

AnnyAnhenFreedom Sunday, July 24, 2011 1:59:50 PM

merci за информацию. и я так понимаю, вы активно используете спойлеры. Я ща буду у вас на блогах практиковаться. Думаю, нарою че-нить для примера smile)))))

Anton DiazAntonDiaz Sunday, July 24, 2011 4:35:24 PM

В MyOpera — я лично нет, не использую их.

AnnyAnhenFreedom Monday, July 25, 2011 11:46:44 AM

ну я так и поняла))) по ходу здесь никто не использует))

Unregistered user Tuesday, July 26, 2011 11:57:56 AM

Анонимно writes: Спасибо огромное, просто и кроссбраузерно.

Unregistered user Sunday, August 7, 2011 2:35:31 PM

Yana writes: подскажите, а можно сделать так, что бы спойлер открывался не вниз, а в бок ?)

Anton DiazAntonDiaz Wednesday, August 17, 2011 8:59:01 PM

Originally posted by anonymous:

Yana writes:

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


Зависит от того, как конкретно это должно работать и в каком месте (нужны подробности). Учитывая, что сам способ создания спойлера весьма костыляв, то и гибкость его невелика.

Unregistered user Tuesday, January 17, 2012 5:26:00 PM

Анонимно writes: Заголовок Содержимое спойлера. Здесь может находиться очень длинный текст, который нужно спрятать /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/* Здравствуйте, Можно ли в контент спойлера воткнуть ссылку?

Unregistered user Monday, January 7, 2013 10:38:38 AM

Анатолий writes: а как сделать так само как 3 вариант, только что бы заголовок не исчезал? покажите что изменить в css

Unregistered user Monday, January 7, 2013 2:05:30 PM

Анатолий writes: или как сделать что бы он закрылся после того как опять нажать на заголовок?

Unregistered user Monday, January 21, 2013 9:56:45 AM

docent writes: в последнем варианте не забудьте прописать для chrome атрибут tabindex

Григорийnomadness Saturday, May 18, 2013 9:20:36 AM

Автор, спасибо большое!

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies

May 2013
M T W T F S S
April 2013June 2013
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

My Extensions

Other projects