Veja um demo clicando no botão abaixo ou em Result
- 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).
- 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.
<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.
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!