Meniuri 2

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

Citat:

Fisa 2
Menu 3 neon

dl#artist dt
{
display:none;
}
dl#artist dd
{
padding:0;
margin:0;
}
a.xmenu, a.xmenu:visited
{
width:5em;
height:3em;
background:#000;
text-decoration:none;
text-align:center;
color:#aaa;
float:left;
}
a.xmenu span, a.xmenu:visited span
{
display:block;
width:3em;
height:0.5em;
border-top:0.5em solid #000;
border-left:1em solid #000;
border-right:1em solid #000;
border-bottom:0.5em solid #000;
background:#050;
overflow:hidden;
}
a.xmenu:hover
{
color:#ff0;
}
a.xmenu:hover span
{
background:#0f0;
}

xhtml

<dl id="artist">
<dt>Artists menu</dt>
<dd>
<a class="xmenu" href="#nogo">

Matisse
</a>
</dd>
<dd>
<a class="xmenu" href="#nogo">

Cezanne</a>
</dd>
<dd>
<a class="xmenu" href="#nogo">

Turner
</a>
</dd>
<dd>
<a class="xmenu" href="#nogo">

Monet
</a>
</dd>
<dd>
<a class="xmenu" href="#nogo">

Lowry
</a>
</dd>
</dl>

Meniul e conceput cu susținerea dl (definition list)ce contine dt (definition term) urmat de dd(definition description) – se asemana putin cu tabelul
Se ascunde termenul definitiei (dt) (este unul singur)
Pot fi mai numeroase dd-uri pentru un acelasi dt.
Elementul de descriere a definitiei (dd) va avea padding 0 si margin 0, asta va fi si tab-ul meniului
Link-urile din meniu care vor fi continute de dd-uri vor fi de clasa xmenu
Latime 5em, inaltime 3 em (dimensiunile tab-urilor)
Fundal negru
Text nesubliniat si centrat
Culoare text alba
Pozitionare spre stanga lucru care face ca tab-urile sa fie pe aceeasi linie orizontala (meniu orizontal)
Incercati sa scoateti proprietatea float: left sa vedeti ce effect are
Efectul neon este dat de un dreptunghi care este colorat neon in interiorul link-ului a cu ajutorul tag-ului span
Ca sa fie vizibil are display block (altfel ar dispare)
Latime si inaltime 3em si 0.5 em
Bordura este tot neagra si are rol de margin adica lasa un spatiu in jurul lui span.
Fondul lui span este un verde care se potriveste cu neon-ul
Daca span e mai inalt cu overflow:hidden ascundem fracțiune care e mai mare
Un galben pentru text
Si neon pentru span

Meniuri 2 Meniuri 2