Informatica
Programare - Software - Web Design
|
Nou pe simpatie:
barbyDana
 | Femeie
25 ani
Bacau
cauta Barbat
28 - 46 ani |
|
|
InformaticaInregistrareLoginPozeNu sunteti logat. Lista Forumurilor Pe Tematici
|
| #1 |
 AdminAdministrator
Postari: 315
|
|
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 folosite 2 span-uri pentru dreapta si stanga
Sunt afisate blok pozitionate absolut in interioul tab-ului de clasa box.
Nu au dimensiuni tocmai pentru a realiza efectul de sageata cu ajutorul bordurilor
Dimensiunea 0 este realizata cu ajutorul 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
|
|
|
| |
|
