Oldalsáv fix pozícióval

Fix oldalsáv css-el

2009, 10. 05. | codeart | (X)HTML, CSS | Komment (1)

A mai nap azt szeretném bemutatni, hogy hogyan lehet létrehozni egy fix oldalsávval rendelkező html oldalt.

Hogy miért is jó ez? Elmondom. Olyan weboldalaknál, blogoknál ahol a tartalom nagyon sok és magas, jöhet jól ez a megoldás mivel nem kell az oldal aljáról kilométereket visszagörgetni ha pl. egy másik menüpontot szeretnénk megnézni. Így nagyban meg tudjuk könnyíteni az oldalak közti navigációt. Lássuk hát, hogy is működik mindez.

Cikkünk a hirdetés után folytatódik!

Online demo

A tervezés és a html kód

Mielőtt elkezdenénk a dolgot mindig gondoljuk át hogyan is szeretnénk megvalósítani azt. Jelen esetben szükségünk lesz egy olyan divre, nevezzük “container”-nek ami közrefogja a tartalmat. Ezen belül kell még egy az oldalsávnak “sidebar” és egy a tartalomnak “content”. A sidebarban rendezetlen listák (ul) lesznek h3 tagekkel és linkekkel. A contentben pedig szintén h3 címek, képek, és bekezdések a szöveges tartalomnak.

Először is hozzuk létre a html fájlt és a következő tartalmat másoljuk a body-ba:

<div class="container">
 
<div id="sidenav">
	<a href="/"><img src="logo.gif" alt="" /></a>
 
	<h2 class="categories">Kategóriák</h2>
		<ul>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
		</ul>
 
	<h2 class="sites">Linkek</h2>
		<ul>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
		</ul>
</div>
 
<div id="content">
 
	<h1>Articles &amp; Resources for Web Designers</h1>
		<h2>Opto tego, distineo luptatum</h2>
			<img src="images.jpg" border="0" alt="Kép" />
 
			<p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero.</p>
 
	<h1>Articles &amp; Resources for Web Designers</h1>
		<h2>Opto tego, distineo luptatum</h2>
			<img src="images.jpg" border="0" alt="Kép" />
 
			<p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero.</p>
 
	<h1>Articles &amp; Resources for Web Designers</h1>
		<h2>Opto tego, distineo luptatum</h2>
			<img src="images.jpg" border="0" alt="Kép" />
 
			<p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero.</p>
 
	<h1>Articles &amp; Resources for Web Designers</h1>
		<h2>Opto tego, distineo luptatum</h2>
			<img src="images.jpg" border="0" alt="Kép" />
 
			<p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero.</p>
</div>
</div>

Egy css beállítás segítségével fogjuk az oldalsávunkat lefixálni, így csak a content div lesz görgethető.

A css beállítások

A következő lépésben hozzunk létre egy style.css fájlt és másoljuk be a következőket :

.container {
    width: 980px;
    margin: 0 auto;
    overflow: hidden;
    background: url(container_stretch.gif);
    font-size: 1.2em;
    position: relative;
}
#sidenav {
    width: 300px;
    position: fixed; /*--Fix the sidenav to stay in one spot--*/
    float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
    float: right; /*--Keeps content to the right side--*/
    width: 640px;
    padding: 0 20px 20px;
}

A számunkra talán legérdekesebb rész a #sidenav, mivel itt található az a beállítás (position:fixed) ami segít fix helyen tartani az oldalsávot. (A letölthető demóban megtaláljátok a teljes css kódot!)
Sajnos a rögzített pozíciót az ie6 nem támogatja de itt találtok egy megoldást az orvoslására. Azok számára, akik nem nagyon ismerik a fix pozicionálást, ajánlott átolvasni az alábbi forrásokat.

Fix oldalsáv css-el
(184.4 KB) | 84 letöltés
Forrásfájlok a fix oldalsáv című bejegyzéshez

Zárszó

Szép és egyszerű. Remélem nektek is tetszik és fel tudjátok használni a munkában vagy saját oldalaknál.

Szerző: codeart

A codeART 2009-ben alakult és azóta gyűjt inspiráló cikkeket és publikál design és webfejlesztés témában érdekes és hasznos leírásokat.

Oszd meg:

CSS, Html

1 Hozzászólás

Mark Kent

11.03.04
08:57

Tetszik a leírás, és hasznos, köszönöm a munkád!

codeART