Meniuri 3

Administrator Data inscrierii: 07/Dec/2013 Mesaje: 1103

Citat:

Fisa 3
Meniu 6

#menu
{
width:100px;
text-align:center;
position:relative;
}
.box {
position:relative;
}
#menu a, #menu a:visited {
text-decoration:none;
color:#c00;
display:block;
width:88px;
height:16px;
border:1px solid #fff;
padding:5px;
}
#menu a span
{
display:none;
}
#menu a:hover
{
border:1px solid #c00;
}
#menu a:hover span.left,
#menu a:hover span.right
{
display:block;
position:absolute;
height:0;
width:0;
overflow:hidden;
border-top:8px solid #fff;
border-bottom:8px solid #fff;
}
#menu a:hover span.left
{
left:5px;
top:5px;
border-left:8px solid #c00;
}
#menu a:hover span.right
{
left:87px;
top:5px;
border-right:8px solid #c00;
}

xhtml

<div>
<div>
<a href="#nogo">Item 1
<span></span>
<span></span>
</a>
</div>
<div>
<a href="#nogo">Item 2
<span></span>
<span></span>
</a>
</div>
<div>
<a href="#nogo">Item 3
<span></span>
<span></span>
</a>
</div>
<div>`
<a href="#nogo">Item 4
<span></span>
<span></span>
</a>
</div>
<div>
<a href="#nogo">Item 5
<span></span>
<span></span>
</a>
</div>
</div>

Intreg meniul se afla intr-un div care are position relative astfel incat toate elementele interne se for pozitiona relativ la el.
Elementele de clasa box sunt tab-urile de meniu
Descrierea meniului inainte si dupa vizitare
Fara subliniere
Culoare text rosu
Sub forma de bloc cu dimensiunile 88 si 16 pixeli
Bordura este alba invizibila dar are rolul de a nu produce modificari cand va aparea cea de la hover
Padding 5 pixeli
Sagetile rosii din stanga si dreapta sunt facute cu span , deocamdata invizibil
Cand e hover apare un border rosu de un pixel
Vor fi utilizate 2 span-uri pentru dreapta si stanga
Sunt afisate blok pozitionate perfect in interioul tab-ului de clasa box.
Nu au mărimi tocmai pentru a realiza efectul de sageata cu ajutorul bordurilor
Dimensiunea 0 este realizata cu susținerea lui overflow
Bordurile de sus si jos sunt invizibile (albe) dar mari de 8 pixeli
Span-ul din stanga e la 5 pixeli de stanga si 5 px de sus
Are un border de 8 pixeli rosu dar care acum e doar un triunghi din combinatia cu cele doua borduri albe
La fel si in dreapta dar e pozitionat la 87 pixeli de stanga

Meniuri 3 Meniuri 3