Вариант со скрытым чек боксом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<head> <style> #sidebar {height:100%; background:blue; width:200px; clear:none; float:left;} #content {height:100%; background:green; width:400px; clear:none; float:left;} label {background:yellow;float:left;} input{display:none;} input:checked+#sidebar{display:none;} </style> </head> <body> <div> <label for="hider">Hide</label> <input type="checkbox" id="hider"> <div id="sidebar">foo</div> <div id="content">hello</div> </div> </body> |
Создает скрытый checkbox, для того, что бы изменять состояние checkbox к нему присоединяется метка, которая и будут фактически переключателем, по щелчку на котором происходит открытие или закрытие компонента.
Вариант с hover(открытие при наведении)
|
1 2 |
<span class="tag"><a></span><span class="pln">Hover over me!</span><span class="tag"></a></span> <span class="tag"><div></span><span class="pln">Stuff shown on hover</span><span class="tag"></div></span> |
Вариант target (открытие при щелчке на ссылке)
|
1 2 3 4 5 6 7 |
menu:hover block { visibility: visible; } block:target { visibility:hidden; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#toggle { display: none; } #toggle:target { display: block; } #toggle:target + .close { display: block; } .close { display: none; } |
|
1 2 3 4 5 6 |
<a href="#toggle">Show</a> <p id="toggle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in lectus nec orci vestibulum suscipit quis sodales tortor. Maecenas vitae hendrerit orci, eu faucibus libero.</p> <a href="#" class="close">Close</span> <a href="#">LINK</span> |
Что блок закроется как только произойдет шелчек по любой другой ссылке (в примере это LINK)
Элемент с фокусом
Это может быть достигнуто путем присоединения “tabindex” к элементу. Это сделает этот элемент “кликабельным”. Затем вы можете использовать: focus, чтобы выбрать свой скрытый div следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<span class="hljs-selector-class">.clicker</span> { <span class="hljs-attribute">width</span>:<span class="hljs-number">100px</span>; <span class="hljs-attribute">height</span>:<span class="hljs-number">100px</span>; <span class="hljs-attribute">background-color</span>:blue; <span class="hljs-attribute">outline</span>:none; <span class="hljs-attribute">cursor</span>:pointer; } <span class="hljs-selector-class">.hiddendiv</span>{ <span class="hljs-attribute">display</span>:none; <span class="hljs-attribute">height</span>:<span class="hljs-number">200px</span>; <span class="hljs-attribute">background-color</span>:green; } <span class="hljs-selector-class">.clicker</span><span class="hljs-selector-pseudo">:focus</span> + <span class="hljs-selector-class">.hiddendiv</span>{ <span class="hljs-attribute">display</span>:block; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"clicker"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span>></span>Click me<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hiddendiv"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> |
Вариант со ссылкой
|
1 2 3 4 |
a .hidden { visibility: hidden; } a:visited .hidden { visibility: visible; } <a href="#">A <span class="hidden">hidden content</span></a> |