Odkaz Více
02. 05. 2006 | Redakce Interval.cz | Pro CSS | Komentáře: 4
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>
Další aktuální články na interval.cz
- Chamurappiho Webylon: čtyři články s kritikou W3C
- Nenápadný cloud: synchronizace dat z prohlížečů
- Pozvánka: Random Hacks of Kindness 2012
- Zajímavost o češtině pro redakční systém WordPress
- Pozvánka na konferenci o vyhledávačích zboží 2012
Tematicky související články
- Horizontální menu s náhledem stránky
- Nahrazení tečkovaného okraje při onfocus
- Fotogalerie se stejnou výškou řádku
- Horizontální záložkové obrázkové menu
- Vertikální obrázkové menu
Dejte vědět i ostatním o článku
Komentáře ke článku
Datum vložení: 08. Říjen 2009, 10:59:24
Nefunguje v Google Chrome...!?
Datum vložení: 10. Prosinec 2009, 13:45:12
Nefunguje ani v IE ve Win7....
Datum vložení: 16. Leden 2010, 10:56:46
nefunguje v Mozille...
Datum vložení: 16. Leden 2010, 17:07:35
Anne: ve firefoxu 3.5.7 funguje :)
