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>

4 Příspěvků v diskuzi

Odpovědět