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
-
Lék na phishing a apatii ve světě e-mailového marketingu
18. března 2024 -
Regulace digitálních služeb: Co přináší nové nařízení DSA?
20. února 2024 -
Užitečné nástroje pro bezpečnost na internetu
17. října 2024 -
Vstupte do éry umělé inteligence: ASOME Max Studio s AMD Ryzen™ 9 7940HS
14. listopadu 2023
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 :)