Image Map

Biquínis

Leia mais

Looks All Jeans

Leia mais

DIY: Cropped Boho

Leia mais

- Tutorial: Menu CSS + Inspirações

     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. 
Clique em modelo image editar HTML image e procure por:

]]></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 

41 comentários:

  1. Adorei as inspirações e o menu é mt cute ♥
    Seguindo seu blog =)

    http://sonhando-porai.blogspot.com.br/

    ResponderExcluir
  2. O menu é muito cute :3, adorei as imagens, são muito lindas.

    Beijos ♥ || Paradise Kawaii

    ResponderExcluir
  3. Adorei o menu, muito lindo, e as imagens também ♥
    Kiss
    With You || Imperfectous

    ResponderExcluir
  4. Amei as inspirações ♥
    Beijos, beijos!

    Dearitgirl.blogspot.com.br

    ResponderExcluir
  5. O menu é lindo e essas imagens são lindas e inspiradoras.

    Sweet of Cherry

    ResponderExcluir
  6. Lindas imagens!
    O menu ficou uma graça :D

    Beijos, beijos,
    http://belezademarina.com

    ResponderExcluir
  7. Lindas estas inspirações, mas nessa coisa de menu eu confesso que fiquei meio boiando, não entendo nada haha

    Linda, 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!

    ResponderExcluir
  8. 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 *-*

    Beijinhos,
    Blog Manias de Beauté! - Fan Page

    ResponderExcluir
  9. Adorei esse Menu nunca vi em blogs eu acho .
    Amei as fotografias inspiradoras , amo ♥
    Te convidei para responder uma tag lá no meu blog vem ver ? http://garotaantenadabr.blogspot.com.br/
    Beeijos ♥

    ResponderExcluir
  10. Amei o tutorial ! E as inspirações são divas <3

    Um beijo meu , Miih . <3
    Visita ? | Colorful Rainbow

    ResponderExcluir
  11. Muito 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!

    Beijoos, Paula. ♡
    http://sweetness-p.blogspot.com.br/

    ResponderExcluir
  12. Adorei o menu! E também amei as ilustrações =)

    Counting Feelings | counting-feelings.blogspot.com.br

    ResponderExcluir
  13. Amei o menu e as imagens, são perfeitas!!
    Gostei muito do seu blog, estou seguindo retribui?
    Aceita afiliação? Responde no meu blog...

    http://mundoda-rachel.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi flor, obrigadaa e ja estou seguindo o seu de volta aceito sim vou la jaja !!

      Excluir
  14. Amei o menu >3< Adorei as imagens, essa do reloginho branco tá uma fofura :33

    Unskilled ♡

    ResponderExcluir
  15. SALVANDO NOS FAVORITOOOOOS, adoro menus assim. E uso bastante ás vezes. Adorei as imagens tbm <33

    Beijos, @wonderlandwd
    official-wonderland.blogspot.com

    ResponderExcluir
  16. O menu é bem fofinho, mais pra loja mesmo :3

    Beijo e fica com Deus!
    Senhorita Imperfeita

    ResponderExcluir
  17. Se eu não amasse o meu, eu usaria :))

    http://historiaimperfeita.blogspot.com.br/

    ResponderExcluir
  18. Ah, que lindo o menu!
    As 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

    ResponderExcluir
  19. Owwwn, adoooro esse tipo de blog com assuntos de blogs, inspiração muito show esse template viu gata. Abraços e seguindo!
    http://seilumine.blogspot.com.br

    ResponderExcluir
  20. Adorei o menu, parabéns !
    Conheça:

    coisasuteisoufuteis.blogspot.com.br

    Vou adorar te retribuir, bjs

    ResponderExcluir
  21. Adorei lindona, todos lindos <3 salvei algumas imagens aqui
    To seguindo aqui flor, pode retribui?
    http://ingridegoes.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obggg ok ok, vou seguir de volta obg por visitar e seguir, beijoss ♥

      Excluir
  22. Eu nunca tinha visto esse menu também, muito legal. Gostei das inspirações heuheyu E gostei do seu blog XD

    visita? maraudersmapbr.blogspot.com

    ResponderExcluir