Альтернатива MORE

[D Storm]

Достаточно давно уже обещал сделать эту штуку. Наконец добрался.

Итак, идея в том, чтобы сделать аналог MORE, которые оставался бы свёрнутым при просмотре одиночного поста (комментариев).

Объяснение того, как работает. Для тех, кто хочет понять.

Объяснение того, как работает. Для тех, кто хочет понять.

So. Как? Есть в CSS такие штуки, как селекторы. Они позволяют применять стиль не просто к классам, тэгам или элементам по ID, но к ним же с выполнением особых условий. В частности, :hover отвечает за элемент, когда на него наводится курсор, a :active применяется к элементу в момент нажатия по нему клавишей мыши (любой) и снимается, когда она отпускается. С их помощью можно имитировать кнопку.

Для начала, нам нужно 2 вложенных блока (с привязанными к ним классами). Во внешний мы вписываем название ссылки (скажем, стандартное "читать дальше"). Во внутренний уходит содержимое нашего не_more. В классах мы описываем следующие вещи.

1. Класс внешнего блока (дальше - .panelOut). Он должен выглядеть также, как тэг a, так что стоит добавить color, text-decoration и вообще сделать всё то, что вы делали с ссылками в вашем дизайне. Кроме того, пропишите position:relative; display:inline !important; - это обязательно.
2. .panelOut:hover. Так оно будет выглядеть при наведении, так что, опять же, опишите то же, что описывали для a:hover (если у вас ссылки по умолчанию - то это text-decoration:none; cursor:pointer;).
3. Класс внутреннего блока (дальше - .panelIn). Здесь вы описываете, как будет выглядеть то, что появится при нажатии. Дальше важные моменты. position:absolute; При этом, left, top, width и height (все 4 также обязаны быть заданы) должны быть подобраны так, чтобы блок всегда оказывался поверх ссылки, нажатие по которой его открывает (иначе он сразу же исчезнет). display:none; overflow:auto; - это тоже обязательно. Я в своём варианте помимо прочего навесил ещё background из полупрозрачного png - для того, чтобы, если я вдруг захочу убрать в такую штуку изображение, оно не стало полупрозрачным (как это произошло бы, пропиши я opacity меньше 1).
4. Последнее. Просто скопируйте строку. .panelOut:active .panelIn, .panelIn:hover {display:block; cursor:default !important;}

Как оно работает? В тот момент, когда вы нажимаете на кнопку, panelIn появляется, ровно на то время, пока кнопка зажата. Но, как бы быстро это ни было, срабатывает hover на panelIn (и держится до тех пор, пока вы не уберёте курсор с блока).

Готовый код и инструкции к применению.

Готовый код и инструкции к применению.

.panelIn {width:300px; height:300px; padding:20px; border-radius: 30px 15px; -moz-border-radius: 30px 15px; box-shadow: 0 0 15px #222; -webkit-box-shadow:box-shadow: 0 0 15px #222; -moz-box-shadow: 0 0 15px #222; background: url('/userdir/1/9/2/4/1924297/70496636.png'); display:none; position:absolute; overflow:auto; left:-170px; top:-170px; border:1px solid #111; color:#ccc; text-shadow: 0 0 1px #ccc; z-index:200 !important;}
.panelOut {position:relative; display:inline !important; text-shadow: 0 0 3px #93a3da; color:#93a3da;}
.panelOut:hover {cursor:pointer; text-shadow: 0 0 9px #93a3da;}
.panelOut:active .panelIn, .panelIn:hover {display:block; cursor:default !important;}

Сразу говорю, код адаптирован под мой днев, поэтому, перед тем как применять, не поленитесь слегка подогнать его под себя. Кроме того, в .panelIn прописан background. Либо замените его на какой-нибудь цвет, либо залейте изображение к себе в БИ и измените ссылку (если вам нужно то же, что у меня - оно тут). Иначе не получится, парсер CSS чистит ссылки на изображения из чужих БИ.

Это вставляйте в пост:

<div class="panelOut">название ссылки<div class="panelIn">содержимое вложения</div></div>

Один важный момент. Название ссылки не должно быть слишком длинным, иначе при нажатии в неправильном месте курсор может не оказаться поверх блока, и тот сразу же исчезнет. И ещё лучше бы не делать .panelIn слишком большим, иначе он может залезть за край экрана, и тогда контент потеряется, что не есть хорошо.

Пример 1. "Предисловие" и "первая глава".
Пример 2. Любой пост дневника.

@темы: текст, diaryCSS, Дизайн, Мысли вслух

Comments

[Norra Flicka]

Круто-круто.
Работаешь или так увлекаешься?

[D Storm]

fat-free
Хех. Рад, что понравилось. )

Раньше работал. Сейчас просто потиху закрываю долги и обещания, когда время и настроение появляется. Ну и мне интересно. Это как решение головоломок, только ещё и с долей пользы. )

[Norra Flicka]

Работал ЮАЙщиком?

[D Storm]

fat-free
Нет, PHP-кодером. Ну и с HTML \ CSS \ JS тоже часто сталкиваться приходилось. Хотя, как сказать, работал... Время от времени получал какие-то таски, время от времени сам чего-то творил (для друзей \ знакомых \ себя), ну а нормально поработать с приличной зарплатой так и не пришлось. А сейчас вообще не до того, учусь.