MENU DROP DOWN FLIP.

Live Preview.
O código não foi feito por nós, somente adaptado e passado para o tutorial.
Feito por Pamella.
Dê like e credite, caso lhe seja útil.

Cole esse código no seu CSS.

/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 20px auto;
background: #COR_TITULO; /* onde está navigation no preview */
position: relative;
z-index: 100;
} .navigation, .navigation a.main { border-radius: 4px;
-webkit-border-radius: 4px; -moz-border-radius: 4px;
} .navigation:hover, .navigation:hover a.main { border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0;
} .navigation a.main {
display: block;
height: 40px;
font: bold 15px/40px FONTE, sans-serif;
text-align: center;
text-decoration: none;color: #COR_TITULO; /* onde está navigation no preview */
-webkit-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; position: relative;
z-index: 100;
} .navigation:hover a.main {
color: #COR_TITULO_HOVER;/* onde está navigation no preview */ background: #COR_FUNDO_HOVER;
/* onde está navigation no preview */
} .navigation li {
width: LARGURApx;
height: ALTURApx; background: #COR_FUNDO; font: normal 12px/40px FONTE, sans-serif !important;
color: #COR_LETRA; text-align: center;
margin: 0; -webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;

-webkit-transform: perspective(350px) rotateX(-90deg);

-o-transform: perspective(350px) rotateX(-90deg);

transform: perspective(350px) rotateX(-90deg);

box-shadow: 0px 2px 10px rgba(0,0,0,0.05);

-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);

-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
} .navigation li:nth-child(even) { background: #COR_FUNDO_1; } .navigation li:nth-child(odd) { background: #COR_FUNDO_2; } .navigation li.n1 {

-webkit-transition: 0.2s linear 0.8s;

-o-transition: 0.2s linear 0.8s;

transition: 0.2s linear 0.8s;
} .navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;

-o-transition: 0.2s linear 0.6s;

transition: 0.2s linear 0.6s;
} .navigation li.n3 {

-webkit-transition: 0.2s linear 0.4s;

-o-transition: 0.2s linear 0.4s;

transition: 0.2s linear 0.4s;
} .navigation li.n4 {
-webkit-transition:0.2s linear 0.2s;

-o-transition:0.2s linear 0.2s;
transition:0.2s linear 0.2s;
} .navigation li.n5 { border-radius: 0px 0px 4px 4px;

-webkit-transition: 0.2s linear 0s;

-o-transition: 0.2s linear 0s;

transition: 0.2s linear 0s;
} .navigation:hover li {

-webkit-transform: perspective(350px) rotateX(0deg);

-o-transform: perspective(350px) rotateX(0deg);

transform: perspective(350px) rotateX(0deg);

-webkit-transition:0.2s linear 0s; -o-transition:0.2s linear 0s;

transition:0.2s linear 0s;
} .navigation:hover .n2 {
-webkit-transition-delay: 0.2s;

-o-transition-delay: 0.2s;

transition-delay: 0.2s;
} .navigation:hover .n3 {
-webkit-transition-delay: 0.4s;

-o-transition-delay: 0.4s;

transition-delay: 0.4s;
} .navigation:hover .n4 {
transition-delay: 0.6s;

-o-transition-delay: 0.6s;

transition-delay: 0.6s;
} .navigation:hover .n5 {
-webkit-transition-delay: 0.8s;

-o-transition-delay: 0.8s;

transition-delay: 0.8s; }

Ajuste onde foi indicado.

Cole esse código onde quer que o menu apareça.

<ul class="navigation">
  
<a class="main" href="#url">Navigation</a>
  
<li class="n1"><a href="#">item #1</a></li>
 /* LEMBRE DE COLOCAR OS LINKS EM A HREF="LINK AQUI" */
<li class="n2"><a href="#">item #2</a></li>

<li class="n3"><a href="#">item #3</a></li>
 
<li class="n4"><a href="#">item #4</a></li>
 
<li class="n5"><a href="#">item #5</a></li>
</ul>

Créditos e likes são bem vindos.
Dúvidas? Passe em nossa askbox.

http://bombasticdesign.tumblr.com/post/78484963615

MENU FLIP.

Live Preview.
O código não foi feito por nós, somente adaptado e passado para o tutorial.
Feito por Pamella.
Dê like e credite, caso lhe seja útil.

Cole esse código no seu CSS,

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

@-webkit-keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}

@-moz-keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}

@-o-keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}

@keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}


ul {
  position:absolute;
  left:0;
  right:0;
  margin:50px auto;
  padding:0;
  
  width:200px;
  height:220px;
  list-style:none;
  -webkit-perspective:1000;
  -moz-perspective:1000;
  -o-perspective:1000;
  perspective:1000;
}

li {
  margin:2px 0;
  padding:0;
}

li a {
  display:block;
  height:18px;
  width:20px;
  background:#COR_MENU_FUNDO;
  color:#COR_LETRA;
  padding:8px 6px;
  text-decoration:none;
  text-align:center;
}
.menu {
  opacity:1;
  -webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
  -o-transform:rotateY(0deg);
  transform:rotateY(0deg);
  -webkit-transition:.3s;
  -moz-transition:.3s;
  -o-transition:.3s;
  transition:.3s;
}
li span {
  width:154px;
  float:left;
  text-align:center;
  background:#COR_MENU_FUNDO;
  color:#COR_LETRA;
  margin:-34px 34px;
  padding:8px 6px;
  transform-origin:0%;
  opacity:0;
  -webkit-transform:rotateY(95deg);
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
  -webkit-animation: flip 2s;
  -moz-animation: flip 2s;
  -o-animation: flip 2s;
  animation: flip 2s;
}

span[class='menu']{-webkit-animation:none;}
li:nth-child(2) span {
  -webkit-animation-delay:.5s;
  -moz-animation-delay:.5s;
  -o-animation-delay:.5s;
  animation-delay:.5s;}
li:nth-child(3) span {
  -webkit-animation-delay:.4s;
  -moz-animation-delay:.4s;
  -o-animation-delay:.4s;
  animation-delay:.4s;}
li:nth-child(4) span {
  -webkit-animation-delay:.3s;
  -moz-animation-delay:.3s;
  -o-animation-delay:.3s;
  animation-delay:.3s;}
li:nth-child(5) span {
  -webkit-animation-delay:.2s;
  -moz-animation-delay:.2s;
  -o-animation-delay:.2s;
  animation-delay:.2s;}
li:nth-child(6) span {
  -webkit-animation-delay:.1s;
  -moz-animation-delay:.1s;
  -o-animation-delay:.1s;
  animation-delay:.1s;}

li a:hover ~ span {
  opacity:1;
  -webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
  -o-transform:rotateY(0deg);
  transform:rotateY(0deg);
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  transition:.5s;

} adapte as cores nas áreas indicadas. Sugiro que não se mexa em mais nada, porém fica a sua escolha. As cores são basicamente as das letras e do fundo do menu.

Agora cole esse código onde você quer que o menu apareça arrumando os links e seus respectivos títulos nas áreas indicadas.

 <ul>
        <li>
            <a class="entypo-menu" href="#"></a> <span class="menu">Menu</span>
        </li>

        <li>
            <a class="entypo-star" href="LINK_1"></a> <span>NOME_LINK_1</span>
        </li>

        <li>
            <a class="entypo-newspaper" href="LINK_2"></a> <span>NOME_LINK_2</span>
        </li>

        <li>
            <a class="entypo-location" href="LINK_3"></a> <span>NOME_LINK_3</span>
        </li>

        <li>
            <a class="entypo-link" href="LINK_4"></a> <span>NOME_LINK_4</span>
        </li>

        <li>
            <a class="entypo-help-circled" href="LINK_5"></a> <span>NOME_LINK_5</span>
        </li>
    </ul>

Pronto, está feito! Espero que gostem.

Deem like e credite, por favor.

Menu de coração

Não é bem um menu, mas é quando voce passa o mouse sobre uma linha, ou seja lá o que for, e ele muda o coração ao lado (ou a imagem que estiver). VISUALIZE AQUI.

Cole este código no seu CSS.

/** MENU DE CORAÇÃO --- ADAPTADO POR SECRET-DIALOGUES.TUMBLR.COM (ORIGINAL HAVINGTHEMES.TUMBLR.COM) **/

.heart {background: url("http://www.hellostar.org/wp-admin/images/q1.gif") no-repeat scroll left center transparent; border-bottom: 1px solid #eee; display: block;line-height: 17px;margin-bottom: 
0;padding-left: 10px;    text-indent: 5px;vertical-align: middle; -webkit-transition-duration: .40s;}

.heart:hover {background: url("http://www.hellostar.org/wp-admin/images/q2.gif") no-repeat scroll left center #COR DO FUNDO AO PASSAR O MOUSE;display: block;line-height: 17px;margin-bottom: 0;padding-left: 10px; text-indent: 5px;vertical-align: middle; }

E deixe desta forma onde quiser colocar o menu de coração:

<div class="heart">FRASE DESEJADA</div>
<div class="heart">FRASE DESEJADA</div>

É importante que depois do </div> NÃO coloque <br> ou <p> (enter) porque se não vai ficar com espaço extra, não há necessidade.

Se usar credite! Gostou? Dê Like!

Por: Pamella

Adaptação de: Having Themes

MENU - BLACK LIST

Visualize aqui : live preview
Se usar ou se algo lhe foi útil por favor, credite

Cole isso na Css:

#menu {float:left;width:100px;margin-top:120px;position:fixed;margin-left:190px}
.menu {width:100px;box-shadow:0px 0px 5px  #ddd;margin:0px 0px 5px 0px;
padding:2px 5px 2px 5px;font-family:consolas;text-transform:uppercase;
border:2px solid #fff;letter-spacing:1px;background-color:#000;color:#fff;width:90px;border-radius:5px;-moz-border-radius:5px;-webkit-transition: opacity 0.7s linear;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;}
.menu:hover {margin-left:25px;color:#fff;border:2px solid #333;}

Depois cole isso aonde quer que apareça, basicamente depois de </style>:

<div id="menu">

<a href="/"><div class="menu"><img width="11px" src="http://media.tumblr.com/tumblr_m22ynuLQFe1qdrzjs.png"/> link 1</div></a>

<a href="/"><div class="menu"><img width="11px" src="http://media.tumblr.com/tumblr_m22yq0riaS1qdrzjs.png"/> link 2</div></a>

<a href="/"><div class="menu"><img width="11px" src="http://media.tumblr.com/tumblr_m2v75gvQD41r5r7s9.png"/> link 3</div></a>

<a href="/"><div class="menu"><img width="11px" src="http://media.tumblr.com/tumblr_m2v75gvQD41r5r7s9.png"/> link 5</div></a>

<a href="/"><div class="menu"><img width="11px" src="http://media.tumblr.com/tumblr_m2v75gvQD41r5r7s9.png"/> link 6</div></a>

<a href="/"><div class="menu"><img width="11px" src="http://media.tumblr.com/tumblr_m2v75gvQD41r5r7s9.png"/> link 7</div></a>

<a href="/"><div class="menu"><img width="11px" src="http://media.tumblr.com/tumblr_m2v75gvQD41r5r7s9.png"/> link 8</div></a>

<a href="/"><div class="menu"><img width="11px" src="http://media.tumblr.com/tumblr_m2v75gvQD41r5r7s9.png"/> link 9</div></a>

<a href="/"><div class="menu"><img width="11px" src="http://media.tumblr.com/tumblr_m2v75gvQD41r5r7s9.png"/> link 10</div></a>

</div>

Se quiser pode mudar as cores e fontes, mais se você não souber mexer com css e html, lhe aconselho a não mudar nada, qualquer duvida nos pergunta aqui na ask!

creds: gyapo

MENU RIBBON.

Live Preview.
O código não foi feito por nós, somente adaptado e passado para o tutorial.
Feito por Pamella.
Dê like e credite, caso lhe seja útil.

Cole esse código no seu CSS ajustando as áreas indicadas.

.ribbon {
display:inline-block;

}



   
.ribbon:after, .ribbon:before {
 
margin-top:0.5em;
content: "";
 
float:left;

border:1.5em solid #COR_FUNDO_NORMAL;

}


.ribbon:after {
border-right-color:transparent;
}

.ribbon:before {
border-left-color:transparent;
}

 

.ribbon a:link, .ribbon a:visited {color:#COR_LETRA;

text-decoration:none;

font-family:FONTE;
float:left;

height:3.5em;
 /** ISSO É A ALTURA, VC PODE ALTERAR PARA UM VALOR DESEJADO **/
overflow:hidden;

}



.ribbon span {

background:#COR_FUNDO;

display:inline-block;

line-height:3em;

padding:0 1em;

margin-top:0.5em;

position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */

-moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */

-o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */

transition: background-color 0.2s, margin-top 0.2s;

}

.ribbon a:hover span {

background:#COR_FUNDO_HOVER;

margin-top:0;

}



.ribbon span:before {

content: "";

position:absolute;

top:3em;

left:0;

border-right:0.5em solid #COR_SOMBRINHA_HOVER;
border-bottom:0.5em solid #COR_FUNDO;

}




.ribbon span:after {
content: "";

position:absolute;

top:3em;

right:0;

border-left:0.5em solid #COR_SOMBRINHA_HOVER;;

border-bottom:0.5em solid #COR_FUNDO;

}

Agora cole esse código onde quer que o menu apareça, lembre-se de colocar seus links.

<div class="ribbon">
<a href="LINK_1"><span>TITULO_MENU_1</span></a>
<a href="LINK_2"><span>TITULO_MENU_2</span></a>
<a href="LINK_3"><span>TITULO_MENU_3</span></a>
<a href="LINK_4"><span>TITULO_MENU_4</span></a>
</div>

Espero que gostem, likes e créditos são bem vindos ^^

MENU (TÓPICOS) SHADOW.

Visualize aqui.

Cole este código no seu CSS ajustando-o.

/** MENU (TÓPICOS) SHADOW - POR BOMBASTIC DESIGN**/

.tpc {
background: #COR DO FUNDO 1;
text-align:left;
font-family: FONTE;
font-size: TAMANHO DA FONTEpx;
margin: 1px;
color: #COR DA FONTE; 
display: block;
border-left: #COR DA BORDA solid 4px;
padding:4px;
-moz-transition: all 0.4s ease-out; 
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;}

.tpc:hover {
-webkit-box-shadow: inset 550px 0 0px 0 #COR DA BORDA; /** A MESMA COR Q VC COLOCOU A CIMA **/
-moz-box-shadow: inset 550px 0 0px 0 #COR DA BORDA;
box-shadow: inset 550px 0 0px 0 #COR DA BORDA;
color: #COR DA LETRA HOVER ;}

Agora basta colocar este código onde deseja que o “menu” apareça:

<div class="tpc">CONTEÚDO DO MENU</div>

Prontinho! Gostou? Dê like! Usou ou repassou? Credite.

Por: Pamella.

21/04/2014

Menus Bombastic Design

MENU DROP DOWN FLIP.

MENU FLIP.

MENU - BLACK LIST

MENU RIBBON.

MENU (TÓPICOS) SHADOW.

0 comentários:

Pesquisar este blog

Menu

Visite Nossos Especiais

Deixe sua Mensagem

Status do Blog

Seguidores

Ask.fm

Contact us

About

Fan Pages Parceiras

Top Parceiros

Aparatações

Equipe de Colaboradores

About

Posts

Recent Comments

Materiais

Edições

Outros

21/04/2014

Menus Bombastic Design

MENU DROP DOWN FLIP.

MENU FLIP.

MENU - BLACK LIST

MENU RIBBON.

MENU (TÓPICOS) SHADOW.

Related Posts:

0 comentários:

Pesquisar este blog

Menu

Visite Nossos Especiais

Deixe sua Mensagem

Status do Blog

Seguidores

Ask.fm

Contact us

About

Fan Pages Parceiras

Top Parceiros

Aparatações

Equipe de Colaboradores

About

Posts

Recent Comments

Materiais

Edições

Outros