Olá amoras resolvi trazer a vocês um menu que na verdade é bem diferente, diferente dos menus que vemos nos blogs e que quase não vejo em blogs, acho que na verdade ele se encaixa mais em perfil de lojas... Para ver o preview clica aqui
Também escolhi algumas imagens para vocês verem que inspirações lindas
Para ver como se faz esse menu clique em leia mais.
]]></b:skin>
E acima dessa tag cole esse enorme código abaixo:
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
}
#cssmenu { /*AREA GERAL DO MENU, FUNDO*/
background: #FF76B4; /*Se quiser alterar a cor do fundo*/
border-bottom: 1px solid #FF127D; /*Cor da borda de baixo*/
box-shadow: inset 0 2px 4px rgba(132, 135, 100, 0.5);
-moz-box-shadow: inset 0 2px 4px rgba(132, 135, 100, 0.5);
-webkit-box-shadow: inset 0 2px 4px rgba(132, 135, 100, 0.5);
}
#cssmenu:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
display: inline-block;
font-family: Calibri, Arial, sans-serif; /*Fonte da letra*/
color: #FFF; /*Cor da Letra*/
text-decoration: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
#cssmenu a:hover {
background: #FFA7CF; /*Cor do fundo hover*/
}
#cssmenu ul {
list-style: none;
height: 34px;
padding: 10px 0;
}
#cssmenu > ul > li {
float: left;
height: 34px;
margin: 0 5px;
position: relative;
}
#cssmenu > ul > li > a {
background: #FFA7CF;
box-shadow: inset 1px 1px 3px rgba(20, 20, 18, 0.2);
-moz-box-shadow: inset 1px 1px 3px rgba(20, 20, 18, 0.2);
-webkit-box-shadow: inset 1px 1px 3px rgba(20, 20, 18, 0.2);
border-radius: 17px; /*Bordas arredondadas dos links*/
-moz-border-radius: 17px; /*Bordas arredondadas dos links*/
-webkit-border-radius: 17px; /*Bordas arredondadas dos links*/
line-height: 24px;
padding: 5px 10px;
}
#cssmenu > ul > li.active a { /*Links que aparecem quando põe o mouse em cima*/
background: #FFA7CF; /*Cor do fundo*/
color: #fff; /*Cor das letras*/
}
#cssmenu .has-sub ul {
background: #FF76B4;
border: 1px solid #939974;
border-top: 0 none;
height: 0;
overflow: hidden;
padding: 0;
position: absolute;
opacity: 0;
top: 44px;
left: 0;
width: 200%;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
transition: opacity 0.2s;
}
#cssmenu .has-sub:after {
content: '';
display: block;
padding: 0 10px;
position: absolute;
bottom: -10px;
left: 0;
height: 10px;
width: 200%;
}
#cssmenu .has-sub:hover ul {
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
height: auto;
opacity: 1;
padding: 10px;
}
#cssmenu .has-sub li,
#cssmenu .has-sub li a {
padding: 0 5px;
width: 100%;
}
#cssmenu .has-sub li {
margin: 8px 0;
}
#cssmenu .has-sub li a {
color: #fff;
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
}
#cssmenu .has-sub li a:hover {
color: #FFF;
Visualize, salve e pronto !
Agora as inspirações...
Lindas né ? Gostaram do post ? O que acharam ?
Bejinhoss até a próxima postagem
Adorei as inspirações e o menu é mt cute ♥
ResponderExcluirSeguindo seu blog =)
http://sonhando-porai.blogspot.com.br/
Obg, hehe
ExcluirVou seguir o seu de volta !! Beijinhoss ♥
O menu é muito cute :3, adorei as imagens, são muito lindas.
ResponderExcluirBeijos ♥ || Paradise Kawaii
Obgg flor, obg pela visita tbm. beijinhoss ♥
ExcluirAdorei o menu, muito lindo, e as imagens também ♥
ResponderExcluirKiss
With You || Imperfectous
Obggg, bjs ♥
ExcluirAmei as inspirações ♥
ResponderExcluirBeijos, beijos!
Dearitgirl.blogspot.com.br
Obg flor beijoss ♥♥
ExcluirO menu é lindo e essas imagens são lindas e inspiradoras.
ResponderExcluirSweet of Cherry
Obgg hehe ♥
ExcluirLindas imagens!
ResponderExcluirO menu ficou uma graça :D
Beijos, beijos,
http://belezademarina.com
Obgg flor, beijinhoss ♥
ExcluirLindas estas inspirações, mas nessa coisa de menu eu confesso que fiquei meio boiando, não entendo nada haha
ResponderExcluirLinda, acabei de upar um vídeo novo lá pro blog, confere lá <3
http://lladodedentro.blogspot.com.br/2014/01/um-papo-sobre.html
beijo beijo no coração!
Obg amr, entendo euheuehuheue
ExcluirTo indo la, beijooss ♥
que menu mais lindo! adorei! pena que não sei mudar haha quem fez pra mim deixou tudo certinho, mas adorei! arrasou! e esses imagens que fofas *-*
ResponderExcluirBeijinhos,
Blog Manias de Beauté! - Fan Page
Adorei esse Menu nunca vi em blogs eu acho .
ResponderExcluirAmei as fotografias inspiradoras , amo ♥
Te convidei para responder uma tag lá no meu blog vem ver ? http://garotaantenadabr.blogspot.com.br/
Beeijos ♥
Amei o tutorial ! E as inspirações são divas <3
ResponderExcluirUm beijo meu , Miih . <3
Visita ? | Colorful Rainbow
Obrigadinha floor, beijinhos e já visiteii ♥
ExcluirMuito bom o tutorial, antes eu usava menus por CSS mas hoje prefiro algo mais simples haha *-* Adorei as fotos, dão grande inspiração mesmo! Muito lindaas!
ResponderExcluirBeijoos, Paula. ♡
http://sweetness-p.blogspot.com.br/
Obg, ah sim haha são mesmo obg. Beijinhoss
ExcluirAdorei o menu! E também amei as ilustrações =)
ResponderExcluirCounting Feelings | counting-feelings.blogspot.com.br
Obrigada flor, beijinhoss ♥
ExcluirAmei o menu e as imagens, são perfeitas!!
ResponderExcluirGostei muito do seu blog, estou seguindo retribui?
Aceita afiliação? Responde no meu blog...
http://mundoda-rachel.blogspot.com.br/
Oi flor, obrigadaa e ja estou seguindo o seu de volta aceito sim vou la jaja !!
ExcluirAmei o menu >3< Adorei as imagens, essa do reloginho branco tá uma fofura :33
ResponderExcluirUnskilled ♡
Obg, ahamm oinc oinc :3 eueuheuheue beijoss ♥
ExcluirSALVANDO NOS FAVORITOOOOOS, adoro menus assim. E uso bastante ás vezes. Adorei as imagens tbm <33
ResponderExcluirBeijos, @wonderlandwd
official-wonderland.blogspot.com
Obrigadaaaaa flor, hehe
ExcluirBeijãoo ♥
O menu é bem fofinho, mais pra loja mesmo :3
ResponderExcluirBeijo e fica com Deus!
Senhorita Imperfeita
Aham rss Beijos vc também fica com Ele ♥
ExcluirSe eu não amasse o meu, eu usaria :))
ResponderExcluirhttp://historiaimperfeita.blogspot.com.br/
Ah sim.. euhuehue
ExcluirBeijoss ♥
Ah, que lindo o menu!
ResponderExcluirAs fotografias nem se fala, né?
Adorei a sua visita, espero que volte sempre!
Seu blog é lindo e bem interessante, já estou seguindo :)
Beijô!
minhassingularidades.blogspot.com.br
Obrigadaa, hehe volto sim !!
ExcluirOk beijosss
Owwwn, adoooro esse tipo de blog com assuntos de blogs, inspiração muito show esse template viu gata. Abraços e seguindo!
ResponderExcluirhttp://seilumine.blogspot.com.br
Eu também hahaha mt obgg.
ExcluirBeijoss ♥
Adorei o menu, parabéns !
ResponderExcluirConheça:
coisasuteisoufuteis.blogspot.com.br
Vou adorar te retribuir, bjs
Obgg, to indo lá já :) beijoss ♥
ExcluirAdorei lindona, todos lindos <3 salvei algumas imagens aqui
ResponderExcluirTo seguindo aqui flor, pode retribui?
http://ingridegoes.blogspot.com.br/
Obggg ok ok, vou seguir de volta obg por visitar e seguir, beijoss ♥
ExcluirEu nunca tinha visto esse menu também, muito legal. Gostei das inspirações heuheyu E gostei do seu blog XD
ResponderExcluirvisita? maraudersmapbr.blogspot.com