CSS: Menu Three Imprimir E-mail
Um exemplo simples de menu que pode ser feito utilizando CSS desenvolvido pelo CSSplay. Existe um efeito de luz que destaca a opção com o movimento do mouse. Veja um exemplo.

CSS - Cascading Style Sheet


<
style type="text/css">
dl#artist dt {
display:none;
}
dl#artist dd {
padding:0;
margin:0;
}
a.xmenu, a.xmenu:visited {
display:block;
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;
}
* html a.xmenu span, * html a.xmenu:visited span {
width:5em;
height:1.5em;
w\idth:3em;
he\ight:0.5em;
overflow:hidden;
}
a.xmenu:hover {
color:#ff0;
}
a.xmenu:hover span {
background:#0f0;
}
style>

html

<dl id="artist">
<dt>Artists menu</dt>
  <dd>
    <a class="xmenu" href="#nogo">
      <span></span>
      Matisse
    </a>
  </dd>
  <dd>
    <a class="xmenu" href="#nogo">
      <span></span>
      Cezanne</a>
  </dd>
  <dd>
    <a class="xmenu" href="#nogo">
      <span></span>
      Turner
    </a>
  </dd>
  <dd>
    <a class="xmenu" href="#nogo">
      <span></span>
      Monet
    </a>
  </dd>
  <dd>
    <a class="xmenu" href="#nogo">
      <span></span>
      Lowry
    </a>
  </dd>
</dl>

 
< Artigo anterior   Artigo seguinte >

web stats