Menu escondido com jQuery








E ai kengarada (adoro chamar vocês de kengos) como vão? (^-^*)/ Sumida? Não né? Ninguém reparou hahaha Sem choromelas e sem mimimi, não quero falar pela milésima vez da faculdade, trabalho e o quinto dos inferno, porque não e porque é chato! Cara, o que é esses debuts tudo que eu to perdendo? Cada piscada um debut, um bafão e menos seguidores (pra variar) O que são aquelas coisas fofas do NCT Dream? Vontade de morder tudo de tão fofos, niver do Kookie né? E eu perdendo tudo ┰ω┰ não é justo!

E o single da CL? Debut? Música promocional? Teste de mercado? Teste de fama? Que raios que foi esse lançamento? É o debut americano? Ainda não? Que merda, porra! Eu quero saber YG! Debuta logo essa guria pelo amor de Deus hahahahaha Se bem que com este lançamento mesmo ela não sendo tão conhecida ainda nos EUA ela estava na posição 15º do ranking da Bilboard. Quem ai curtiu a música? Eu escuto todos os dias desde o lançamento e  não enjoo. Agora comeback do 2ne1 que é bom, nada né? U.U

EU demorei mas trouxe esse tutorial, alguns leitores haviam me pedido mas não tinha postado pela falta de tempo. Então sem delongas e vamos ao tutorial? Mas antes, prestem muito bem atenção certo? (^-^)/


Vá até o seu modelo e clique em editar html, dentro procure por:]]></b:skin> e acima dele cole o código abaixo:

.down {
height:0px;
-webkit-transition:all 0.6s;
-moz-transition:all 0.3s;
-ms-transition:all 0.6s;
-o-transition:all 0.6s;
transition:all 0.6s;
}
.up {
height:550px;
padding-left:10px;
padding-right:10px;
z-index:10000000000;
-webkit-transition:all 0.6s;
-moz-transition:all 0.3s;
-ms-transition:all 0.6s;
-o-transition:all 0.6s;
transition:all 0.6s;
}
#naver {
width:17%;
z-index:10;
margin-left:-60px;
bottom:0;
position:fixed;
background-color:#fff;
}
#cont {
width:215px;
font-size:15.1px;
font-family: calibri,cursive;
color:#999;
text-align: justify;
padding:7px 7px 7px 7px;
letter-spacing: 1px;
}
.menu1{
padding-top:4px;
padding-bottom:4px;
padding-left:4px;
padding-right:4px;
background:#fff;
border: solid 5px #BFC9D3;
font-family: Calibri, cursive;
font-weight:300;
font-size:14px;
width:113px;
line-height:18px;
text-transform:uppercase;
letter-spacing:0px;
text-align:center;
color:#999;
display:inline-block;
height:18px;
margin:1px;
text-shadow: 1px 1px 1px #;
margin-bottom:px;
cursor:hand;
}

Para entender melhor sobre este menu, a parte do menu que vocês irão clicar fica onde está escrito menu1 nele vocês irão editar a cor do fundo, a fonte a ser usada e o que vai escrito na frase de ínicio. Para editar o corpo do menu que aparece vocês irão em #naver nele vocês irão editar o tamanho, a margem, se você quiser na esquerda mude os valores até chegar onde quer ou se quiser para a direita apenas mude de left para right e poderão mudar a cor do fundo. Para mudar a parte dentro do corpo vocês irão em #cont nele você irá mudar a fonte a ser usada se quiser escrever algo, o acolchoamento (padding), a cor da fonte e o texto em geral. Para editar a altura que ele sobe vocês irão em #up e nele a única coisa que irão mudar é a altura em que o menu irá aparecer e nada mais. E no #down vocês não irão mudar nada certo?

Depois de tudo editado e salvo você irá em </head> e acima dele irão colocar o código Jquery para fazer o efeito do menu funcionar:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
  $(&quot;.menu1&quot;).click(function(){
    $(&quot;.down&quot;).toggleClass(&quot;up&quot;);
  });
});
</script>
E por último adicione um gadget java script e dentro cole o código abaixo:

<div style="position: fixed; margin-top: 0px; margin-left: -370px;z-index:9999;">
<a class="menu1">Hide menu</a>
<div class="down"id="naver">
<div id="cont">
Olá, aqui você irá escrever o que quer, sobre seu blog, suas metas, seus desejos, agradecimentos, créditos ou o que quiser. O céu é o limite!
</div></div></div>
Querem ver os perfis de quem posta aqui? cliquem na imagem᠉
Continue

6 comentários:

  1. RAINHA RÔH! Tudo de boa na lagoa? Comigo tá o cocozin de sempre. Uma amiga minha tá mal aí eu fico mal contigo ela.
    Easa tua faculdade e esse teu trabalho tão te consumindo né? Fighting, Rôh!
    MEODEOS esses DEBUTS! Eu nunca iria descobrir que o NCT Dream era uma sub-unit nova! Comecei a ouvir os meninos pelo Chewing Gun. Esse aniversário do Junkú tá babado né non. Essa questão da CL *RAINHA* é que esse é um tipo de "Debut Americano", tanto que temos a presença de Ice Cube, se não me engano, que é um famoin dos states. COMEBACK DA 2NE1? KERO! Ficou sabendo que uma das meninas do 4MINUTE, que não me recordo qual é, já produziu altas coisas para um Debut e que a MINZY tem canal no V LIVE? ADORO

    AAAH! VOCÊ FEZ O TUTORIAL QUE EU PEDI! *ㅅ*
    Adoro esse menu do amor. Obrigado por ter feito, como posso retribuir? ㅋㅋㅋ Eu acho jQuery muito chique e sofisticado, parabéns por saber abiga.

    Tchauzinho 《 lh

    ResponderExcluir
  2. Deve estar lindo, pelo fato de estar no celular, realmente não consigo ver, mais você está sempre de parabéns!!!

    ResponderExcluir
  3. Adoramos ser chamados de kengos (ke?), haha! Eu vou bem, Roh, estava com saudade daqui, dos seus posts lacradores e principalmente de você. Kpop tá que tá só tiros, um monte de debut, um monte de comebacks e eu no chão. Mano, CL é rainha demais, representa muito e eu não entendo todo o hate que ela está levando apenas pelo fato de ter dado uma "americanizada" no estilo. Eu adorei a batida de Lifted, é muito viciante. Ela é tipo a Minaj da Coréia, né non? Queen.

    Adorei o menu. É ótimo pra avisos, né não? Usaria muito, se é que não vou usar num próximo menu... Sempre lacre seus códigos, adoro.

    Carinhosamente, Jheni.
    [empire k.] [written feelings] [stupide]

    ResponderExcluir
  4. BROTEI!~
    Eu estou bem fora da blogosfera, tipo, nem tô comentando mais *decepcionante*, ainda fslta responder trocentos comentários no meu blog, toda atrasada, e nem é pir falta de tempo -q A cada piscada a gente leva mais um tiro :'D Eu achei os moços do NCT Dream uns fofonhos, eles vieram combum conceito bem diferente do que das outras units. Twitter é a fonte que me faz saber do que tá acontecendo no mundo do capopi, tá me fazendo ser bem mais trouxa que já sou, mas é a vida :v Ah, eu vi um MV da CL, o Lifted (talvez seja o único? talvez, não sei), não é uma música que eu vá lá escutar, mas tem uma batida legal :v

    Eu nunca tinha visto esse menu antes, mas ele é muito amorzinho, adorei ele, quem sabe eu uso num próximo layout? Vivo fazendo layouts mesmo, nem dúvido, embora eu esteja tentando, apenas tentando, parar de fazer layouts com frequência. Enfim, até a próxima mona, um dia volto pra usar esse menu seduzente e.e ADIOS, MONA, FUIE~ coldheart! ヽ(´▽`)/

    ResponderExcluir
  5. Olá Roh <33 Adoro seus tutos, são sempre bons e ajudam muito. Eu vi o solo da CL a música ficou boa. Pois é né comeback de 2NE1 não tem. Mas quem sabe uma hora. Não sei o que eles irão fazer porque a Minzy saiu, será que botariam uma nova integrante?

    Achei legal a ideia do menu, parabéns pela criação dele! O tutorial foi bem explicadinho obrigada por isso. <33

    ┈━═☆Até
    O Snack Cheese é a queijolândia~✧ | Temos tintas e penteados! ✄ Venham, o Snack Cheese virou salão ♥ ฅ(^T^)

    ResponderExcluir
  6. Muito obrigada pelo tutorial! Estou usando esse e outros. Seu blog é maravilhoso. *-*

    www.tainaramacedo.com

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)

Layout e codificação por Roh A.Ramos Os blogs que mais ajudaram com os tutoriais foram: CHIHDVCA Tecnologia do Blogger ♡ 2012 a 2017