25.1.16

Dropdown raro


Há quanto tempo não postava aqui, não era? Bem, creio que irá compensar, pois embora não vá conseguir deixar muitos tutoriais prontos hoje, já comecei a adiantar várias deles, a sua maioria relativa a menus e afins. Anyway, o que trago hoje é um menu dropdown - daqueles em que cada aba contém vários sublinks - extremamente peculiar e distinto. Fica colocado no topo do blog, como se fosse parte da navbar, e tem imensos hovers, para além de que as sub-abas surgem com um desalinhamento propositado. Já vão ver na prévia. Eu achei a base do tutorial [aqui: www] mas tive de modificar muita coisa e descobrir por conta própria onde colocar os códigos, então agradeceria que me creditassem. E de qualquer forma, achei este menu magnífico para quem tem muitas páginas para organizar mas gosta de economizar espaço.

Prévia: www
Tutorial:

Procure por </head> e cole abaixo:
<style> /* Menu Dropdown */
.cf:before,.cf:after {content: &quot; &quot;;display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}
.menu,.submenu {margin: 0px;padding: 0px;list-style: none;}
.menu { /*tudo o que diz "menu" refere-se à parte da navbar que está sempre visível*/
margin-left: 150px;
width: 800px;
}
.menu &gt; li {
width: 200px;
height: 21px;
margin-top: -5px;
background: #5b6a7a;
float: left;
position: relative;
transform: skewX(25deg);
text-align: center;
}
.menu a { /*fonte do menu visível*/
display: block;
color: #fff;
text-shadow: 1px 1px 1px#3c4b59!important;
text-decoration: none;
font-family: Delius Swash Caps;
font-size: 14px;
margin-bottom: -2px;
}
.menu a:hover {
text-shadow: 1px 1px 1px #fff!important;
color: #a68374;
}
.menu li:hover {background: #855d4e;}
.menu &gt; li &gt; a {transform: skewX(-25deg);padding: 5px 15px 5px 30px;}
.submenu { /*O que diz "submenu" refere-se à parte pendente, que só é mostrada em hover*/
position: absolute;
width: 100px;
transform: skewX(-25deg);
transform-origin: left top;
}
.submenu li {
background-color: #566575;
position: relative;
overflow: hidden;
}
.submenu &gt; li &gt; a {padding: 4px 4px 4px 60px;}
.submenu &gt; li::after {
content: &#39;&#39;;
position: absolute;
top: -125%;
height: 100%;
width: 100%;
box-shadow: 0 0 30px #2e3d4d;
}
  .submenu a {text-shadow: 1px 1px 1px #3c4b59!important;}
  .submenu a:hover {text-shadow: 1px 1px 1px #fff!important; color: #a68374;}
  .submenu &gt; li:nth-child(odd){transform: skewX(-25deg) translateX(0);}
  .submenu &gt; li:nth-child(odd) &gt; a {transform: skewX(25deg);}
  .submenu &gt; li:nth-child(odd)::after {right: -50%;transform: skewX(-25deg) rotate(3deg);}
  .submenu &gt; li:nth-child(even){transform: skewX(25deg) translateX(0);}
  .submenu &gt; li:nth-child(even) &gt; a {transform: skewX(-25deg);}
  .submenu &gt; li:nth-child(even)::after {left: -50%;transform: skewX(25deg) rotate(3deg);}
  .submenu,.submenu li {opacity: 0;visibility: hidden;}
  .submenu li {transition: .2s ease transform;}
  .menu &gt; li:hover .submenu,.menu &gt; li:hover .submenu li {opacity: 1;visibility: visible;}
  .menu &gt; li:hover .submenu li:nth-child(even){transform: skewX(25deg) translateX(15px);}
  .menu &gt; li:hover .submenu li:nth-child(odd){transform: skewX(-25deg) translateX(-15px);}
.bar_top { / * Fundo da barrinha do menu, navbar* /
width: 100%;
height: 28px;
background: #566575;
border-bottom: 4px solid #fff;
}
.bar_topd {
width: 900px;
margin: 0px auto;
}
  </style>

Agora vá a "Esquema", e adicione num gadget Html/Javascript o seguinte código:
<div style="width: 1365px; margin-right: -700px; margin-left: -95px; margin-top: -95px; position: fixed;">
<div class='bar_top'>
<div class='bar_topd'>
<ul class="menu cf">
<li>
<a title="TOOLTIP">NOME-PRINCIPAL</a>
<ul class="submenu">
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
</ul>
</li>
<li>
<a title="TOOLTIP">NOME-PRINCIPAL</a>
<ul class="submenu">
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
</ul>
</li>
<li>
<a title="TOOLTIP">NOME-PRINCIPAL</a>
<ul class="submenu">
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
</ul>
</li>
<li>
<a title="TOOLTIP">NOME-PRINCIPAL</a>
<ul class="submenu">
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
</ul>
</li>
</ul>
</div></div>
</div>

Pequena explicação: 
  • Mude os links assinalados pela barrinha "/" e as maiúsculas
  • Se não tiver tantas subclasses do menu, apague cada linha de <li> até </li>. Cuidado para não apagar mais nada.
Disse e repito, façam as modificações que quiserem quanto às cores e margens. Oh, podem ainda optar por mudar de fonte, mas caso queiram usar a que já aí está, caso não a tenham adicionada ao vosso HTML, procurem por <head> e abaixo colem:
<link href='http://fonts.googleapis.com/css?family=Delius+Swash+Caps' rel='stylesheet' type='text/css'/>

Jaa!

6 comentários:

  1. Não funcionou no meu blog. Tem que colar a dll pra rodar? Se funcionar, vou creditar com certeza! (Y)

    ResponderEliminar
  2. Não funcionou no meu blog. Tem que colar a dll pra rodar? Se funcionar, vou creditar com certeza! (Y)

    ResponderEliminar
  3. não funcionou no meu tbm, me ajuda. xoxo.

    ResponderEliminar
  4. O menu, quando eu desço a página, ele desce também só que por de trás da área de psot e sidebar, o que faço para que ele fica sobre elas?

    ResponderEliminar
    Respostas
    1. Olá, Ana, tudo bem? Estava com o mesmo problema no meu e resolvi colocando "z-index: 100;" (ignore as aspas) depois da parte que configura as cores e fontes do menu. Isso serve pra "erguer" qualquer elemento html e coloca-lo em primeiro plano. Se não der certo, aumento o valor de "100" para "200" ou qualquer outro numero, até ele ficar mais alto que o elemento que vc quer sobrepor. Espero que te ajude tb ;)

      Eliminar
    2. Obrigada pela ajuda, vou testar pra ver se da certo!

      Eliminar