 |
|
 |
 |
| Subiectul anterior :: Subiectul urmator |
| Autor |
Mesaj |
Admin
Administrator
Data inscrierii: 07/Dec/2013
Mesaje: 44
|
 Trimis: 22/01/2017 18:23 Titlul subiectului: Meniuri 3 |
|
|
| 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 realizează 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 dimensiuni tocmai pentru a realiza efectul de sageata cu susținerea 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
 |
|
|
| Sus » |
|
|
|
|
|
Nu puteti crea un subiect nou in acest forum
Nu puteti raspunde in subiectele acestui forum
Nu puteti modifica mesajele proprii din acest forum
Nu puteti sterge mesajele proprii din acest forum
Nu puteti vota in chestionarele din acest forum
|
|
 |
|
|
 |
|
