Cпойлер средствами css… / Habr
В предпраздничные дни выдалась минутка, захотелось отвлечься — окунуться в мир занятных идей, отстранясь от забот праздника. В итоге, — идея: не ожидая пришествия html5, — смастерить спойлер «по клику» посредством css и HTML.Ранее в инете делались попытки реализовать подобное через псевдоклассы, — в основном через :focus, что вело к самоскрытию контейнера, при потере фокуса.
Основа данной конструкции — псевдокласс :checked
Минималистически идея выглядит так:
/* CSS */
.spoiler > input + .box {
display: none;
}
.spoiler > input:checked + .box {
display: block;
}
<!--// HTML //-->
<div>
<input type="checkbox" >
<div>
Текст сообщения в спойлере.
</div>
</div>
Как видим получился кроссбраузерный код, начиная с ИЕ9, где уже есть псевдокласс «:checked» и кончая актуальными версиями остальных браузеров. Cогласно замыслу, — это «чистая» html-css реализация.
<!-- Compliance patch for Microsoft browsers -->
<!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><![endif]-->
Под катом итоговый код «танцев c кроссбраузерностью» *тестировалось в ХP, Win7-8*
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Cпойлер средствами css</title> <style> .spoiler > input + .box > blockquote{ display: none; } .spoiler > input:checked + .box > blockquote { display: block; } .spoiler > input[type="checkbox"] { cursor: pointer; border-color:transparent!important; border-style:none!important; background:transparent none!important; position:relative;z-index:1; margin:-10px 0 -30px -230px; } .spoiler > input[type="checkbox"]:focus { outline:none; /* Убираем обводку в ИЕ8 при "фокусе" */ } .spoiler span.close, .spoiler span.open{ padding-left:22px; color: #00f!important; text-decoration: underline; } .spoiler > input + .box > span.close { display: none; } .spoiler > input:checked + .box > span.close { background: url(http://st0.bbcorp.ru/img/minus.png) 4px 60% no-repeat; display: inline; } .spoiler > input:checked + .box > span.open { display: none; } .spoiler > input + .box > span.open { background: url(http://st0.bbcorp.ru/img/plus.png) 4px 60% no-repeat; display: inline; } .spoiler blockquote, .spoiler{ padding:1em; border-radius:15px; -webkit-border-radius:15px; -khtml-border-radius:15px; -moz-border-radius:15px; -o-border-radius:15px; -ms-border-radius:15px; } .spoiler { overflow-x:hidden; box-shadow: 0px 3px 8px #808080; border:#E5E5E5 solid 2px; -webkit-box-shadow:0px 3px 8px #808080; -khtml-box-shadow:0px 3px 8px #808080; -moz-box-shadow:0px 3px 8px #808080; -ms-box-shadow:0px 3px 8px #808080; } .spoiler blockquote { margin-top:12px; min-height: 23px; border:#CDCDCD 2px dashed; } </style> <!-- Compliance patch for Microsoft browsers --> <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><![endif]--> </head> <body> <div> <div> <!--* Добавлен tabindex="-1" для снятия фокуса при переходе по "tab" --> <input type="checkbox" tabindex="-1" > <div> <span class=close>Скрыть</span><span class=open>Показать</span> <blockquote> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </blockquote> </div> </div> </div> </body> </html>
Минусы:
В ИЕ8 —в ИЕ6-7 — чекит панель «винтажно» выдвинута левее спойлера; (Но мы и не ставили себе задачу поддержку данных Ие в изначальных замыслах.
DEMO
PS: Код позволяет просматривать контент спойлера при отключённом java-script, — что востребовано при серфе со старых мобильников, анонимайзеров или с жестко-настроенных фаерволов.
Хочу выразить признательность Octane с javascript.ru форума и devote, без которых идея не могла быть реализованной.
habr.com
Спойлер для сайта на CSS
102
289
Ранее мы уже рассмотрели два способа, позволяющих Вам создать на своем сайте спойлеры для показа и скрытия объемных материалов: Создаем свой собственный спойлер для сайта и Собственный спойлер с плавным открытием и скрытием содержимого.
Теперь же мы хотим предложить Вам еще один Вариант создания спойлера, основным отличием которого от рассмотренных
ранее является использование
Для наглядного примера работы предлагаемого нами скрипта спойлера на CSS, обратите внимание на пару спойлеров, находящихся ниже:
Нужно знать, как и что делать, чтобы текст появился под спойлером, а в заголовке спойлера было «Открыть-Закрыть».
ЗакрытьНужно знать, как и что делать, чтобы текст появился под спойлером, а в заголовке спойлера было «Открыть-Закрыть».
ЗакрытьДля получения точно таких же спойлеров на CSS, как в примере, показанном выше, для начала необходимо добавить CSS код:
HTML код:
<style type="text/css">
.spoiler_desc {
background: #333333;
padding: 0 5px;
border-radius: 0 0 5px 5px;
margin-top: 22px;
}
.spoiler_desc p {
cursor: text;
color: #FFFFFF;
}
.spoiler_close {
display: none;
width: 100%;
height: 22px;
background: #FFFF66;
border-radius: 5px 5px 0 0;
text-indent: 10px;
cursor: default;
border-bottom: 1px dotted #000000;
position: absolute;
top: 0px;
left: 0;
}
.spoiler_close:hover { background: #F5FF27; }
.spoiler_open:before {
content: 'Открыть';
border-bottom: 1px dotted #000000;
cursor: default;
text-indent: 10px;
border-radius: 5px 5px 0 0;
width: 100%;
height: 22px;
background: #FFFF66;
display: block;
position: absolute;
top: 0px;
left: 0;
}
.spoiler_open:hover:before { background: #F5FF27; }
.spoiler_open {
margin: 5px 0 0 15px;
height: 23px;
width: 240px;
outline: none;
float: left;
position: relative;
overflow: hidden;
-webkit-transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-ms-transition: height 0.3s ease;
-o-transition: height 0.3s ease;
transition: height 0.3s ease;
}
.spoiler_open:focus { height: 122px; }
.spoiler_open:focus .spoiler_close { display: block; }
.spoiler_open:focus:before { display: none; }
</style>Далее, в том месте Вашей странички, где Вы планируете использовать спойлеры, необходимо добавить код этих спойлеров:
HTML код:
<div class="spoiler_open" tabindex="1">
<div class="spoiler_desc">
<p>Нужно знать, как и что делать, чтобы текст появился под спойлером,
а в заголовке спойлера было "Открыть-Закрыть".</p>
</div>
<span tabindex="0" class="spoiler_close">Закрыть</span>
</div><
div class="spoiler_open" tabindex="2">
<div class="spoiler_desc">
<p>Нужно знать, как и что делать, чтобы текст появился под спойлером,
а в заголовке спойлера было "Открыть-Закрыть".</p>
</div>
<span tabindex="0" class="spoiler_close">Закрыть</span>
</div>Если Вам необходимо сделать спойлеры, высота которых будет подстраиваться по содержимому, то стиль .spoiler_open:focus { height: 122px; } замените на .spoiler_open:focus { height: auto; }. Но, в таком случае пропадет эффект плавного открытия.
Если Вы не хотите оставлять под спойлерами пустое пространство, и чтобы текст не обтекал спойлер справа, то добавьте после спойлеров
Как видите, вполне неплохие спойлеры можно создавать и на CSS без использования JavaScript кода, что позволяет значительно увеличить скорость загрузки сайта, т.к. не приходится подгружать библиотеку jQuery.
Дата создания: 20:43:58 27.03.2013 г.
Дата обновления: 20:15:33 25.10.2014 г.
Посещений темы: 26319 раз(а).
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то лучше сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Спойлер для сайта | Step For Top
Спойлер — это скрытая информация на сайте (текст, изображение и т.д.), которая открывается на странице после нажатия на кнопку или ссылку
А это содержимое спойлера. Тут может быть все, что угодно. Используйте любые HTML-теги.
Как установить спойлер на сайт
Чтобы сделать такой спойлер у себя на сайте, используйте этот код:
<script> function spoiler() { if(document.getElementById(‘spoiler’).style.display == ‘none’){ document.getElementById(‘spoiler’).style.display = ‘block’; }else{ document.getElementById(‘spoiler’).style.display = ‘none’; } } </script> <input type=»button» value=»Нажми меня»> <p><br></p> <div> А это содержимое спойлера. Тут может быть все, что угодно. Используйте любые HTML-теги. <hr> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <script>
function spoiler() { if(document.getElementById(‘spoiler’).style.display == ‘none’){ document.getElementById(‘spoiler’).style.display = ‘block’; }else{ document.getElementById(‘spoiler’).style.display = ‘none’; } }
</script>
<input type=»button» value=»Нажми меня»> <p><br></p>
<div>
А это содержимое спойлера. Тут может быть все, что угодно. Используйте любые HTML-теги. <hr> </div> |
Данный код можно вcтавить на любую HTML сраницу в то место, где нужен спойлер. Содержимое спойлера может быть любое на Ваше усмотрение.
Также этот спойлер можно вставлять и в шаблоны сайта uCoz, а в самом содержимом использовать системные переменные Ucoz.
Несколько спойлеров на одной странице
Если на одной страницы нужно установить несколько таких спойлеров, тогда этот код Вы вставляете несколько раз. НО!!! В этом коде установлена функция, которой дано имя spoiler. В следующем коде который Вы будете ставить на той же странице слово spoiler в коде Вам нужно заменить на любое другое. Если третий раз — опять новое слово. Слово spoiler в коде встречается 6 раз!!! Будьте внимательны.
Редактирование кнопки спойлера
Сама кнопка это следующая строка. Чтобы отредактировать кнопку — нужно вносить изменения именно в эту строку:
<input type=»button» value=»Нажми меня»>
<input type=»button» value=»Нажми меня»> |
Тег <input> применяется для создания различных кнопок, флажков, переключателей и полей для заполнения (форм). У этого тега очень много атрибутов, но для редактирования нашей кнопки мы рассмотрим лишь некоторые.
Атрибут type — в нашем случае только два варианта:
— button — простая кнопка;
— image — кнопка изображение. Применяя этот атрибут не забудьте добавить атрибут src и путь к файлу картинке.
<input type=»image» src=»путь_к_картинке» value=»Нажми меня»>
<input type=»image» src=»путь_к_картинке» value=»Нажми меня»> |
Атрибут value — в данном случае текст Вашей кнопки, чтобы его изменить просто введите другой текст;
Атрибут style — можно применить для изменения цвета кнопки и цвета шрифта. За цвет кнопки будет отвечать background, а за текст шрифта color.
<input type=»button» value=»Нажми меня»>
<input type=»button» value=»Нажми меня»> |
И в итоге у Вас может быть такая цветная кнопка:
Также существует еще много вариантов установки спойлера на сайт. Один из них — спойлер с плавным открытием и закрытием.
Статьи по теме:
stepfor.top
Простой спойлер на HTML и CSS
Простой спойлер на чистом HTML и CSS. Логика работы неявна – но работает, хотя и есть нюансы.
Особенности:
- Требует наличия подключенного файла
css– причем сам файл при этом может быть пустым - Требует определения классов элементов (см. код) – при этом классы могут быть не определены
- При нескольких спойлерах наименования классов элементов должны совпадать
- Допускается вложенность, без ограничений – при этом должны соблюдаться моменты, описанные выше
- Закрытие/открытие происходит по клику – при перезагрузке страницы, даже после очистки кэша, спойлер остается в последнем положении
- Закрывающий/открывающий элемент может быть любой – картинка, кнопка (
<button>Спойлер</button>), тегиspan,div. При этомbuttonдолжно быть безclass; при отсутствииclassвdivилиspanбудет элемент в виде текста
Между <head></head>:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css">
<title>Простой спойлер на HTML и CSS</title>
Между <body></body>:
<h2>Простой спойлер на HTML и CSS</h2>
<div>
<label>
<input type="checkbox"/>
<button>Первый спойлер - button</button>
<div>
Первый спойлер: текст или другое содержимое
</div>
</label>
</div>
<div>
<label>
<input type="checkbox"/>
<div>Второй спойлер - div</div>
<div>
Второй спойлер: текст или другое содержимое
</div>
</label>
</div>
<div>
<label>
<input type="checkbox"/>
<span>Третий спойлер - span</span>
<div>
Третий спойлер: текст или другое содержимое
</div>
</label>
</div>
<div>
<label>
<input type="checkbox"/>
<img src="spoiler.jpg" alt="Спойлер" title="Спойлер">
<div>
Четвертый спойлер: текст или другое содержимое
</div>
</label>
</div> coderhs.com