Menu Shadow no Blog

Menu sempre é uma forma útil de organizar o blog. E trouxe esses menus do site Dany's Place ela personalizou  os menus com cores  diferentes escolha abaixo o código de acordo com o modelo desejado.

Home Tutorial Gifs Cabeçalhos Resenha


-------------------------------------------------------------------------------------
Após escolher o modelo desejado, copie o código e cole em 
HTML/Java Script e salve. 

Menu 1 Menu 2

<center>
  <style>
.menu8 a{
font-family: comic sans ms;
font-size: 13px;
padding:3px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align:center;
background-image: url('http://i111.photobucket.com/albums/n159/docedani/back003.png');
color: #528B8B; /*  */
width: 240px; /* */
border-right:10px solid #fff; /*  */
border-left:10px solid #48D1CC; /*  */
overflow: hidden;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
.menu8 a:hover{
box-shadow: inset 1000px 0 0px 0 #48D1CC;
color: #fff; /*  {HOVER} */
border-right:10px solid #48D1CC; /*  {HOVER} */
border-left:10px solid #000; /*  {HOVER} */
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
</style>
<div class="menu8">


<a href="Endereço do site"> Menu 1</a>
<a href="Endereço do site"> Menu 2</a>
<a href="Endereço do site"> Menu 3</a>
<a href="Endereço do site"> Menu 4</a>
<a href="Endereço do site"> Menu 5</a>
  </div></center>

-------------------------------------------------------------------------------------------------------------------



                                                                 

Menu 1 Menu 2

 <center>
  <style>
.menu7 a{
font-family: comic sans ms;
font-size: 13px;
padding:3px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align:center;
background-image: url('http://i111.photobucket.com/albums/n159/docedani/back05.png');
color: #9C9C9C; /*  */
width: 240px; /*  */
border-right:10px solid #fff; /* */
border-left:10px solid #DCDCDC; /*  */
overflow: hidden;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
.menu7 a:hover{
box-shadow: inset 1000px 0 0px 0 #DCDCDC;
color: #fff; /*  {HOVER} */
border-right:10px solid #DCDCDC; /* {HOVER} */
border-left:10px solid #000; /*{HOVER} */
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
</style>
<div class="menu7">


<a href="Endereço do site"> Menu 1</a>
<a href="Endereço do site"> Menu 2</a>
<a href="Endereço do site"> Menu 3</a>
<a href="Endereço do site"> Menu 4</a>
<a href="Endereço do site"> Menu 5</a>

  </div></center>

---------------------------------------------------------------------------------------------------------


                                                             

Menu 1 Menu 2

<center>
  <style>
.menu5 a{
font-family: comic sans ms;
font-size: 13px;
padding:3px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align:center;
background-image: url('http://i111.photobucket.com/albums/n159/docedani/backmenu/menu16.gif');
color: #104E8B; /* */
width: 240px; /*  */
border-right:10px solid #fff; /*  */
border-left:10px solid #00BFFF; /*  */
overflow: hidden;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
.menu5 a:hover{
box-shadow: inset 1000px 0 0px 0 #00BFFF;
color: #fff; /* {HOVER} */
border-right:10px solid #00BFFF; /* {HOVER} */
border-left:10px solid #000; /*  {HOVER} */
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
</style>
<div class="menu5">


<a href="Endereço do site"> Menu 1</a>
<a href="Endereço do site"> Menu 2</a>
<a href="Endereço do site"> Menu 3</a>
<a href="Endereço do site"> Menu 4</a>
<a href="Endereço do site"> Menu 5</a>

  </div></center>

---------------------------------------------------------------------------------------------------------------

                                                               

Menu 1 Menu 2

<center>
  <style>
.menu4 a{
font-family: comic sans ms;
font-size: 13px;
padding:3px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align:center;
background-image: url('http://i111.photobucket.com/albums/n159/docedani/esse2.gif');
color: #000; /*  */
width: 240px; /* */
border-right:10px solid #fff; /* */
border-left:10px solid #FF69B4; /*  */
overflow: hidden;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
.menu4 a:hover{
box-shadow: inset 1000px 0 0px 0 #FF69B4;
color: #fff; /* {HOVER} */
border-right:10px solid #FF69B4; /* {HOVER} */
border-left:10px solid #000; /*  {HOVER} */
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
</style>
<div class="menu4">


<a href="Endereço do site"> Menu 1</a>
<a href="Endereço do site"> Menu 2</a>
<a href="Endereço do site"> Menu 3</a>
<a href="Endereço do site"> Menu 4</a>
<a href="Endereço do site"> Menu 5</a>

  </div></center>

-----------------------------------------------------------------------------------------------------------

                                                           

Menu 1 Menu 2

 <center>
  <style>
.menu3 a{
font-family: comic sans ms;
font-size: 13px;
padding:3px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align:center;
background-image: url('http://i111.photobucket.com/albums/n159/docedani/backmenu/menu13.gif');
color: #fff; /*  */
width: 240px; /*  */
border-right:10px solid #fff; /* */
border-left:10px solid #ed146f; /*  */
overflow: hidden;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
.menu3 a:hover{
box-shadow: inset 1000px 0 0px 0 #ed146f;
color: #fff; /*  {HOVER} */
border-right:10px solid #ed146f; /* {HOVER} */
border-left:10px solid #000; /*  {HOVER} */
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
</style>
<div class="menu3">


<a href="Endereço do site"> Menu 1</a>
<a href="Endereço do site"> Menu 2</a>
<a href="Endereço do site"> Menu 3</a>
<a href="Endereço do site"> Menu 4</a>
<a href="Endereço do site"> Menu 5</a>

  </div></center>

--------------------------------------------------------------------------------------------------------

                                                       

Menu 1 Menu 2

 <center>
  <style>
.menu2 a{
font-family: comic sans ms;
font-size: 13px;
padding:3px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align:center;
background-image: url('http://i111.photobucket.com/albums/n159/docedani/backmenu/menu31.gif');
color: #8B3A62; /*  */
width: 240px; /*  */
border-right:10px solid #fff; /*  */
border-left:10px solid #FF69B4; /*  */
overflow: hidden;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
.menu2 a:hover{
box-shadow: inset 1000px 0 0px 0 #FF69B4;
color: #fff; /*  {HOVER} */
border-right:10px solid #FF69B4; /*  {HOVER} */
border-left:10px solid #000; /*  {HOVER} */
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
</style>
<div class="menu2">


<a href="Endereço do site"> Menu 1</a>
<a href="Endereço do site"> Menu 2</a>
<a href="Endereço do site"> Menu 3</a>
<a href="Endereço do site"> Menu 4</a>
<a href="Endereço do site"> Menu 5</a>

  </div></center>

---------------------------------------------------------------------------------------------------------------------

Menu 1 Menu 2

<center>
  <style>
.menu1 a{
font-family: comic sans ms;
font-size: 13px;
padding:3px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align:center;
background-image: url('http://i111.photobucket.com/albums/n159/docedani/backmenu/menu20.gif');
color: #8B4C39; /*  */
width: 240px; /*  */
border-right:10px solid #fff; /*  */
border-left:10px solid #EED8AE; /*  */
overflow: hidden;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
.menu1 a:hover{
box-shadow: inset 1000px 0 0px 0 #EED8AE;
color: #fff; /*  {HOVER} */
border-right:10px solid #EED8AE; /*  {HOVER} */
border-left:10px solid #000; /*  {HOVER} */
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
</style>
<div class="menu1">


<a href="Endereço do site"> Menu 1</a>
<a href="Endereço do site"> Menu 2</a>
<a href="Endereço do site"> Menu 3</a>
<a href="Endereço do site"> Menu 4</a>
<a href="Endereço do site"> Menu 5</a>

   </div></center>

-----------------------------------------------------------------------------------------------------------

Menu 1 Menu 2

<center>
  <style>
.menuSC a{
font-family: comic sans ms;
font-size: 13px;
padding:3px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align:right;
background-image: url('http://i111.photobucket.com/albums/n159/docedani/onestripe1_rosa.gif');
color: #00868B; /*  */
width: 240px; /*  */
border-right:10px solid #fff; /*  */
border-left:10px solid  #FFFACD; /*  */
overflow: hidden;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
.menuSC a:hover{
box-shadow: inset 1000px 0 0px 0 #FFFACD;
color: #FF1493; /*  {HOVER} */
border-right:10px solid #FFFACD; /*  {HOVER} */
border-left:10px solid #000; /*  {HOVER} */
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
</style>
<div class="menuSC">


<a href="Endereço do site"> Menu 1</a>
<a href="Endereço do site"> Menu 2</a>
<a href="Endereço do site"> Menu 3</a>
<a href="Endereço do site"> Menu 4</a>
<a href="Endereço do site"> Menu 5</a>

  </div></center>

-------------------------------------------------------------------------------------------------------------------

                                           

Menu 1 Menu 2

 <center>
  <style>
.menu9 a{
font-family: comic sans ms;
font-size: 13px;
padding:3px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align:center;
background:#EED5D2;
color: #8B7765; /*  */
width: 240px; /* */
border-right:10px solid #fff; /*  */
border-left:10px solid  #EED5D2; /* */
overflow: hidden;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
.menu9 a:hover{
text-align:right;
box-shadow: inset 1000px 0 0px 0 #CDB7B5;
color: #FFf; /* {HOVER} */
border-right:10px solid #CDB7B5; /* {HOVER} */
border-left:10px solid #000; /* {HOVER} */
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
</style>
<div class="menu9">


<a href="Endereço do site"> Menu 1</a>
<a href="Endereço do site"> Menu 2</a>
<a href="Endereço do site"> Menu 3</a>
<a href="Endereço do site"> Menu 4</a>
<a href="Endereço do site"> Menu 5</a>

  </div></center>

------------------------------------------------------------------------------------------------------------------

Menu 1 Menu 2

<center>
  <style>
.menu10 a{
font-family: comic sans ms;
font-size: 13px;
padding:3px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align:center;
background:#E0EEEE;
color: #68838B; /*  */
width: 240px; /*  */
border-right:10px solid #fff; /*  */
border-left:10px solid  #E0EEEE; /*  */
overflow: hidden;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
.menu10 a:hover{
text-align:right;
box-shadow: inset 1000px 0 0px 0 #C1CDCD;
color: #FFf; /*  {HOVER} */
border-right:10px solid #C1CDCD; /*  {HOVER} */
border-left:10px solid #000; /*  {HOVER} */
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
</style>
<div class="menu10">


<a href="Endereço do Site"> Menu 1</a>
<a href="Endereço do Site"> Menu 2</a>
<a href="Endereço do Site"> Menu 3</a>
<a href="Endereço do Site"> Menu 4</a>
<a href="Endereço do Site"> Menu 5</a>

  </div></center>

-------------------------------------------------------------------------------------------------------------------

Menu 1 Menu 2

<center>
 <style>
.menu11 a{
font-family: comic sans ms;
font-size: 13px;
padding:3px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align:center;
background:#FFE7BA;
color: #EE9572; /*  */
width: 240px; /*  */
border-right:10px solid #fff; /* */
border-left:10px solid #FFE7BA; /*  */
overflow: hidden;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
.menu11 a:hover{
text-align:right;
box-shadow: inset 1000px 0 0px 0 #EED8AE;
color: #FFf; /*  {HOVER} */
border-right:10px solid #EED8AE; /*  {HOVER} */
border-left:10px solid #000; /*  {HOVER} */
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
</style>
<div class="menu11">


<a href="Endereço do site"> Menu 1</a>
<a href="Endereço do site"> Menu 2</a>
<a href="Endereço do site"> Menu 3</a>
<a href="Endereço do site"> Menu 4</a>
<a href="Endereço do site"> Menu 5</a>

</div></center>

------------------------------------------------------------------------------------------------------------------

Menu 1 Menu 2

 <center>
 <style>
.menu12 a{
font-family: comic sans ms;
font-size: 13px;
padding:3px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align:center;
background:#FFF0F5;
color: #FF82AB; /*  */
width: 240px; /*  */
border-right:10px solid #fff; /*  */
border-left:10px solid #FFF0F5; /*  */
overflow: hidden;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
.menu12 a:hover{
text-align:right;
box-shadow: inset 1000px 0 0px 0 #FFB5C5;
color: #FFf; /* COLOR DE LETRA {HOVER} */
border-right:10px solid #FFB5C5; /*  {HOVER} */
border-left:10px solid #000; /*  {HOVER} */
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
</style>
<div class="menu12">


<a href="Endereço do site"> Menu 1</a>
<a href="Endereço do site"> Menu 2</a>
<a href="Endereço do site"> Menu 3</a>
<a href="Endereço do site"> Menu 4</a>
<a href="Endereço do site"> Menu 5</a>

</div></center>

-----------------------------------------------------------------------------------------------------------------

Menu 1 Menu 2

 <center>
  <style>
.menu13 a{
font-family: comic sans ms;
font-size: 13px;
padding:3px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align:center;
background:#C1FFC1;
color: #698B69; /*  */
width: 240px; /* */
border-right:10px solid #fff; /*  */
border-left:10px solid #C1FFC1; /*  */
overflow: hidden;
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
.menu13 a:hover{
text-align:right;
box-shadow: inset 1000px 0 0px 0 #9BCD9B;
color: #FFf; /*  {HOVER} */
border-right:10px solid #9BCD9B; /*  {HOVER} */
border-left:10px solid #000; /*  {HOVER} */
text-decoration: none; text-shadow: 0px 0px 0px #fff;
}
</style>
<div class="menu13">


<a href="Endereço do Site"> Menu 1</a>
<a href="Endereço do Site"> Menu 2</a>
<a href="Endereço do Site"> Menu 3</a>
<a href="Endereço do Site"> Menu 4</a>
<a href="Endereço do Site"> Menu 5</a>

  </div></center>