Image Map

12.1.13

Menu Roll

Muito obrigada pelos 72 seguidores! Minha próxima meta é chegar nos 100.

Boa Tarde! 

Hoje resolvi passar pra vocês o tutorial de Menu Roll, já usei ele em um layout da Taylor Swift.
Peguei este tutorial em um tumblr, mas não lembro qual. Se for seu me avise que eu creditarei.
Tenham uma prévia dele aqui

Primeiro iremos instalar a fonte no blog.

Procure por <head> e acima dele cole o seguinte:

<link href='http://fonts.googleapis.com/css?family=Jacques+Francois+Shadow' rel='stylesheet' type='text/css'/>

Agora iremos, instalar o menu.
Procure por ]]></b:skin> e acima dele cole o seguinte:

.menuroll {
     background: #ff4d4d;
     width: 40px;
     height: 40px;
     padding: 5px;
     -webkit-border-radius: 60px;
     -moz-border-radius: 60px;
     border-radius: 60px;
     -webkit-transition-duration: .90s;
     -webkit-box-shadow: 0px 0px 4px #000;
     -moz-box-shadow: 0px 0px 4px #000;
     box-shadow: 0px 0px 4px #000;
     overflow: hidden;
     margin-bottom: 5px;}
.menuroll:hover {
     background: #ff4d4d;
     width: 250px;
     height: 40px;
     padding: 5px;
     -webkit-border-radius: 60px;
     -moz-border-radius: 60px;
     border-radius: 60px;
     -webkit-transition-duration: .90s;}
.rollimg {
     width: 40px;
     height: 40px;
     float: right;
     -webkit-border-radius: 60px;
     -moz-border-radius: 60px;
     border-radius: 60px;
     -webkit-transition-duration: .90s;
     z-index: 100;}
.menuroll:hover .rollimg  {
     width: 40px;
     height: 40px;
     float: right;
     -webkit-border-radius: 60px;
     -moz-border-radius: 60px;
     border-radius: 60px;
     -webkit-transition-duration: .90s;
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     -webkit-box-shadow: 0px 0px 4px #000;
     -moz-box-shadow: 0px 0px 4px #000;
     box-shadow: -2px 0px 9px #000;}
.titleroll {
     width: 300px;
     color: #fff;
     font-size: 20px;
     font-family: Jacques Francois Shadow;

     z-index: 50;
     margin-top: 5px;
     margin-bottom: -31px;
     -webkit-transition-duration: .90s;
     opacity:0;
     -moz-opacity: 0;
     filter: alpha(opacity=0);
     text-shadow:0px 0px 5px #000000;}
.menuroll:hover .titleroll  {
     text-shadow:0px 0px 2px #000000;
     margin-left: 5px;
     -webkit-transition-duration: .90s;
     opacity: 1;
     -moz-opacity: 1;
     filter: alpha(opacity=100);}


Entendendo os códigos.
 background: #ff4d4d; É responsável pela cor do menu.
O código é encontrado duas vezes, na segunda, ele é responsável pela cor do menu em hover (quando o mouse está em cima). Se preferir mude a cor.

  color: #fff; Este é responsável pela cor do título da página.

     font-size: 20px; É responsável pelo tamanho da fonte

     font-family: Jacques Francois Shadow; É o nome da fonte que será utilizada. 

text-shadow:0px 0px 5px #000000;} É a sombra do texto e sua cor.

Utilizando o menu.

Abra um gadget de JavaScript e cole:

<a href='LINK'>
  <div class="menuroll">
    <div class="titleroll">NOME DO LINK</div>
    <img src="URL DA IMAGEM" class="rollimg">
  </div>
</a>
<a href='LINK'>
  <div class="menuroll">
    <div class="titleroll">NOME DO LINK</div>
    <img src="URL DA IMAGEM" class="rollimg">
  </div>
</a>
<a href='LINK'>
  <div class="menuroll">
    <div class="titleroll">NOME DO LINK</div>
    <img src="URL DA IMAGEM" class="rollimg">
  </div>
</a>
Prontinho! Espero que tenham gostado. Beijos :*

5 comentários: