Menu widget de vôo 3D para Blogger

Menu widget de vôo 3D para Blogger
Olá e bem-vindo ao Mult-focos. Vamos ver neste post mais um lindo menu widget de vôo 3D para Blogger. Este menu de fácil adição em seu blog, tem nada menus que 40 links para atender blogs que precisam de um menu que suporta muitos links.
             Encontre outros modelos de Menus clicando AQUI 

Veja um demo clicando no botão abaixo ou em Result

DEMO

Como adicionar em seu blog.

  •  Ir para o painel do blogger->layout Clique em Adicionar um Gadget. 
  •  Na janela Adicionar um gadget->HTML/JavaScript. 
  •  Copie o código HTML abaixo e cole-o dentro da caixa de conteúdo. 
  •  Salvar o gadget. Arraste o gadget e reposicione-o onde você quer mostrá-lo. 
  •  Clique no botão Salve (canto superior direito). 
Configurações

  • No código HTML onde esta "AQUI URL" você deve substituir pela URL correspondente ao link desejado. 
  • Onde esta LINK 1, LINK 2 e assim sucessivamente é onde vai o nome do link correspondente a URL colocada. 
  • O mesmo é feito com os SUB LINKs. 
 Isto é tudo.

<style type="text/css">
.menuHolder {
margin:25px 0 100px 0;
text-align:center;
position:relative;
height:40px;
z-index:20;
background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {
display:inline-block;
display:inline;
}
.menuHolder ul.nav {
padding:0;
margin:0;
list-style:none;
display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {
float:left;
display:block;
padding:0 4px;
}
.menuHolder ul.nav > li {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.menuHolder ul.nav li a.top-a {
display:block;
text-decoration:none;
margin-top:4px;
float:left;
height:36px;
}

.menuHolder ul.nav li a.top-a b {
display:block;
padding:0 20px;
font:normal 14px/30px arial, sans-serif;
color:#fff;
}
.menuHolder ul.nav li:hover a.top-a {
background:#09c;
border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {
position:absolute;
top:40px; left:4px;
background:#09c;
padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

.menuHolder ul.nav div.left {
left:auto;
right:4px;
}
.menuHolder ul.nav div ul {
padding:10px 0;
list-style:none;
width:140px;
margin:10px 5px 0 5px;
float:left;
display:inline;
text-align:left;
background:#fff;
border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {
margin-left:10px;
}
.menuHolder ul.nav div ul.colRight {
margin-right:10px;
}
.menuHolder ul.nav div ul.colSingle {
margin-left:10px;
margin-right:10px;
}
.menuHolder ul.nav div ul li {
float:left;
border-bottom:1px dotted #09c;
margin:0 5px 0 5px;
display:inline;
}
.menuHolder ul.nav div ul li:last-child {
border:0;
}
.menuHolder ul.nav div ul li a {
display:block;
width:105px;
text-decoration:none;
font:13px/16px arial, sans-serif;
color:#069;
margin:0;
padding:4px 0 4px 15px;
background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;
}
.menuHolder ul.nav div ul li a:hover {
color:#09c;
background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;
}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>

<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="AQUI URL"><b>Página ínicial</b></a></li>
<li><a class="top-a" href="AQUI URL"><b>LINK 1</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="AQUI URL">SUB LINK 1</a></li>
<li><a href="AQUI URL">SUB LINK 2</a></li>
<li><a href="AQUI URL">SUB LINK 3</a></li>
<li><a href="AQUI URL">SUB LINK 4</a></li>
<li><a href="AQUI URL">SUB LINK 5</a></li>
</ul>
<ul class="col">
<li><a href="AQUI URL">SUB LINK 6</a></li>
<li><a href="AQUI URL">SUB LINK 7</a></li>
<li><a href="AQUI URL">SUB LINK 8</a></li>
<li><a href="AQUI URL">SUB LINK 9</a></li>
</ul>
<ul class="colRight">
<li><a href="AQUI URL">SUB LINK 10</a></li>
<li><a href="AQUI URL">SUB LINK 11</a></li>
<li><a href="AQUI URL">SUB LINK 12</a></li>
<li><a href="AQUI URL">SUB LINK 13</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="AQUI URL"><b>LINK 2 </b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="AQUI URL">SUB LINK 1</a></li>
<li><a href="AQUI URL">SUB LINK 2</a></li>
<li><a href="AQUI URL">SUB LINK 3</a></li>
<li><a href="AQUI URL">SUB LINK 4</a></li>
<li><a href="AQUI URL">SUB LINK 5</a></li>
</ul>
<ul class="colRight">
<li><a href="AQUI URL">SUB LINK 6</a></li>
<li><a href="AQUI URL">SUB LINK 7</a></li>
<li><a href="AQUI URL">SUB LINK 8</a></li>
<li><a href="AQUI URL">SUB LINK 9</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="AQUI URL"><b>LINK 3</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="AQUI URL">SUB LINK 1</a></li>
<li><a href="AQUI URL">SUB LINK 2</a></li>
<li><a href="AQUI URL">SUB LINK 3</a></li>
<li><a href="AQUI URL">SUB LINK 4</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="AQUI URL"><b>LINK 4</b></a></li>
<li><a class="top-a" href="AQUI URL"><b>LINK 5</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="AQUI URL">SUB LINK 1</a></li>
<li><a href="AQUI URL">SUB LINK 2</a></li>
<li><a href="AQUI URL">SUB LINK 3</a></li>
<li><a href="AQUI URL">SUB LINK 4</a></li>
</ul>
<ul class="colRight">
<li><a href="AQUI URL">SUB LINK 5</a></li>
<li><a href="AQUI URL">SUB LINK 6</a></li>
<li><a href="AQUI URL">SUB LINK 7</a></li>
<li><a href="AQUI URL">SUB LINK 8</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div>

See the Pen Menu widget de vôo 3D para Blogger by Mairink (@Oemes) on CodePen.



Postado por Mairink Oemes

0 comentários:

Postar um comentário

Todos comentários são lidos e moderados previamente.
São publicados apenas aqueles que respeitarem as regras abaixo:
-Ter relação com o assunto do post.
-Não conter propagandas de outro site ou blog.
-Não incluir links no conteúdo do comentário.
-Se quiser deixar sua URL, comente usando a opção OpenID;
Obrigado(a) por comentar!

free website hit counter