Simulace rámců 2
02. 03. 2006 | Redakce Interval.cz | Pro CSS | Komentáře: 0
Pokud jste někdy chtěli skloubit výhody framu s výhodami CSS layoutu toto řešení by vám mohlo dopomoci ke kýženému cíli. Celý obsah webu je umístěn v jednom souboru, načte se tedy celá stránka a při kliknutí na položku v menu již nedochází k obnovování (refreshi) stránky, ale jen k presunu na správné místo, na které odkazuje id.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku LESS.
CSS
body
{
margin:0;
padding:0 10px 0 10px;
border:0;
height:100%;
overflow-y:auto;
background:#fff fixed;
}
body
{
font-family: "trebuchet ms", arial, sans-serif;
font-size:76%;
text-align:center;
}
#page
{
margin:0 auto 0 auto;
display:block;
width:500px;
background:#fff;
text-align:left;
}
#page .txt
{
height:1000px;
background:#fff;
padding:0 10px;
}
#menu
{
display:block;
top:150px;
left:10px;
width:100px;
position:fixed;
padding:10px;
font-weight:bold;
color:#fff;
background:black;
}
* html #menu
{
position:absolute;
}
#menu ul
{
padding:0;
margin:0;
}
#menu ul li
{
list-style-type:none;
display:block;
float:left;
width:100px;
height:20px;
}
#menu ul li a:visited, #menu ul li a
{
display:block;
width:100px;
height:20px;
text-align:right;
text-decoration:none;
line-height:20px;
color:#fff;
padding:0 5px 0 0;
}
#menu ul li a:hover
{
background:#fff;
color:#000;
}
h3
{
color:red;
}
.pad
{
height:75px;
}
CSS pro IE
html
{
overflow-x:auto;
overflow-y:hidden;
}
XHTML
<html>
<body>
<div id="page">
<div class="txt">
<a id="odkaz1"></a>
<div class="pad"></div>
<h3>Nadpis 1</h3>
<p>Dolor sit amet...</p>
</div>
<div class="txt">
<a id="odkaz2"></a>
<div class="pad"></div>
<h3>Nadpis 2</h3>
<p>At tortor dapibus pellentesque...</p>
</div>
</div>
<div id="menu">
<ul>
<li><a href="#odkaz1">Odkaz 1</a></li>
<li><a href="#odkaz2">Odkaz 2</a></li>
</ul>
</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
- Simulace rámců
- Simulace animace v CSS
- Onclick menu bez reloadu i JS
- Mapa webu
- Vertikální dvouúrovňové obrázkové menu 2
Dejte vědět i ostatním o článku
Diskuse (počet komentářů: 0)
Buďte prvním návštěvníkem, který přidá nový komentář.
