Menus para aplicar no blog - Coleção sensacional de menus

Unknown 01:22 blog , blogger , menu , responsivo Nenhum comentário

Coleção de menus

Este post é uma sequência de artigos sobre Gadgets, Widgets, menus e portfólios que iremos publicar para você aplicar em seu blog. Nosso foco principal será o Blogger, porém, os menus poderão ser aplicados em outras plataformas também.

Vamos começar trazendo alguns menus incríveis para aplicar em seu blog. Todo menu novo será inserido neste post, assim como slide na página de slide, Gadgets na página de Gadgets, e assim por diante...

Aconselhamos que você coloque este post em seus favoritos para verificar periodicamente os menus inseridos aqui.

Muito se tem falado na blogosfera sobre temas responsivos. Com o uso de Tablets e Smartphones, isso tem se tornado algo muito comum, e o blogueiro que não se prepara para esta nova realidade, perde espaço na web.

Ninguém gosta de ficar puxando a barra de rolagem para o lado para ver o conteúdo do site ou blog. O que o leitor quer ver é um conteúdo ajustável de acordo com a resolução do aparelho que ele está acessando.

Pensando nisso, o BG trouxe os melhores menus existentes na web para você aplicar em seu blog.

21 modelos sensacionais de menus (editados pelo BG) para você!

Todos os menus descritos neste post são responsivos!

Estes menus já foram editados e otimizados para inserir em qualquer template, exatamente da forma que estão. Caso queira mudar a cor da fonte ou fundo, altere a CSS do respectivo menu.

Tutorial

Primeiro, acesse nossa página de exemplo e escolha o menu que deseja aplicar em seu blog. Escolha o modelo e seu respectivo número. Depois, volte para este artigo para que você possa ter acesso ao código do seu modelo para aplicar em seu blog.

Veja a demonstração dos modelos aqui.

Após escolher, basta você selecionar o código do modelo mais abaixo. Mas, antes, é necessário que você siga alguns passos muito simples:

Primeiro, vá até o painel do seu Blogger. No menu, clique na aba Layout e, em seguida, editar html. No código fonte do seu blog, dê CTRL+F e procure pela tag </head> Acima desta tag, cole o código da caixa de auto seleção, abaixo:

Agora, procure pela tag ]]<b:skin> Acima desta tag cole o código da caixa de auto seleção, abaixo:

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Raleway:400,300,700); a { text-decoration: none; } .container > header, .codrops-top, .container > section p { font-family: 'Lato', Arial, sans-serif; } .container > header { margin: 0 auto; padding: 2em; text-align: center; color: #89867e; min-height: 250px; background: rgba(0,0,0,0.05); } .container > header h1 { font-size: 2.625em; line-height: 1.3; margin: 0; font-weight: 300; } .container > header span { display: block; font-size: 60%; color: #ceccc6; padding: 0 0 0.6em 0.1em; } /* To Navigation Style */ .codrops-top { background: #fff; background: rgba(255, 255, 255, 0.6); text-transform: uppercase; width: 100%; font-size: 0.69em; line-height: 2.2; } .codrops-top a { text-decoration: none; padding: 0 1em; letter-spacing: 0.1em; color: #888; display: inline-block; } .codrops-top a:hover { background: rgba(255,255,255,0.95); color: #716d62; } .codrops-top span.right { float: right; } .codrops-top span.right a { float: left; display: block; } .codrops-icon:before { font-family: 'codropsicons'; margin: 0 4px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .codrops-icon-drop:before { content: "\e001"; } .codrops-icon-prev:before { content: "\e004"; } .container > section { margin: 0 auto; padding: 1%; text-align: center; } .color-1 { background: #435a6b; } .color-2 { background: #f39c12; } .color-3 { background: #2ac56c; } .color-4 { background: #0e83cd; } .color-5 { background: #cd4436; } .color-6 { background: #f19f0f; } .color-7 { background: #3fa46a; } .color-8 { background: #ecf0f1; } .color-9 { background: #9e487f; } .color-10 { background: #16a085; } .color-11 { background: #aab7b7; } .container > section p { color: #fff; font-size: 1.3em; font-weight: 300; } .container > section p a { color: #fff; font-weight: 700; } .container > section p a:hover { color: #0c69a4; } @media screen and (max-width: 25em) { .codrops-icon span { display: none; } } ----------------/// *, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Raleway', sans-serif; } nav a { position: relative; display: inline-block; margin: 15px 25px; outline: none; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 50; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 1.35em; } nav a:hover, nav a:focus { outline: none; }

Realizados estes passos acima, agora seu template está pronto para receber qualquer código de modelos de menu a seguir:

Para inserir os códigos do modelos de menu, vá até o código fonte de seu blog, e insira a CSS dos modelos "acima da tag ]]<b:skin>" e o "HTML" abaixo da tag <head> e da tag <body

Modelo de menu 1

CSS

HTML

<div class='container'> <section class='color-1'> <nav class='cl-effect-1'> <a href='#'>Wafture</a> <a href='#'>Sumptuous</a> <a href='#'>Scintilla</a> <a href='#'>Propinquity</a> <a href='#'>Harbinger</a> </nav> </section> </div>

Modelo de menu 2

CSS

/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */ .cl-effect-2 a { line-height: 44px; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } .cl-effect-2 a span { position: relative; display: inline-block; padding: 0 14px; background: #2195de; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .csstransforms3d .cl-effect-2 a span::before { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: #0965a0; content: attr(data-hover); -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; } .cl-effect-2 a:hover span, .cl-effect-2 a:focus span { -webkit-transform: rotateX(90deg) translateY(-22px); -moz-transform: rotateX(90deg) translateY(-22px); transform: rotateX(90deg) translateY(-22px); } .csstransforms3d .cl-effect-2 a:hover span::before, .csstransforms3d .cl-effect-2 a:focus span::before { background: #28a2ee;	 }

HTML

<div class='container'> <section class='color-4'> <nav class='cl-effect-2'> <a href='#'>Ratatouille</a> <a href='#'>Lassitude</a> <a href='#'>Murmurous</a> <a href='#'>Palimpsest</a> <a href='#'>Assemblage</a> </nav> </section> </div>

Modelo de menu 3

CSS

/* Effect 3: bottom line slides/fades in */ .cl-effect-3 a { padding: 8px 0; } .cl-effect-3 a::after { position: absolute; top: 100%; left: 0; width: 100%; height: 4px; background: rgba(0,0,0,0.1); content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); } .cl-effect-3 a:hover::after, .cl-effect-3 a:focus::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); }

HTML

<div class='container'> <section class='color-6'> <nav class='cl-effect-3'> <a href='#'>Palimpsest</a> <a href='#'>Ineffable</a> <a href='#'>Lilt</a> <a href='#'>Mellifluous</a> <a href='#'>Serendipity</a> </nav> </section> </div>

Modelo de menu 4

CSS

HTML

<div class='container'> <section class='color-7'> <nav class='cl-effect-4'> <a href='#'>Woebegone</a> <a href='#'>Lassitude</a> <a href='#'>Murmurous</a> <a href='#'>Palimpsest</a> <a href='#'>Assemblage</a> </nav> </section> </div>

Modelo de menu 5

CSS

HTML

<div class='container'> <section class='color-5'> <nav class='cl-effect-5'> <a href='#'>Seraglio</a> <a href='#'>Sumptuous</a> <a href='#'>Scintilla</a> <a href='#'>Palimpsest</a> <a href='#'>Assemblage</a> </nav> </section> </div>

Modelo de menu 6

CSS

HTML

<div class='container'> <section class='color-4'> <nav class='cl-effect-6'> <a href='#'>Umbrella</a> <a href='#'>Ineffable</a> <a href='#'>Lilt</a> <a href='#'>Mellifluous</a> <a href='#'>Serendipity</a> </nav> </section> </div>

Modelo de menu 7

CSS

/* Effect 7: second border slides up */ .cl-effect-7 a { padding: 12px 10px 10px; color: #566473; text-shadow: none; font-weight: 700; } .cl-effect-7 a::before, .cl-effect-7 a::after { position: absolute; top: 100%; left: 0; width: 100%; height: 3px; background: #566473; content: ''; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: scale(0.85); -moz-transform: scale(0.85); transform: scale(0.85); } .cl-effect-7 a::after { opacity: 0; -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s; -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s; transition: top 0.3s, opacity 0.3s, transform 0.3s; } .cl-effect-7 a:hover::before, .cl-effect-7 a:hover::after, .cl-effect-7 a:focus::before, .cl-effect-7 a:focus::after { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } .cl-effect-7 a:hover::after, .cl-effect-7 a:focus::after { top: 0%; opacity: 1; }

HTML

<div class='container'> <section class='color-8'> <nav class='cl-effect-7'> <a href='#'>Languor</a> <a href='#'>Lassitude</a> <a href='#'>Murmurous</a> <a href='#'>Palimpsest</a> <a href='#'>Assemblage</a> </nav> </section> </div>

Modelo de menu 8

CSS

/* Effect 8: border slight translate */ .cl-effect-8 a { padding: 10px 20px; } .cl-effect-8 a::before, .cl-effect-8 a::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid #354856; content: ''; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } .cl-effect-8 a::after { border-color: #fff; opacity: 0; -webkit-transform: translateY(-7px) translateX(6px); -moz-transform: translateY(-7px) translateX(6px); transform: translateY(-7px) translateX(6px); } .cl-effect-8 a:hover::before, .cl-effect-8 a:focus::before { opacity: 0; -webkit-transform: translateY(5px) translateX(-5px); -moz-transform: translateY(5px) translateX(-5px); transform: translateY(5px) translateX(-5px); } .cl-effect-8 a:hover::after, .cl-effect-8 a:focus::after { opacity: 1; -webkit-transform: translateY(0px) translateX(0px); -moz-transform: translateY(0px) translateX(0px); transform: translateY(0px) translateX(0px); }

HTML
<div class='container'> <section class='color-1'> <nav class='cl-effect-8'> <a href='#'>Imbue</a> <a href='#'>Sumptuous</a> <a href='#'>Scintilla</a> <a href='#'>Propinquity</a> <a href='#'>Harbinger</a> </nav> </section> </div>

Modelo de menu 9

CSS

/* Effect 9: second text and borders */ .cl-effect-9 a { margin: 0 20px; padding: 18px 20px; } .cl-effect-9 a::before, .cl-effect-9 a::after { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #fff; content: ''; opacity: 0.2; -webkit-transition: opacity 0.3s, height 0.3s; -moz-transition: opacity 0.3s, height 0.3s; transition: opacity 0.3s, height 0.3s; } .cl-effect-9 a::after { top: 100%; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .cl-effect-9 a span:first-child { z-index: 2; display: block; font-weight: 300; } .cl-effect-9 a span:last-child { z-index: 1; display: block; padding: 8px 0 0 0; color: rgba(0,0,0,0.4); text-shadow: none; text-transform: none; font-style: italic; font-size: 0.75em; font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } .cl-effect-9 a:hover::before, .cl-effect-9 a:focus::before { height: 6px; } .cl-effect-9 a:hover::before, .cl-effect-9 a:hover::after, .cl-effect-9 a:focus::before, .cl-effect-9 a:focus::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } .cl-effect-9 a:hover span:last-child, .cl-effect-9 a:focus span:last-child { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); transform: translateY(0%); }

HTML

<div class='container'> <section class='color-9'> <nav class='cl-effect-9'> <a href='#'>GossamerSumptuous Heart</a> <a href='#'>IneffableEvanescent Life</a> <a href='#'>ChatoyantAssemblage Love</a> <a href='#'>MellifluousMellifluous Will</a> <a href='#'>SerendipitySerendipity Cut</a> </nav> </section> </div>

Modelo de menu 10

CSS

/* Effect 10: reveal, push out */ .cl-effect-10 { position: relative; z-index: 1; } .cl-effect-10 a { overflow: hidden; margin: 0 15px; } .cl-effect-10 a span { display: block; padding: 10px 20px; background: #0f7c67; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .cl-effect-10 a::before { position: absolute; top: 0; left: 0; z-index: -1; padding: 10px 20px; width: 100%; height: 100%; background: #fff; color: #0f7c67; content: attr(data-hover); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(-25%); } .cl-effect-10 a:hover span, .cl-effect-10 a:focus span { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } .cl-effect-10 a:hover::before, .cl-effect-10 a:focus::before { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%); }

HTML

<section class='color-10'> <nav class='cl-effect-10'> <a data-hover='Seraglio' href='#'>Seraglio</a> <a data-hover='Sumptuous' href='#'>Sumptuous</a> <a data-hover='Scintilla' href='#'>Scintilla</a> <a data-hover='Palimpsest' href='#'>Palimpsest</a> <a data-hover='Assemblage' href='#'>Assemblage</a> </nav> </section> </div>

Modelo de menu 11

CSS

/* Effect 11: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */ .cl-effect-11 a { padding: 10px 0; border-top: 2px solid #0972b4; color: #0972b4; text-shadow: none; } .cl-effect-11 a::before { position: absolute; top: 0; left: 0; overflow: hidden; padding: 10px 0; max-width: 0; border-bottom: 2px solid #fff; color: #fff; content: attr(data-hover); -webkit-transition: max-width 0.5s; -moz-transition: max-width 0.5s; transition: max-width 0.5s; } .cl-effect-11 a:hover::before, .cl-effect-11 a:focus::before { max-width: 100%; }

HTML

<div class='container'> <section class='color-4'> <nav class='cl-effect-11'> <a data-hover='Desultory' href='#'>Desultory</a> <a data-hover='Sumptuous' href='#'>Sumptuous</a> <a data-hover='Scintilla' href='#'>Scintilla</a> <a data-hover='Propinquity' href='#'>Propinquity</a> <a data-hover='Harbinger' href='#'>Harbinger</a> </nav> </section> </div>

Modelo de menu 12

CSS

/* Effect 12: circle */ .cl-effect-12 a::before, .cl-effect-12 a::after { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; border: 2px solid rgba(0,0,0,0.1); border-radius: 50%; content: ''; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2); -moz-transform: translateX(-50%) translateY(-50%) scale(0.2); transform: translateX(-50%) translateY(-50%) scale(0.2); } .cl-effect-12 a::after { width: 90px; height: 90px; border-width: 6px; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); -moz-transform: translateX(-50%) translateY(-50%) scale(0.8); transform: translateX(-50%) translateY(-50%) scale(0.8); } .cl-effect-12 a:hover::before, .cl-effect-12 a:hover::after, .cl-effect-12 a:focus::before, .cl-effect-12 a:focus::after { opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); -moz-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); }

HTML

Modelo de menu 13

CSS

/* Effect 13: three circles */ .cl-effect-13 a { -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; } .cl-effect-13 a::before { position: absolute; top: 100%; left: 50%; color: transparent; content: '...'; text-shadow: 0 0 transparent; font-size: 1.2em; -webkit-transition: text-shadow 0.3s, color 0.3s; -moz-transition: text-shadow 0.3s, color 0.3s; transition: text-shadow 0.3s, color 0.3s; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); pointer-events: none; } .cl-effect-13 a:hover::before, .cl-effect-13 a:focus::before { color: #fff; text-shadow: 10px 0 #fff, -10px 0 #fff; } .cl-effect-13 a:hover, .cl-effect-13 a:focus { color: #ba7700; }

HTML

<div class='container'> <section class='color-6'> <nav class='cl-effect-13'> <a href='#'>Beleaguer</a> <a href='#'>Lassitude</a> <a href='#'>Murmurous</a> <a href='#'>Palimpsest</a> <a href='#'>Assemblage</a> </nav> </section> </div>

Modelo de menu 14

CSS

/* Effect 14: border switch */ .cl-effect-14 a { padding: 0 20px; height: 45px; line-height: 45px; } .cl-effect-14 a::before, .cl-effect-14 a::after { position: absolute; width: 45px; height: 2px; background: #fff; content: ''; opacity: 0.2; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; pointer-events: none; } .cl-effect-14 a::before { top: 0; left: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; } .cl-effect-14 a::after { right: 0; bottom: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; transform-origin: 100% 0; } .cl-effect-14 a:hover::before, .cl-effect-14 a:hover::after, .cl-effect-14 a:focus::before, .cl-effect-14 a:focus::after { opacity: 1; } .cl-effect-14 a:hover::before, .cl-effect-14 a:focus::before { left: 50%; -webkit-transform: rotate(0deg) translateX(-50%); -moz-transform: rotate(0deg) translateX(-50%); transform: rotate(0deg) translateX(-50%); } .cl-effect-14 a:hover::after, .cl-effect-14 a:focus::after { right: 50%; -webkit-transform: rotate(0deg) translateX(50%); -moz-transform: rotate(0deg) translateX(50%); transform: rotate(0deg) translateX(50%); }

HTML

<div class='container'> <section class='color-1'> <nav class='cl-effect-14'> <a href='#'>Ailurophile</a> <a href='#'>Sumptuous</a> <a href='#'>Scintilla</a> <a href='#'>Propinquity</a> <a href='#'>Harbinger</a> </nav> </section> </div>

Modelo de menu 15

CSS

/* Effect 15: scale down, reveal */ .cl-effect-15 a { color: rgba(0,0,0,0.2); font-weight: 700; text-shadow: none; } .cl-effect-15 a::before { color: #fff; content: attr(data-hover); position: absolute; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } .cl-effect-15 a:hover::before, .cl-effect-15 a:focus::before { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); transform: scale(0.9); opacity: 0; }

HTML
<div class='container'> <section class='color-3'> <nav class='cl-effect-15'> <a data-hover='Desultory' href='#'>Desultory</a> <a data-hover='Sumptuous' href='#'>Sumptuous</a> <a data-hover='Scintilla' href='#'>Scintilla</a> <a data-hover='Propinquity' href='#'>Propinquity</a> <a data-hover='Harbinger' href='#'>Harbinger</a> </nav> </section> </div>

Modelo de menu 16

CSS

/* Effect 16: fall down */ .cl-effect-16 a { color: #6f8686; text-shadow: 0 0 1px rgba(111,134,134,0.3); } .cl-effect-16 a::before { color: #fff; content: attr(data-hover); position: absolute; opacity: 0; text-shadow: 0 0 1px rgba(255,255,255,0.3); -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none; } .cl-effect-16 a:hover::before, .cl-effect-16 a:focus::before { -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); opacity: 1; }

HTML

<div class='container'> <section class='color-11'> <nav class='cl-effect-16'> <a data-hover='Languor' href='#'>Languor</a> <a data-hover='Murmurous' href='#'>Murmurous</a> <a data-hover='Lassitude' href='#'>Lassitude</a> <a data-hover='Chatoyant' href='#'>Chatoyant</a> <a data-hover='Palimpsest' href='#'>Palimpsest</a> </nav> </section> </div>

Modelo de menu 17

CSS

/* Effect 17: move up fade out, push border */ .cl-effect-17 a { color: #10649b; text-shadow: none; padding: 10px 0; } .cl-effect-17 a::before { color: #fff; text-shadow: 0 0 1px rgba(255,255,255,0.3); content: attr(data-hover); position: absolute; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none; } .cl-effect-17 a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #fff; opacity: 0; -webkit-transform: translateY(5px); -moz-transform: translateY(5px); transform: translateY(5px); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none; } .cl-effect-17 a:hover::before, .cl-effect-17 a:focus::before { opacity: 0; -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); transform: translateY(-2px); } .cl-effect-17 a:hover::after, .cl-effect-17 a:focus::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); }

HTML

<div class='container'> <section class='color-4'> <nav class='cl-effect-17'> <a data-hover='Languor' href='#'>Languor</a> <a data-hover='Murmurous' href='#'>Murmurous</a> <a data-hover='Lassitude' href='#'>Lassitude</a> <a data-hover='Chatoyant' href='#'>Chatoyant</a> <a data-hover='Palimpsest' href='#'>Palimpsest</a> </nav> </section> </div>

Modelo de menu 18

CSS

/* Effect 18: cross */ .cl-effect-18 { position: relative; z-index: 1; } .cl-effect-18 a { padding: 0 5px; color: #b4770d; font-weight: 700; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; } .cl-effect-18 a::before, .cl-effect-18 a::after { position: absolute; width: 100%; left: 0; top: 50%; height: 2px; margin-top: -1px; background: #b4770d; content: ''; z-index: -1; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none; } .cl-effect-18 a::before { -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); transform: translateY(-20px); } .cl-effect-18 a::after { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); transform: translateY(20px); } .cl-effect-18 a:hover, .cl-effect-18 a:focus { color: #fff; } .cl-effect-18 a:hover::before, .cl-effect-18 a:hover::after, .cl-effect-18 a:focus::before, .cl-effect-18 a:focus::after { opacity: 0.7; } .cl-effect-18 a:hover::before, .cl-effect-18 a:focus::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .cl-effect-18 a:hover::after, .cl-effect-18 a:focus::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); }

HTML

<div class='container'> <section class='color-6'> <nav class='cl-effect-18'> <a data-hover='Desultory' href='#'>Desultory</a> <a data-hover='Sumptuous' href='#'>Sumptuous</a> <a data-hover='Scintilla' href='#'>Scintilla</a> <a data-hover='Propinquity' href='#'>Propinquity</a> <a data-hover='Harbinger' href='#'>Harbinger</a> </nav> </section> </div>

Modelo de menu 19

CSS

/* Effect 19: 3D side */ .cl-effect-19 a { line-height: 2em; margin: 15px; -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; width: 200px; } .cl-effect-19 a span { position: relative; display: inline-block; width: 100%; padding: 0 14px; background: #e35041; -webkit-transition: -webkit-transform 0.4s, background 0.4s; -moz-transition: -moz-transform 0.4s, background 0.4s; transition: transform 0.4s, background 0.4s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50% -100px; -moz-transform-origin: 50% 50% -100px; transform-origin: 50% 50% -100px; } .csstransforms3d .cl-effect-19 a span::before { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; background: #b53a2d; content: attr(data-hover); -webkit-transition: background 0.4s; -moz-transition: background 0.4s; transition: background 0.4s; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; transform-origin: 0 50%; pointer-events: none; } .cl-effect-19 a:hover span, .cl-effect-19 a:focus span { background: #b53a2d; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); transform: rotateY(-90deg); } .csstransforms3d .cl-effect-19 a:hover span::before, .csstransforms3d .cl-effect-19 a:focus span::before { background: #ef5e50; }

HTML

<div class='container'> <section class='color-5'> <nav class='cl-effect-19'> <a href='#'>Ratatouille</a> <a href='#'>Lassitude</a> <a href='#'>Murmurous</a> <a href='#'>Palimpsest</a> <a href='#'>Assemblage</a> </nav> </section> </div>

Modelo de menu 20

CSS

/* Effect 20: 3D side */ .cl-effect-20 a { line-height: 2em; -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; } .cl-effect-20 a span { position: relative; display: inline-block; padding: 3px 15px 0; background: #587285; box-shadow: inset 0 3px #2f4351; -webkit-transition: background 0.6s; -moz-transition: background 0.6s; transition: background 0.6s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; transform-origin: 0% 50%; } .cl-effect-20 a span::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; color: #2f4351; content: attr(data-hover); -webkit-transform: rotateX(270deg); -moz-transform: rotateX(270deg); transform: rotateX(270deg); -webkit-transition: -webkit-transform 0.6s; -moz-transition: -moz-transform 0.6s; transition: transform 0.6s; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; pointer-events: none; } .cl-effect-20 a:hover span, .cl-effect-20 a:focus span { background: #2f4351; } .cl-effect-20 a:hover span::before, .cl-effect-20 a:focus span::before { -webkit-transform: rotateX(10deg); -moz-transform: rotateX(10deg); transform: rotateX(10deg); }

HTML
<div class='container'> <section class='color-1'> <nav class='cl-effect-20'> <a href='#'>Beleaguer</a> <a href='#'>Scintilla</a> <a href='#'>Chatoyant</a> <a href='#'>Palimpsest</a> <a href='#'>Languor</a> </nav> </section> </div>

Modelo de menu 21

CSS

/* Effect 21: borders slight translate */ .cl-effect-21 a { padding: 10px; color: #237546; font-weight: 700; text-shadow: none; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; } .cl-effect-21 a::before, .cl-effect-21 a::after { position: absolute; left: 0; width: 100%; height: 2px; background: #fff; content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .cl-effect-21 a::before { top: 0; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .cl-effect-21 a::after { bottom: 0; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); } .cl-effect-21 a:hover, .cl-effect-21 a:focus { color: #fff; } .cl-effect-21 a:hover::before, .cl-effect-21 a:focus::before, .cl-effect-21 a:hover::after, .cl-effect-21 a:focus::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); }

HTML
<div class='container'> <section class='color-7'> <nav class='cl-effect-21'> <a href='#'>Chatoyant</a> <a href='#'>Ineffable</a> <a href='#'>Efficiency</a> <a href='#'>Mellifluous</a> <a href='#'>Serendipity</a> </nav> </section> </div>

Veja a demonstração dos menus responsivos aqui.

Menu com jquery

Existem muitas técnicas para aplicar modelos responsivos em templates, seja com jquery ou com css. Vamos falar sobre um menu capaz de se adaptar a qualquer resolução, e falaremos, também, sobre um outro menu simples, mas com o mesmo efeito jquery.

Temos uma série de menus prontinhos esperando para ser publicados no BG. Alguns de criação nossa, outros traduzidos de páginas americanas.

Primeiro modelo de menu

Para começarmos, veja o exemplo dos dois modelos na página de exemplo.

Para inserir o primeiro modelo de menu, acesse o painel do seu Blogger. No menu, selecione a aba modelo. Em seguida, editar HTML. Acima da tag </head> insira o código da caixa de auto seleção, abaixo:

Ainda no código fonte de seu blog, abaixo da tag <body insira o HTML do menu. Basta copiar o código da caixa de auto seleção, abaixo, e inserir:

<div class='container'>
 <div class='content'>
 <ul class='ca-menu'>
<li> <a href='#'> A <div class='ca-content'>
 <h2 class='ca-main'>
texto 1</h2>
<h3 class='ca-sub'>
Personalizando seu template.</h3>
</div>
</a> </li>
<li> <a href='#'> I <div class='ca-content'>
 <h2 class='ca-main'>
texto 2</h2>
<h3 class='ca-sub'>
Saiba quem sou eu.</h3>
</div>
</a> </li>
<li> <a href='#'> C <div class='ca-content'>
 <h2 class='ca-main'>
texto 3</h2>
<h3 class='ca-sub'>
entrando em contato</h3>
</div>
</a> </li>
<li> <a href='#'> S <div class='ca-content'>
 <h2 class='ca-main'>
texto 4</h2>
<h3 class='ca-sub'>
Professionals in action</h3>
</div>
</a> </li>
<li> <a href='#'> d <div class='ca-content'>
 <h2 class='ca-main'>
texto 5</h2>
<h3 class='ca-sub'>
24/7 for you needs</h3>
</div>
</a> </li>
</ul>
</div>
 </div>

Faça as devidas alterações nos nomes dos respectivos links, e insira os links que deseja apontar no menu.

Este é um ótimo menu com efeito jquery para se aplicar no blog. Foi desenvolvido para o Blogger. Caso queira aplicá-lo em outra plataforma, é necessário verificar a compatibilidade.

Segundo modelo de menu

Para aplicar o segundo modelo de menu da página de exemplo, o processo é similar ao de cima, porém, iremos inserir CSS no código fonte do blog.

Para começarmos, repita o processo do primeiro menu, descrito acima, para chegar ao código fonte do seu blog.

Agora, procure pela tag ]]<b:skin> Acima dela, cole o código da caixa de auto seleção, abaixo:

@font-face { 	font-family: 'icomoon'; 	src: url('../fonts/icomoon.eot'); 	src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), 		url('../fonts/icomoon.woff') format('woff'), 		url('../fonts/icomoon.ttf') format('truetype'), 		url('../fonts/icomoon.svg#icomoon') format('svg'); 	font-weight: normal; 	font-style: normal; }  /* Windows Chrome ugly fix http://stackoverflow.com/questions/13674808/chrome-svg-font-rendering-breaks-layout/14345363#14345363 */ @media screen and (-webkit-min-device-pixel-ratio:0) { 	@font-face { 		font-family: 'icomoon'; 		src: url('../fonts/icomoon.svg#icomoon') format('svg'); 	}; }  .icon-team, .icon-blog, .icon-home, .icon-portfolio, .icon-services, .icon-contact, .icon-menu { 	font-family: 'icomoon'; 	speak: none; 	font-style: normal; 	font-weight: normal; 	font-variant: normal; 	text-transform: none; 	line-height: 1; 	-webkit-font-smoothing: antialiased; }  .icon-team:before { 	content: "\e000"; }  .icon-blog:before { 	content: "\e001"; }  .icon-home:before { 	content: "\e002"; }  .icon-portfolio:before { 	content: "\e003"; }  .icon-services:before { 	content: "\e004"; }  .icon-contact:before { 	content: "\e005"; }  .icon-menu:before { 	content: "\f0c9"; }  a, li { 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }   /* Global CSS that are applied for all screen sizes */  .nav ul { 	max-width: 1240px; 	margin: 0; 	padding: 0; 	list-style: none; 	font-size: 1.5em; 	font-weight: 300; }  .nav li span { 	display: block; }  .nav a { 	display: block; 	color: rgba(249, 249, 249, .9); 	text-decoration: none; 	-webkit-transition: color .5s, background .5s, height .5s; 	-moz-transition: color .5s, background .5s, height .5s; 	-o-transition: color .5s, background .5s, height .5s; 	-ms-transition: color .5s, background .5s, height .5s; 	transition: color .5s, background .5s, height .5s; }  .nav i{ 	/* Make the font smoother for Chrome */ 	-webkit-transform: translate3d(0, 0, 0); 	-moz-transform: translate3d(0, 0, 0); 	-o-transform: translate3d(0, 0, 0); 	-ms-transform: translate3d(0, 0, 0); 	transform: translate3d(0, 0, 0); }  /* Remove the blue Webkit background when element is tapped */  a, button { 	-webkit-tap-highlight-color: rgba(0,0,0,0); }  /* Hover effect for the whole navigation to make the hovered item stand out */  .no-touch .nav ul:hover a { 	color: rgba(249, 249, 249, .5); }  .no-touch .nav ul:hover a:hover { 	color: rgba(249, 249, 249, 0.99); }  /* Adding some background color to the different menu items */  .nav li:nth-child(6n+1) { 	background: rgb(208, 101, 3); }  .nav li:nth-child(6n+2) { 	background: rgb(233, 147, 26); }  .nav li:nth-child(6n+3) { 	background: rgb(22, 145, 190); }  .nav li:nth-child(6n+4) { 	background: rgb(22, 107, 162); }  .nav li:nth-child(6n+5) { 	background: rgb(27, 54, 71); }  .nav li:nth-child(6n+6) { 	background: rgb(21, 40, 54); }  /* For screen bigger than 800px */ @media (min-width: 50em) {  	/* Transforms the list into a horizontal navigation */ 	.nav li { 		float: left; 		width: 16.66666666666667%; 		text-align: center; 		-webkit-transition: border .5s; 		-moz-transition: border .5s; 		-o-transition: border .5s; 		-ms-transition: border .5s; 		transition: border .5s; 	}  	.nav a { 		display: block; 		width: auto; 	}  	/* hover, focused and active effects that add a little colored border to the different items */ 	.no-touch .nav li:nth-child(6n+1) a:hover, 	.no-touch .nav li:nth-child(6n+1) a:active, 	.no-touch .nav li:nth-child(6n+1) a:focus { 		border-bottom: 4px solid rgb(174, 78, 1); 	}  	.no-touch .nav li:nth-child(6n+2) a:hover, 	.no-touch .nav li:nth-child(6n+2) a:active, 	.no-touch .nav li:nth-child(6n+2) a:focus { 		border-bottom: 4px solid rgb(191, 117, 20); 	}  	.no-touch .nav li:nth-child(6n+3) a:hover, 	.no-touch .nav li:nth-child(6n+3) a:active, 	.no-touch .nav li:nth-child(6n+3) a:focus { 		border-bottom: 4px solid rgb(12, 110, 149); 	}  	.no-touch .nav li:nth-child(6n+4) a:hover, 	.no-touch .nav li:nth-child(6n+4) a:active, 	.no-touch .nav li:nth-child(6n+4) a:focus { 		border-bottom: 4px solid rgb(10, 75, 117); 	}  	.no-touch .nav li:nth-child(6n+5) a:hover, 	.no-touch .nav li:nth-child(6n+5) a:active, 	.no-touch .nav li:nth-child(6n+5) a:focus { 		border-bottom: 4px solid rgb(16, 34, 44); 	}  	.no-touch .nav li:nth-child(6n+6) a:hover, 	.no-touch .nav li:nth-child(6n+6) a:active, 	.no-touch .nav li:nth-child(6n+6) a:focus { 		border-bottom: 4px solid rgb(9, 18, 25); 	}  	/* Placing the icon */ 	 	.icon { 		padding-top: 1.4em; 	}  	.icon + span { 		margin-top: 2.1em; 		-webkit-transition: margin .5s; 		-moz-transition: margin .5s; 		-o-transition: margin .5s; 		-ms-transition: margin .5s; 		transition: margin .5s; 	}  	/* Animating the height of the element*/ 	.nav a { 		height: 9em; 	}  	.no-touch .nav a:hover , 	.nav a:active , 	.nav a:focus { 		height: 10em; 	}	  	/* Making the text follow the height animation */ 	.no-touch .nav a:hover .icon + span { 		margin-top: 3.2em; 		-webkit-transition: margin .5s; 		-moz-transition: margin .5s; 		-o-transition: margin .5s; 		-ms-transition: margin .5s; 		transition: margin .5s; 	}  	/* Positioning the icons and preparing for the animation*/ 	.nav i { 		position: relative; 		display: inline-block; 		margin: 0 auto; 		padding: 0.4em; 		border-radius: 50%; 		font-size: 1.8em; 		box-shadow: 0 0 0 30px transparent; 		background: rgba(255,255,255,0.1); 		-webkit-transform: translate3d(0, 0, 0); 		-moz-transform: translate3d(0, 0, 0); 		-o-transform: translate3d(0, 0, 0); 		-ms-transform: translate3d(0, 0, 0); 		transform: translate3d(0, 0, 0); 		-webkit-transition: box-shadow .6s ease-in-out; 		-moz-transition: box-shadow .6s ease-in-out; 		-o-transition: box-shadow .6s ease-in-out; 		-ms-transition: box-shadow .6s ease-in-out; 		transition: box-shadow .6s ease-in-out; 	}	 	 	/* Animate the box-shadow to create the effect */ 	.no-touch .nav a:hover i, 	.no-touch .nav a:active i, 	.no-touch .nav a:focus i {		 		box-shadow: 0 0 0 0 rgba(255,255,255,0.2); 		-webkit-transition: box-shadow .4s ease-in-out; 		-moz-transition: box-shadow .4s ease-in-out; 		-o-transition: box-shadow .4s ease-in-out; 		-ms-transition: box-shadow .4s ease-in-out; 		transition: box-shadow .4s ease-in-out; 	} 		 }  @media (min-width: 50em) and (max-width: 61.250em) {  	/* Size and font adjustments to make it fit into the screen*/ 	.nav ul { 		font-size: 1.2em; 	}  }  /* The "tablet" and "mobile" version */  @media (max-width: 49.938em) {		 	 	/* Instead of adding a border, we transition the background color */ 	.no-touch .nav ul li:nth-child(6n+1) a:hover, 	.no-touch .nav ul li:nth-child(6n+1) a:active, 	.no-touch .nav ul li:nth-child(6n+1) a:focus { 		background: rgb(227, 119, 20); 	}  	.no-touch .nav li:nth-child(6n+2) a:hover, 	.no-touch .nav li:nth-child(6n+2) a:active, 	.no-touch .nav li:nth-child(6n+2) a:focus { 		background: rgb(245, 160, 41); 	}  	.no-touch .nav li:nth-child(6n+3) a:hover, 	.no-touch .nav li:nth-child(6n+3) a:active, 	.no-touch .nav li:nth-child(6n+3) a:focus { 		background: rgb(44, 168, 219); 	}  	.no-touch .nav li:nth-child(6n+4) a:hover, 	.no-touch .nav li:nth-child(6n+4) a:active, 	.no-touch .nav li:nth-child(6n+4) a:focus { 		background: rgb(31, 120, 176); 	}  	.no-touch .nav li:nth-child(6n+5) a:hover, 	.no-touch .nav li:nth-child(6n+5) a:active, 	.no-touch .nav li:nth-child(6n+5) a:focus { 		background: rgb(39, 70, 90); 	}  	.no-touch .nav li:nth-child(6n+6) a:hover, 	.no-touch .nav li:nth-child(6n+6) a:active, 	.no-touch .nav li:nth-child(6n+6) a:focus { 		background: rgb(32, 54, 68); 	}  	.nav ul li { 		-webkit-transition: background 0.5s; 		-moz-transition: background 0.5s; 		-o-transition: background 0.5s; 		-ms-transition: background 0.5s; 		transition: background 0.5s; 	}	  }  /* CSS specific to the 2x3 columns version */ @media (min-width:32.5em) and (max-width: 49.938em) { 	 	/* Creating the 2 column layout using floating elements once again */ 	.nav li { 		display: block; 		float: left; 		width: 50%; 	} 	 	/* Adding some padding to make the elements look nicer*/ 	.nav a { 		padding: 0.8em;		 	}  	/* Displaying the icons on the left, and the text on the right side using inlin-block*/ 	.nav li span,  	.nav li span.icon { 		display: inline-block; 	}  	.nav li span.icon { 		width: 50%; 	}  	.nav li .icon + span { 		font-size: 1em; 	}  	.icon + span { 		position: relative; 		top: -0.2em; 	}  	/* Adaptating to the icons to animate the size and border of the rounded background in a more discreet way */ 	.nav li i { 		display: inline-block; 		padding: 8% 9%; 		border: 4px solid transparent; 		border-radius: 50%; 		font-size: 1.5em; 		background: rgba(255,255,255,0.1); 		-webkit-transition: border .5s; 		-moz-transition: border .5s; 		-o-transition: border .5s; 		-ms-transition: border .5s; 		transition: border .5s; 	}  	/* Transition effect on the border color */ 	.no-touch .nav li:hover i, 	.no-touch .nav li:active i, 	.no-touch .nav li:focus i { 		border: 4px solid rgba(255,255,255,0.1); 	} 	 }  /* Adapting the font size and width for smaller screns*/ @media (min-width: 32.5em) and (max-width: 38.688em) { 	 	.nav li span.icon { 		width: 50%; 	}  	.nav li .icon + span { 		font-size: 0.9em; 	} }  /* Styling the toggle menu link and hiding it */ .nav .navtoogle{ 	display: none;	 	width: 100%; 	padding: 0.5em 0.5em 0.8em; 	font-family: 'Lato',Calibri,Arial,sans-serif; 	font-weight: normal; 	text-align: left; 	color: rgb(7, 16, 15); 	font-size: 1.2em; 	background: none;	 	border: none; 	border-bottom: 4px solid rgb(221, 221, 221); 	cursor: pointer; }  .navtoogle i{ 	z-index:-1; }  .icon-menu { 	position: relative; 	top: 3px; 	line-height: 0; 	font-size: 1.6em; }  @media (max-width: 32.438em) {  	/* Unhiding the styled menu link */ 	.nav .navtoogle{ 		margin: 0; 		display: block; 	} 	 	/* Animating the height of the navigation when the button is clicked */ 	 	/* When JavaScript is disabled, we hide the menu */ 	.no-js .nav ul { 		max-height: 30em; 		overflow: hidden; 	} 	 	/* When JavaScript is enabled, we hide the menu */ 	.js .nav ul { 		max-height: 0em; 		overflow: hidden; 	} 	 	/* Displaying the menu when the user has clicked on the button*/ 	.js .nav .active + ul {		 		max-height: 30em; 		overflow: hidden; 		-webkit-transition: max-height .4s; 		-moz-transition: max-height .4s; 		-o-transition: max-height .4s; 		-ms-transition: max-height .4s; 		transition: max-height .4s; 	}  	/* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/ 	 	.nav li span { 		display: inline-block; 		height: 100%; 	}  	.nav a { 		padding: 0.5em;		 	} 	 	.icon + span { 		margin-left: 1em; 		font-size: 0.8em; 	} 	 	/* Adding a left border of 8 px with a different color for each menu item*/ 	.nav li:nth-child(6n+1) { 		border-left: 8px solid rgb(174, 78, 1); 	}  	.nav li:nth-child(6n+2) { 		border-left: 8px solid rgb(191, 117, 20); 	}  	.nav li:nth-child(6n+3) { 		border-left: 8px solid rgb(13, 111, 150); 	}  	.nav li:nth-child(6n+4) { 		border-left: 8px solid rgb(10, 75, 117); 	}  	.nav li:nth-child(6n+5) { 		border-left: 8px solid rgb(16, 34, 44); 	}  	.nav li:nth-child(6n+6) { 		border-left: 8px solid rgb(9, 18, 25); 	}  	/* make the nav bigger on touch screens */ 	.touch .nav a { 		padding: 0.8em; 	} }

Ainda no código fonte do seu blog, procure pela tag </head> e logo acima dela cole o código da caixa de auto seleção, abaixo:

Agora, iremos inserir o html (estrutura) do menu, no código fonte do seu blog. Procure pela tag <body logo abaixo da tag </head> e insira o código fonte da caixa de auto seleção, abaixo:

<center>
<div class='container'>
				 <div class='main clearfix'>
 <nav class='nav' id='menu'>					 <ul>
<li> <a href='#'> Home </a> </li>
<li> <a href='#'> Services </a> </li>
<li><a href='#'> Portfolio </a> </li>
<li> <a href='#'> Blog </a> </li>
<li> <a href='#'> The team </a> </li>
<li> <a href='#'> Contact </a> </li>
</ul>
</nav> </div>
</div>
 </center>

Basta fazer as devidas alterações nos nomes e links, e salvar. Agora você tem um menu responsivo em seu blog!

Modelo de menu com efeito Jquery deslizante

Para começarmos, veja o menu em funcionamento aqui.

Este menu é baseado em CSS, HTML e javascript. Dificilmente entrará em conflito no seu template. Para aplicá-lo em seu blog, acesse o menu de seu Blogger, clique em modelo, e em seguida, clique em editar HTML. Dentro do código fonte, dê CTRL+F e procure pela tag ]]<b:skin> Acima desta tag, insira o código de CSS da caixa de auto seleção, abaixo:

ul.dropmenu{ position: relative; margin: 0px; padding: 1px 0px 0px 0px; background:transparent url(http://1.bp.blogspot.com/-QlNjAxBB9YE/UGck33rIUgI/AAAAAAAAFsM/EnZ0AsEggjc/s1600/navigation.png) repeat-x scroll 0 0; display:block; height: 35px; font-family:Verdana,Arial,Helvetica,sans-serif; font-size: 12px; } .dropmenu li{ position: relative; list-style: none; float: left; margin: 0px; padding: 0px; } .dropmenu li a{ height: 22px; padding: 9px 30px 0px 15px; display: block; cursor: point; border-right: solid 1px #4a779d; color: #FFFFFF; text-transform: uppercase; text-decoration: none; } .dropmenu li span{ display: block; float: right; height: 10px; width: 10px; background:transparent url(http://1.bp.blogspot.com/-0mKMqQrHeUo/UGck1O8Ip6I/AAAAAAAAFr4/KUFcGh_ZnRs/s1600/arrow_up.png) repeat-x scroll 0 0; position: absolute; top: 12px; right: 10px; } .dropmenu li a:hover span{ background:transparent url(http://1.bp.blogspot.com/-Em6wULHcShc/UGck0F2pikI/AAAAAAAAFr0/5ASpk3CSJRI/s1600/arrow_hover.png) repeat-x scroll 0 0; } .dropmenu li:hover ul, .dropmenu li:hover div{ display: block; } .dropmenu ul{ position: absolute; display: none; width: 140px; padding: 0px; margin: 0px; border-bottom: 1px solid #ccc; background: #FFFFFF url(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0; } .dropmenu ul li{ border: 0; float: none; } .dropmenu ul a { border: 1px solid #ccc; border-bottom: 0; white-space: nowrap; display:block; color: #0657AD; text-decoration: underline; text-transform: none; } a.selected, a:hover{ color: #0657AD !important; background: #FFFFFF url(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0; } a.selected span{ background:transparent url(http://1.bp.blogspot.com/-Em6wULHcShc/UGck0F2pikI/AAAAAAAAFr0/5ASpk3CSJRI/s1600/arrow_hover.png) repeat-x scroll 0 0; } .dropmenu ul a:hover { color:#F67A00 !important; text-decoration: none; background-color: #F0F0F0; background-image: none; } .dropmenu div ul{ position: relative; display: block; } .dropmenu li div{ background: #FFFFFF url(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0; border: 1px solid #ccc; padding: 5px; display: none; position: absolute; } .dropmenu li div ul{ border: none; background: none; position: relative !important; } .dropmenu li div a{ border: none; border-bottom: 1px solid #ccc; } .dropmenu li div div{ display: block; position: relative; background: none; border: none; } .dropmenu li div div a{ display: inline; border: none; color: #666; text-decoration: underline; padding: 0px; margin: 0px; text-transform: none; } .dropmenu li div div a:hover{ color: #000; text-decoration: none; } ul.left{ float: left; width: 145px; } ul.right{ float: right; width: 145px; } .small{ color: #666; font-size: 10px; padding: 10px 5px 8px 5px !important; display: block; clear: both; } .products{ width: 300px; padding: 15px !important; } .products ul{ width: 100%; } .products ul li{ border-bottom: 1px solid #ccc; height: 40px; padding: 10px 0px; } .products h2{ font-size: 16px; padding: 2px 0px 3px 0px; margin: 0px; } .products p{ color: #666; font-size: 10px; padding: 0px; margin: 0px; } .products img{ float: left; padding-right: 10px; } .products ul li a{ display: inline; border: none; color: #666; text-decoration: underline; padding: 0px; margin: 0px; text-transform: none; } .products ul li a:hover{ color: #000 !important; text-decoration: none; background: none !important; } .tutorials{ width: 300px; } input{ border:1px solid #4A779D; padding: 3px 8px; margin-bottom: 8px; width: 164px; } label{ padding: 0px 0px 4px 0px; display:block; } button{ background: #4A779D url(http://1.bp.blogspot.com/-QlNjAxBB9YE/UGck33rIUgI/AAAAAAAAFsM/EnZ0AsEggjc/s1600/navigation.png) repeat-x scroll 0 0; color: #FFF; border:1px solid #4A779D; padding: 4px 10px; width: 180px; } .emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;} .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 160px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}

Ainda dentro do código fonte, procure pela tag </head> Acima dessa tag, insira o código de script da caixa de auto seleção, abaixo:

Para finalizarmos este menu, procure pela tag <body abaixo da tag </head> e insira a estrutura HTML do menu. Basta copiar o código da seguinte caixa de auto seleção, e inserir:

<ul class='dropmenu' id='nav-one'>
<li> <a href='#'>Home</a> </li>
<li> <a href='#'>Forum</a><ul>
<li><a href='#'>Support</a></li>
<li><a href='#'>Help</a></li>
<li><a href='#'>Examples</a></li>
<li><a href='#'>Your work</a></li>
</ul>
</li>
<li> <a href='#item3'>Downloads</a><ul>
<li><a href='#'>Tools</a></li>
<li><a href='#'>Office</a></li>
<li><a href='#'>Custom projects</a></li>
</ul>
</li>
<li> <a href='#'>Products</a> <div class='products'>
<ul>
<li><img alt='Thumb' border='0' height='40' src='http://4.bp.blogspot.com/-brA1qvvpyXg/UGcoWTlHWLI/AAAAAAAAFsw/jUSjTHOvh88/s1600/1.jpg' width='40'/><h2>
Featured Box</h2>

<a href='#'>More information about this product</a>
</li>
<li><img alt='Thumb' border='0' height='40' src='http://1.bp.blogspot.com/-vhdwdqNcO7g/UGcoXnXac1I/AAAAAAAAFs4/eo2_Cl4GaH8/s1600/2.jpg' width='40'/><h2>
Mod Rewriter</h2>

<a href='#'>More information about this product</a>
</li>
<li><img alt='Thumb' border='0' height='40' src='http://3.bp.blogspot.com/-cxh_yK0jF28/UGcoYxhlfuI/AAAAAAAAFtA/QjbZVFg70TM/s1600/3.jpg' width='40'/><h2>
Byte Scrambler</h2>

<a href='#'>More information about this product</a>
</li>
<li><img alt='Thumb' border='0' height='40' src='http://3.bp.blogspot.com/-cxh_yK0jF28/UGcoYxhlfuI/AAAAAAAAFtA/QjbZVFg70TM/s1600/3.jpg' width='40'/><h2>
Image Processor</h2>

<a href='#'>More information about this product</a>
</li>
<li><img alt='Thumb' border='0' height='40' src='http://4.bp.blogspot.com/-umDs7rKTFZQ/UGcocADb7ZI/AAAAAAAAFtQ/1dTOjPwJc0M/s1600/5.jpg' width='40'/><h2>
Registry Class</h2>

<a href='#'>More information about this product</a>
</li>
<li><img alt='Thumb' border='0' height='40' src='http://3.bp.blogspot.com/-AxTQpVFuxbs/UGcodrtWdqI/AAAAAAAAFtY/MA8K3gCE41w/s1600/6.jpg' width='40'/><h2>
Data Validation</h2>

<a href='#'>More information about this product</a>
</li>
<li><img alt='Thumb' border='0' height='40' src='http://2.bp.blogspot.com/-KFHxELM1ei0/UGcoeqDaqqI/AAAAAAAAFtc/2jLBgm53Ws0/s1600/7.jpg' width='40'/><h2>
Ajax Tables</h2>

<a href='#'>More information about this product</a>
</li>
</ul>
<div class='small'>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div>
</div>
</li>
<li> <a href='#'>Tutorials</a> <div class='tutorials'>
 <ul class='left'>
<li><a href='#'>Javascript</a></li>
<li><a href='#'>Python</a></li>
<li><a href='#'>PHP</a></li>
</ul>
<ul class='right'>
<li><a href='#'>HTML/CSS</a></li>
<li><a href='#'>ASP.NET</a></li>
<li><a href='#'>Actionscript</a></li>
</ul>
<div class='small'>
View <a href='#'>all categories</a> or a <a href='#'>list of the best tutorials</a>.</div>
</div>
</li>
<li> <a href='#'>Links</a> <ul>
<li><a href='#'>Programming</a></li>
<li><a href='#'>Inspiration</a></li>
<li><a href='#'>My websites</a></li>
<li><a href='#'>Clients</a></li>
<li><a href='#'>Cool stuff</a></li>
<li><a href='#'>Sitebase</a></li>
<li><a href='#'>Other</a></li>
</ul>
</li>
<li> <a href='#'>Subscribe Now</a> <div class='emailsub'>
 <div class='emailupdatesform'>
 <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerenciado', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input class='emailupdatesinput' gtbfieldid='10' name='email' onblur='if (this.value == '') {this.value = 'Enter your email here...';}' onfocus='if (this.value == 'Enter your email here...') {this.value = '';}' type='text' value='Enter your email here...'/><input name='uri' type='hidden' value='tntbystc'/><input class='joinemailupdates' type='submit' value='Submit'/></form>
</div>
</div>
</li>
</ul>

Neste menu, além das alterações dos textos, links e imagens, existe uma caixa de assinatura por email. Altere o nome bloggerenciado pelo nome de usuário de seu agregador de Feed.

Em breve, estaremos postando mais menus. Possuímos de 200 a 300 menus, que serão postados aos poucos neste post. Coloque em seus favoritos e verifique periodicamente!

Este artigo está disponível para publicação em outros blogs ou sites desde que seja seguida a Política do BG

Nenhum comentário :

Postar um comentário

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.

Assinar: Postar comentários ( Atom )

Menus para aplicar no blog - Coleção sensacional de menus

Coleção de menus

Aconselhamos que você coloque este post em seus favoritos para verificar periodicamente os menus inseridos aqui.

21 modelos sensacionais de menus (editados pelo BG) para você!

Tutorial

Tutorial

Modelo de menu 1

Modelo de menu 2

Modelo de menu 3

Modelo de menu 4

Modelo de menu 5

Modelo de menu 6

Modelo de menu 7

Modelo de menu 8

Modelo de menu 9

Modelo de menu 10

Modelo de menu 11

Modelo de menu 12

Modelo de menu 13

Modelo de menu 14

Modelo de menu 15

Modelo de menu 16

Modelo de menu 17

Modelo de menu 18

Modelo de menu 19

Modelo de menu 20

Modelo de menu 21

Menu com jquery

Primeiro modelo de menu

Segundo modelo de menu

Modelo de menu com efeito Jquery deslizante

Nenhum comentário :

Postar um comentário

Conheça nossos serviços

Cadastre seu email e receba novidades

Pesquise no Google

Quem está no blog agora

Visitantes do blog

Andrew Silva