Cu cateva luni in urma am lansat tema Foliage Mod pentru WordPress care includea in header un bloc de navigare style-uit sub forma unui Cuprins (Table of Contents – TOC). Un articol recent in ScriptyGoddess mi-a sugerat sa postez tutorialul si fisierele spre download, ceea ce veti si gasi in continuare aici.

screenshot cuprins

Cu doar de 8 linii de HTML, si 5 linii de CSS, blocul de navigare TOC poate fi duplificat pentru situl propriu, pregatit pentru si mai mult styling.

Structura HTML stabila

Din toate optiunile posibile, listele ul si ol sunt categoric favoritele si unele din cele mai folositoare elemente structurale disponibile. Navigarea TOC incepe ca o lista neordonata ul fara style-ing.

<ul id="toc">
   <li><span>Chapter One</span> <a href="#">Link</a><br /></li>
   <li><span>Chapter Two</span> <a href="#">Link</a><br /></li>
   <li><span>Chapter Three</span> <a href="#">Link</a><br /></li>
   <li><span>Chapter Four</span> <a href="#">Link</a><br /></li>
   <li><span>Chapter Five</span> <a href="#">Link</a><br /></li>
   <li><span>Chapter Six</span> <a href="#">Link</a><br /></li>
</ul>

Fara CSS, lista neordonata ul pastreaza familiaritatea unei liste standard cu link-uri dupa cum puteti vedea in pagina exemplu.

CSS = Cuprins

Folosind cateva linii simple de CSS + un singur fisier imagine, lista HTML se transforma intr-o structura de navigare mult mai cunoscuta si similara cu cea gasita in carti la pagina de cuprins.

ul#toc {list-style:none;width:320px;}
#toc li {background:url(dot.gif) repeat-x 0 0.85em;}
#toc li a {float:left;background:#FFF;padding: 0 4px 0 0;}
#toc li span {float:right;background:#FFF; padding 0 0 0 4px;}
#toc li br {clear:both;}

Cu un simplu bloc de CSS, inlaturam list-items, aplicam imaginea de fundal pentru fiecare element, aplicam float stanga link-urilor de navigare si o culoare de fundal pentru a acoperi imaginea de fundal dedesubt, float dreapta pentru descriere si o culoare de fundal pentru a acoperi imaginea de fundal in dreapta, si in final folosim clear pentru fiecare element printr-un tag br.

Download

Intreaga structura de baza si styling-ul nu ar trebui sa dureze mai mult de cateva minute, dupa care puteti valorifica cum se cuvine restul timpului pentru a aranja blocul de navigare sa se potriveasca cu situl vostru.

HTML/CSS navigarea de tip “Cuprins”
download pachetul de cod

Vezi exemplul functional sau descarca pachetul de cod, exact deasupra.

autor: Derek Punsalan pe 21 Noiembrie, 2006
sursa: http://5thirtyone.com/archives/776

  • Reddit
  • StumbleUpon
  • del.icio.us
  • Digg
  • Twitter