• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

6 de março de 2014

Menu Occulted - 2 Modelos

Olá gente
como vão vocês? eu estou totalmente sem assunto para o post, mas sei que seria terrível chegar aqui e postar o tutorial sem ao menos dizer como estou e a burocracia toda, sendo que tem uns Tumblr's que são assim, chegam, postam e pá, mas isso não é um tumblr, é um blog...então n-
Queria avisar para vocês que o HTML Project já abriu as inscrições para a segunda fase, não estou fazendo parte dele por falta de tempo, então receio não poder contribuir, mas estou avisando já que o projeto é tão agradável de se participar, então, se vocês quiserem: (www)

Eu estava com vontade de fazer algo, algum menu e talz, então fiz dois modelos de um menu oculto, dei o nome de menu occulted - preview aqui -  para ficar mais chique - inglês deixa tudo mais chique - e também porque se eu colocasse em húngaro, ninguém ia entender '-' UAHUA' ah, não liguem para o blog de preview...

coloque leia mais porque "a aventura vai começar..." hehe ~
- Se você ainda não tem a fonte silkscreen instalada no seu blog, cole o link abaixo, acima de ]]></b:skin>

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); } 
E agora, vamos aos códigos dos menus, ambos os códigos deverão ser colados em um HTML / Javascript.

Código do Menu 1:
<select style="border: 0px none; padding: 3px; font-family: silkscreen;font-size: 8px;width:196px; -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px;text-decoration: none;
box-shadow: inset 1px 1px 0 #f7eaed;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
background-color: -moz-linear-gradient(top, rgba(255,232,236,1) 84%, rgba(255,217,225,1) 84%);
background-color: -webkit-gradient(linear, left top, left bottom, color-stop(84%,rgba(255,232,236,1)), color-stop(84%,rgba(255,217,225,1)));
background: -webkit-linear-gradient(top, rgba(255,232,236,1) 84%,rgba(255,217,225,1) 84%);
background-color: -o-linear-gradient(top, rgba(255,232,236,1) 84%,rgba(255,217,225,1) 84%);
background: -ms-linear-gradient(top, rgba(255,232,236,1) 84%,rgba(255,217,225,1) 84%);
background: linear-gradient(to bottom, rgba(255,232,236,1) 84%,rgba(255,217,225,1) 84%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8e9ec', endColorstr='#f7eaed',GradientType=0 );
color: #e1b1bc;
text-shadow: 1px 1px 0 #fafafa;
border-radius: 2px;
margin-bottom: 3px;
}; border: 1px solid #ecced5; background-color: rgb(242,220,225);" onchange="location.href=this.options[this.selectedIndex].value;">
<option value="link" />Nome
<option value="link" />nome
<option value="link" />nome<option value="link" />nome
<option value="link" />nome
</select>

Código do Menu 2:

<select style="border: 0px none; padding: 5px; font-family: silkscreen;font-size: 8px;width:196px; -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px;text-decoration: none;
color: #fff;
text-shadow: 1px 1px 0px #abacac;
background: #c8c9c9;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-box-shadow: inset 0px 0px 4px #abacac, 2px 2px 0px #ececec;
-moz-box-shadow: inset 0px 0px 4px #abacac, 2px 2px 0px #ececec;
-o-box-shadow: inset 0px 0px 4px #abacac, 2px 2px 0px #ececec;
padding: 1px 3px 1px 3px;" onchange="location.href=this.options[this.selectedIndex].value;">
<option value="link" />Nome
<option value="link" />nome
<option value="link" />nome<option value="link" />nome
<option value="link" />nome
</select>
Espero que tenham gostado dos modelos, e já já trago post de look book inspiration e o Review de um blog cute pacas. Beijos de jujuba ~
Jake | via TumblrJAKE!Jake | via Tumblr

26 comentários:

  1. Que lindo o menu! Geralmente esses menus suspensos são feinhos, mas você conseguiu deixar ele lindo!

    O cabelo da sua amiga deve ser lindo! E eu não vou deixar de usar só porque é modinha não, já que eu gostava muuuito tempo, então acho que o que importa é estarmos felizes em usar algo.
    "Já que você tem cara de diva decidida" hsauhsuahsuahsuhau É só a cara mesmo Megan rs

    Já coloquei o AN nos afiliados!

    http://adolescentenerd.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ain valeu, sendo que eu acho esses menus umas gracinhas, até aqueles com cores padrão do tipo azul e branco UHAUEA'

      Ah, mas você é super <33

      Excluir
  2. Eu tambem participaria mas , como voce disse ne .. falta tempo -q
    Achei lindo o menu , principalmente o rosa *u* I Love Pink >3<


    Geekegirlie.blogspot.com || 괴짜와 아가씨

    ResponderExcluir
  3. Menus muito lindooooooos mesmo! Parabéns :D

    desiningblog.blogspot.com

    ResponderExcluir
  4. Que lindos esses menus, vou usá-los no meu próximo layout. JAKE <3 U3U
    [www] ~(^з^)-☆ ♥♥

    ResponderExcluir
  5. Nyaaah o primeiro modelo é tão ♥

    www.wh-asia.net

    ResponderExcluir
  6. Menu lindo!!! *000000000000* <333

    alive-html

    ResponderExcluir
  7. Eu adorei esses menus, gente *-* Gosto muito desse tipo de menu, deixa super organizado.

    Com certeza eu irei usar o segundo modelinho no meu próximo lay <3 Parabéns Megan =3

    ResponderExcluir
  8. Ótimo tutorial.
    the-insanegirl.blogspot.com.br

    ResponderExcluir
  9. Ótimo tutorial , e o resultado é lindo =33

    ( Seguindo ) Bjos ~ Poderia retribuir a visita ? Gave Crazy

    ResponderExcluir
  10. Aiiww q menus mais fofos gente ... kk normalmente são tão simples e feinhos kkkk e vc reformou e deixou as zinimiga de queijo caido heuheue

    Aceita afiliação com meu pequeno bloquito seus diwos lindos ... ? *--------*

    Beijos

    || editionskaty.blogspot.com.br ||

    ResponderExcluir
  11. nyan nyannn, que meigo! não sei pq mas esse menu (pelo menos o 1) me lembrou pastel goth, acho que é a cor *q* nyan, já adicionei aos favoritos para tentar usar no novo lay! hungaro? o3o hehe
    Chu <3
    mutant-paradise.blogspot.com

    ResponderExcluir
  12. Menu muito lindo! *o*

    Aceita afiliados?
    http://girlofdreams123.blogspot.com.br/

    ResponderExcluir