[Hi5-Tutorial] Menus em CSS e Flash

[PunkeCas ®]

menus.

em breve serão postados.

http://www.tutorialized.com/view/tutorial/Creating-a-CSS-menu-in-Dreamweaver-8/15385

Menus Horizontais com efeitos hover

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]

Menus horizontais com efeito hover "drop down box"

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]

Menus Verticais com Efeitos hover

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]

Menus Verticais com efeito hover "send lateral box"

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]

[PunkeCas ®]

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]

[PunkeCas ®]

Parte css

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
.SumundosMenu #Sub ul li{display:block;float:left;margin:0 1px 0 0;}
.SumundosMenu #Sub ul li a{display:block;float:left;color:#FFFF00;text-decoration:none; padding:15px 22px 0 22px;height:28px;}
.SumundosMenu #Sub ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.SumundosMenu #Sub ul li a:hover, #Sub ul li a.PunkecasStart{color:#FF000F;background:transparent url(URL DA IMAGEM DO HOVER MENU) no-repeat top center;}
.SumundosMenu #Sub{position:relative;display:block;height:42px;font-size:11px;font-weight:bold; background:transparent url( URL DA IMAGEM DO FUNDO DO MENU) repeat-x top left; text-transform: capitalize;}
</style>
Parte html

Código: [Seleccione]

<div class="SumundosMenu">
<div id="Sub"><ul>
<li><a href="LINK DE DESTINO" class="PunkecasStart">TEXTO DO LINK 1</a></li>
<li><a href="LINK DE DESTINO">TEXTO DO LINK 2</a></li>
<li><a href="LINK DE DESTINO">TEXTO DO LINK 3</a></li>
<li><a href="LINK DE DESTINO">TEXTO DO LINK 4</a></li>
<li><a href="LINK DE DESTINO">TEXTO DO LINK 5</a></li></ul>
</div></div>


[PunkeCas ®]

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]

[PunkeCas ®]

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]

[PunkeCas ®]

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]

[PunkeCas ®]

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]

[PunkeCas ®]

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]

[PunkeCas ®]

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]

[PunkeCas ®]

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]

[Solitario]

Menu a base de CSS

Preview:




Parte em HTML:

Código: [Seleccione]

<div id="Menu" align="center"><br />
<!-- Create by http://6dogfox9.hi5.com/ --> 
<span class="alink"><a href="http://www.hi5.com/friend/profile/enforceFriendRequestSecurity.do?userid=ID DO VOSSO HI5">Adiciona</a></span>&nbsp;
<span class="alink"><a href="http://www.hi5.com/friend/photos/displayMyPhoto.do?ownerId=ID DO VOSSO HI5 ">Fotos</a></span>&nbsp;
<span class="alink"><a href="http://www.hi5.com/friend/fives/displayAddUserFive.do?userid=ID DO VOSSO HI5">Fives</a></span>&nbsp;
<span class="alink"><a href="http://www.hi5.com/friend/book/displaySignBook.do?userid=ID DO VOSSO HI5">Comenta</a></span>&nbsp;
<span class="alink"><a href="http://www.hi5.com/friend/mail/displayComposeMail.do?toIds=ID DO VOSSO HI5">Mensagens</a></span>
</div>

Parte em CSS:

Código: [Seleccione]

<style type="text/css">
 /* Create by http://6dogfox9.hi5.com/ */ 
#Menu {
  width: 470px; height: 70px;
  background-image: url(http://i733.photobucket.com/albums/ww337/Solitaro37/MenuCSS/Fundo.jpg);
  background-repeat: repeat-x;
  border: solid #000000 2px;}

.alink a{
  font-size: x-large;
  font-family: Comic Sans MS;
  color: #000000;
  text-decoration: none;}

.alink a:hover{
  background-image: url(http://i733.photobucket.com/albums/ww337/Solitaro37/MenuCSS/Fundoletras.jpg);
  background-repeat: repeat-x;
  color: #FFFFFF;
  border: solid 2px #000000;}

  .alink a:active{
    background-image: url(http://i733.photobucket.com/albums/ww337/Solitaro37/MenuCSS/Untitled-4.png);
    background-repeat: repeat-x;}
</style>

[PunkeCas ®]

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]

[PunkeCas ®]

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]

[PunkeCas ®]

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]

[PunkeCas ®]

Parte css

Código: [Seleccione]

Parte html

Código: [Seleccione]