03 dezembro 2015

Menu Borders

| |
Novamente, a pedido de um leitor, resolvi postar um menu que deixei "guardado" no blog de testes já faz um tempo. Na verdade, são três menus. Espero que gostem de todos eles <3 (#1 - #2 - #3)
1. Modelo - ]]><

#1
#cima-isa {

margin-top:0px; /* Move para cima ou baixo */
margin-left: 0px;  /* Move para os lado */
position:absolute;
}

.menu1-isa {
width: 87px; /* Tamanho do menu */
background: none;
padding: 8px;
padding-top: 30px;
padding-bottom: 30px;
text-transform: uppercase;
text-align: center;
display: inline-block;
margin:1px;
border-top: transparent 2px solid;
border-bottom: transparent 2px solid;
-webkit-transition-duration: .30s;
-moz-transition-duration: .30s;
-o-transition-duration: .30s;}

.menu1-isa a {
color: black; /* Cor da fonte */
font-size: 20px; /* Tamanho da fonte */
font-family: lora; /* Nome da fonte */
text-decoration: none;}

.menu1-isa:hover {
border-top: black 2px solid; /* Cor, tamanho e tipo de linha */
border-bottom: black 2px solid; /* Cor, tamanho e tipo de linha */
padding-top: 10px;
padding-bottom: 10px;
-webkit-transition-duration: .30s;
-moz-transition-duration: .30s;
-o-transition-duration: .30s;}

#2
#cimaa-isa {
margin-top:0px; /* Move para cima ou baixo */
margin-left: 0px;  /* Move para os lado */
position:absolute;
}

.menu2-isa {
width: 87px; /* Tamanho do menu */
background: none;
padding: 8px;
padding-top: 30px;
padding-bottom: 30px;
text-transform: uppercase;
text-align: center;
display: inline-block;
margin:1px;
border-bottom: transparent 2px solid;
-webkit-transition-duration: .30s;
-moz-transition-duration: .30s;
-o-transition-duration: .30s;}

.menu2-isa a {
color: black; /* Cor da fonte */
font-size: 20px; /* Tamanho da fonte */
font-family: lora; /* Nome da fonte */
text-decoration: none;}

.menu2-isa:hover {
border-bottom: black 2px solid; /* Cor, tamanho e tipo de linha */
padding-top: 10px;
padding-bottom: 10px;
-webkit-transition-duration: .30s;
-moz-transition-duration: .30s;
-o-transition-duration: .30s;}

#3
#cimaa-isaa {
margin-top:0px; /* Move para cima ou baixo */
margin-left: 0px;  /* Move para os lado */
position:absolute;
}

.menu3-isa {
width: 87px; /* Tamanho do menu */
background: none;
padding: 8px;
padding-top: 30px;
padding-bottom: 30px;
text-transform: uppercase;
text-align: center;
display: inline-block;
margin:1px;
border-bottom: transparent 2px solid;
-webkit-transition-duration: .30s;
-moz-transition-duration: .30s;
-o-transition-duration: .30s;}

.menu3-isa a {
color: black; /* Cor da fonte */
font-size: 20px; /* Tamanho da fonte */
font-family: lora; /* Nome da fonte */
text-decoration: none;}

.menu3-isa:hover {
border-top: black 2px solid; /* Cor, tamanho e tipo de linha */
padding-top: 10px;
padding-bottom: 10px;
-webkit-transition-duration: .30s;
-moz-transition-duration: .30s;
-o-transition-duration: .30s;}


2. Layout - Add Gadgets - HTMl/JavaScript

#1
<center><div id="cima-isa">
<div class="menu1-isa"><a href="">feito</a></div>
<div class="menu1-isa"><a href="">por</a></div>
<div class="menu1-isa"><a href="">isa</a></div>
<div class="menu1-isa"><a href="">souza.</a></div>
<div class="menu1-isa"><a href="">credite!</a></div>
</div></center

#2
<div id="cimaa-isa">
<div class="menu2-isa"><a href="">feito</a></div>
<div class="menu2-isa"><a href="">por</a></div>
<div class="menu2-isa"><a href="">isa</a></div>
<div class="menu2-isa"><a href="">souza.</a></div>
<div class="menu2-isa"><a href="">credite!</a></div>
</div></center>

#3
<div id="cimaa-isaa">
<div class="menu3-isa"><a href="">feito</a></div>
<div class="menu3-isa"><a href="">por</a></div>
<div class="menu3-isa"><a href="">isa</a></div>
<div class="menu3-isa"><a href="">souza.</a></div>
<div class="menu3-isa"><a href="">credite!</a></div>
</div></center>

3 comentários:

  1. Gostei dos menus, são mais para blogs com cara de site, e talvez para outros tipos de layout. Talvez eu use, vou salvar nos favoritos!

    Snack Cheese!! | Clique aqui, e vá ao encontro do SC! ♥

    ResponderExcluir
  2. O que dizer, eu não gostei....! Eu adorei esses menus :3 super fofos! Desculpe mais falar de coisas belas me deixa com poucas palavras!
    Beijos!

    http://cloundforhtml.blogspot.com.br/

    ResponderExcluir
  3. Caracaa, ameei os menus, são tão lindinhos, ameei seu blog, de verdade <3, da uma passadinha lá no meu!
    www.mathwillie.com

    ResponderExcluir

»