quarta-feira, 26 de outubro de 2011

Menu horizontal em CSS3 embutido

imageDEMO

Querendo um menu de qualidade e com CSS3, então instale esse no seu blog. Este pequeno menu que parece entra no seu blog (efeito embutido) vai deixar seu blog mais profissional e ao mesmo tempo engradará seu publico.

O menu é todo acinzentado, com efeito hover amarelo, e possui a o seu redor, um belo efeito que da a impressão dele estar embutido em seu blog.

Para adicionar à sua página, acesse a guia “Modelo” do seu blog e clique na opção “Editar HTML”, após isso procure por:

]]></b:skin>

Acima dessa linha cole o código CSS abaixo:

nav  {
        display: block;
        width: 100%;
        overflow: hidden;
}

nav ul {
        margin: 80px 0 20px 0;
        padding: .7em;
        float: left;
        list-style: none;
        background: #444;
        background: rgba(0,0,0,.2);
        -moz-border-radius: .5em;
        -webkit-border-radius: .5em;
        border-radius: .5em;
        -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
        -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
        box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}

nav li {
        float:left;
}

nav a {
        float:left;
        padding: .8em 1.5em;
        text-decoration: none;
        color: #555;
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
        font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
        letter-spacing: 1px;
        text-transform: uppercase;
        border-width: 1px;
        border-style: solid;
        border-color: #fff #ccc #999 #eee;
        background: #c1c1c1;
        background: -moz-linear-gradient(#f5f5f5, #c1c1c1);
        background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));
        background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);
        background: -o-linear-gradient(#f5f5f5, #c1c1c1);
        background: -ms-linear-gradient(#f5f5f5, #c1c1c1);
        background: linear-gradient(#f5f5f5, #c1c1c1);
}

nav a:hover, nav a:focus {
        outline: 0;
        color: #fff;
        text-shadow: 0 1px 0 rgba(0,0,0,.2);
        background: #fac754;
        background: -moz-linear-gradient(#fac754, #f8ac00);
        background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00));
        background: -webkit-linear-gradient(#fac754, #f8ac00);
        background: -o-linear-gradient(#fac754, #f8ac00);
        background: -ms-linear-gradient(#fac754, #f8ac00);
        background: linear-gradient(#fac754, #f8ac00);
}

nav a:active {
        -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
        -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
        box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}

nav li:first-child a {
        border-left: 0;
        -moz-border-radius: 4px 0 0 4px;
        -webkit-border-radius: 4px 0 0 4px;
        border-radius: 4px 0 0 4px;
}

nav li:last-child a {
        border-right: 0;
        -moz-border-radius: 0 4px 4px 0;
        -webkit-border-radius: 0 4px 4px 0;
        border-radius: 0 4px 4px 0;
}

Feito isso, salve.

Agora acesse a guia “Layout” do seu blog e clique na opção “Adicionar um gadget” –> “HTML/Javascript”. Em seguida cole o código abaixo, faça as alterações conforme o que se pede (destacado de vermelho no código) e salve.

<nav>
    <ul> 
         <li><a href="LINK">ITEM</a></li>   
         <li><a href="LINK">ITEM</a></li>   
         <li><a href="LINK">ITEM</a></li>   
         <li><a href="LINK">ITEM</a></li>   
         <li><a href="LINK">ITEM</a></li>  
    </ul>
</nav>

Após isso, apenas mova o gadget para um lugar me melhor se adapte no seu layout.

Fonte: Red Team Design

Marcadores: , ,

16 Comentários:

Às 31 de outubro de 2011 22:22 , Blogger Marcellus disse...

legal como muda a cor?

 
Às 1 de novembro de 2011 08:22 , Blogger Códigos Blogger disse...

No código CSS desse menu existem atributos chamados ' background'. E seus valores determinam a cor ou a imagem de fundo de um determinado elemento. No caso desse menu, o valor de background é de uma cor em RGBa, mas você pode estar colocando uma com hexadecimal. Agora veja um exemplo de cor rgba e hexadecimal:

Cor RGBa - background: rgba(0,0,0,.2);
Cor HEXADECIMAL - background: #FF800

Sendo assim, pra trocar a cor do menu, é só mudar os valores de background no código (2º código do tutorial) ou até mesmo trocar os valores dos atributos que conterem cor hexadecimais ou RGBa.

Clique e veja uma lista de cores RGB e HEXADECIAML

 
Às 2 de novembro de 2011 02:50 , Blogger Equipe Rede Gamers disse...

CBlogger,so tenho que agradecer,graça a você sempre consiguo levar coisas novas pro meu blog,mas...
Tipo: Eu peguei um template ja feita,so que vou indo editando o HTML e assim modificando.
A pergunta é: Como eu tiro o menu que ja veio nessa template e coloca esse que você colocou ai na postagem no lugar do que ja tava??
Porque eu consigo colocar,mas ai fica embaixo do que ja estava la antes,e quero tirar o outro!
Por favor me ajude cara :/

 
Às 2 de novembro de 2011 21:09 , Blogger Códigos Blogger disse...

Vou tentar te ajudar, vamos ver se da certo. O seu blog tem dois menus, o cinza (topo) e o preto(em baixo da header). Vou tentar mostra como tirar este preto.

1. Entre no Editor HTML do seu blog.
2. Procure pelo trecho abaixo

<div id="navcontainer">
<ul id="nav">
<li class="current-cat"><a href="http://redegamers.blogspot.com/">Inicio</a></li>
<li><a href="http://redegamers.blogspot.com/p/trailers.html">Trailers</a></li>
<li><a href="http://redegamers.blogspot.com/p/informacoes.html">Informação</a></li>
<li><a href="http://redegamers.blogspot.com/p/tirinhas.html">Tirinhas</a></li>
<li><a href="http://redegamers.blogspot.com/p/pacerias.html">Wallpaper</a></li>
<li><a href="http://redegamers.blogspot.com/p/contato_16.html">Contato</a></li>
</ul>
</div>


3. Exclua essa parte e no lugar dela cole o código HTML do menu novo (a última caixa de código deste tutorial).

 
Às 2 de novembro de 2011 23:49 , Blogger FozGamer disse...

Cara valeu,nem precisa.Agora irei ficar com o meu normal de antes,pois eu sabia que teria de tirr aquelas páguinas,so não sabia de onde eu começava a tirar e de onde eu terminava,valeu mesmo assim CBlogger.Apesar de não termos paceria te colocarei no Recomendamos do meu blog(não sei se ajuda em alguma coisa :/ hsuashua).Agora eu escolhi com força de vontade os meus 2 cores principais do meu blog que serão:Preta e Amarela ou Laranja(o preto so ficará em regiões tipo o fundo dos gadget,pois não quero nada muito dark igual a certos blogs de dowload ezagerados '-').

 
Às 4 de novembro de 2011 08:05 , Blogger Rodrigo Viana disse...

Muito bom. valeu mesmo! As cores do meu blog são azul e vermelhor. vou tentar mudar a cor que está amarelo. valeu Cblogger!

 
Às 4 de novembro de 2011 08:11 , Blogger Rodrigo Viana disse...

Equipe Rede Gamers: Tenho uma alternativa para você excluir o menu já existente no topo do blog. se for esses templates modernos, onde a maioria são parecidos, mudando apenas as cores, faça o seguinte: no topo haverá um menu de 'Pages' nele, aparece os links de páginas criadas por você mesmo. para retira-lo vá em editar HTML e procure exatamente por "Pages". daí nos códigos que procedem desta palavra, troque apenas 'no' por 'yes', e 'true' por 'false'. agora é só ver que aparecerá a opção de por mais gadgets naquela área e tbm aparecerá a opção "excluir", onde você exclui o gadget páginas! Valeu.

 
Às 14 de novembro de 2011 16:50 , Blogger Rock disse...

Olá, muito interessantes as suas dicas, tentei aplicar essa mas não deu certo, já segui váios tutorias, baixei menus, alguns hospedei as imagens mas não funciona nesse template, já testei em outro mais simples e deu certo, será que podia me dar uma mão???

http://mochileiroestelar.blogspot.com/

 
Às 14 de novembro de 2011 22:55 , Blogger Códigos Blogger disse...

Veja este artigo:

Clique aqui

 
Às 15 de novembro de 2011 16:59 , Blogger Rock disse...

Obrigado, já testei desse site aliás agora o download é por email e os nomes de alguns a arquivos mudaram. Já testei em outros templates e funcionou mas nesse não quer entrar a imagem, já hospedei a imagem corretamente em vários sites para testar mas o menu sempre fica da forma padrão do template. Obrigado pela ajuda.

 
Às 13 de dezembro de 2011 00:57 , Blogger João Gabriel disse...

Como alargar a barra de menu, para que ela fique com 900px?

quero que ela fique com a mesma largura do menu anterior, de uma ponta a outra da pagina.

 
Às 13 de dezembro de 2011 11:40 , Blogger Gedi Caldeira disse...

João, lá no código CSS no menu tem uma parte assim

width: 100%;

Tente alterar o valor 100% para 900px

Ve se da certo.

 
Às 14 de janeiro de 2012 17:23 , Blogger Hernandz Santana disse...

Amigo,como faz para ele ocupar a tela de um lado a outro? pode ser pelo codigo css mesmo é só me dizer, Att

 
Às 14 de janeiro de 2012 17:31 , Blogger Hernandz Santana disse...

e o css não funcionou será que é por causa do meu template?

 
Às 5 de agosto de 2012 20:19 , Blogger Marcelo Araújo disse...

amigo até aqui entendi o assunto, mas como posso postar artigos em cada sessão do menu?? grato

 
Às 13 de abril de 2013 08:28 , Blogger george disse...

Muito bom trabalho

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial