Odkaz Více
Toto řešení ukazuje, jak pomocí CSS vytvořit populární odkaz „více“ nebo „více zde“, který po kliknutí zobrazí pokračování započatého textu ve zvětšeném objektu. Při opětovném kliknutí jinam zase tento text elegantně zmizí.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku SHOW ME SOME MORE….
CSS
body
{
font-size: 76%;
}
.tucne
{
font-weight:bold;
}
.holder
{
width:210px;
margin:5px;
padding:1em;
border:1px solid #ddd;
float:left;
}
.holder h2
{
color: navy;
text-align:center;
letter-spacing:0.2em;
font-variant: small-caps;
}
a.skryty
{
color:#000;
text-decoration:none;
outline-style:none;
}
a.skryty em
{
display:none;
}
a.skryty:hover
{
text-decoration:none;
}
a.skryty:active, a.skryty:focus
{
background:#fff;
}
a.skryty:active span, a.skryty:focus span
{
display:none;
}
a.skryty:active em, a.skryty:focus em
{
display:block;
color:#000;
width:100%;
font-style:normal;
cursor:default;
}
.clear
{
clear:both;
}
XHTML
<html>
<body>
<div class=“holder“>
<h2>Lorem ipsum</h2>
<p class=“tucne“>DOLOR SIT AMET</p>
<p>Nunc tincidunt varius felis.<br />
Etiam id lectus sed justo posuere lacinia. <br />
Etiam odio mi, elementum vitae,<br />
porta non lacus. Praesent vestibulum. </p>
<p><a class=“skryty“ href=“#more“><span>více »</span>
<em>Cum sociis natoque et magnis,<br />
nascetur ridiculus mus. Fusce ac ante.<br />
Donec pretium nunc sollicitudin velit. <br />
Integer ac lorem. Vestibulum in odio.<br />
Ut metus. Maecenas vestibulum metus.<br />
Mauris sit amet felis. Ut dui.<br />
Donec lacinia in enim. Integer ut orci.<br />
Maecenas ac augue. Nullam semper justo.<br /><br />
Morbi blandit rhoncus ante. Donec lectus.<br />
Ut condimentum. Quisque tempus porta,<br />
lorem volutpat purus, non venenatis velit.<br />
In est sapien, ultrices in, condimentum,<br />
vestibulum vitae, odio. Nullam sodalesn.<br /></em></a></p>
</div>
</body>
</html>
Mohlo by vás také zajímat
-
Optimalizace a zlepšení výkonu kódu: tipy a triky
14. srpna 2023 -
Členská sekce: 4 důvody proč ji mít na svém webu
12. března 2024 -
Apple jde naproti práci s HDR monitory!
17. ledna 2025 -
Nejnovější
-
Co je to transformer v umělé inteligenci (AI)
10. června 2025 -
INNOCN monitory: špičková kvalita za zlomek ceny
5. června 2025 -
20 let Ubuntu: Cesta od revoluce k digitální každodennosti
30. května 2025 -
Google Chrome nyní mění kompromitovaná hesla – jak to funguje?
28. května 2025
Conky
Říj 8, 2009 v 10:59Nefunguje v Google Chrome…!?
Matěj Johanides
Pro 10, 2009 v 13:45Nefunguje ani v IE ve Win7….
Anne
Led 16, 2010 v 10:56nefunguje v Mozille…
Miroslav Kucera
Led 16, 2010 v 17:07Anne: ve firefoxu 3.5.7 funguje :)