JUNGKOOK
EUPHORIA - Wonder
[Welcome]
to garota no mundo html

olá xuxuzinhos, tudo bem? sintam-se a vontade e sejam bem vindos ao meu cantinho, este bloguinho foi criado em julho de 2012 e até hoje é direcionado a área de html e css. Tento ser criativa com códigos, sempre tento criar algo diferente. e se desejarem algo, por favor, não exitem e peçam pela minha ask ok? beijinhos bem doces..

segunda-feira, 12 de fevereiro de 2018

Menu suspenso para textos


Boa noite galera tudo bem? (⌯⌅) Confesso que estou com uma preguiça no coro e não sabia o que ia postar primeiro, estou tentando entregar os pedidos perdidos da ask que fazia tempinho que eu não tinha atendido. Cara do céu, esses 3 dias em casa eu estou apenas comendo, assistindo filmes e animes, socorro, irei virar um botijão de gás, na verdade meio que já sou um né..Vão me dizer que comer é ruim? Comer é tudo de bom, umas das melhores coisas da vida hehe...

Esse menu é um que foi usado no layout free minimalista, me pediram para criar um menu parecido porém na hora do clique queriam um texto, eu meio que sou teimosa e mesmo assim deixei uma aba para links caso a pessoa queira para algo, ou ela pode tirar, vai da escolha de vocês. Esse menu é tão fofo e tão prático, facilita tanto as coisas. Espero que gostem e façam bom uso dele, eu acho esses tipos de menus legais em blogs de textos ou blogs pessoais, economiza espaço.

LIVE PREVIEW ٩(♡ε♡ )۶

Para usar o menu vá até o seu modelo e clique em editar html e dentro procure por: ]]></b:skin> e quando achar acima dele cole o código:


#back {
position:fixed;
border-radius:1px;
background:#ffffff;
width:151px;
box-shadow: 1px 1px 1px #eee, inset 1px 1px 1px #eee;
-moz-box-shadow: 1px 1px 1px #eee, inset 1px 1px 1px #eee;
box-shadow:  1px 1px 1px #eee, inset 1px 1px 1px #eee;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:7px;
}
#backim {
margin-bottom:9px;
margin-top:-1px;
}
#backim img {
border:solid 1px #d2dadf;
width:150px;
height:auto;
opacity: 0.9;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
}
#backim img:hover {
border-radius:1%;
-webkit-transform: rotate(-360deg); transition-duration: 2s;
opacity: 0.9;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
}
.stuff{
font-family: 'calibri', sans-serif;
width:auto;
text-align:center;
font-size:12px;
text-transform:uppercase;
letter-spacing:1.5px;
margin-top:-6px;
}
.stuff a{
background:#E8E8E8;
font-family: 'calibri', sans-serif;
font-size:12px;
display:block;
margin-bottom:2px;
padding:4px;
color:#fff;
text-shadow: 1px 1px 1px #BAC7CF;
}
.stuff a:hover {
margin-bottom:2px;
background:#;
letter-spacing:0px;
}
#description {
margin:20px 0;
}
#con {
left:45%;
margin-top:220px;
margin-left:420px;
position:absolute;
}

Para funcionar o efeito do texto aparecer em um clique, vá até o html de novo e procure por  </head> e acima dele cole o seguinte código:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='//dl.dropbox.com/u/35546279/qTip_pinkskulldesign.com_.js' type='text/JavaScript'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='//static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/>
<script src='//static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js' type='text/javascript'/>
<script src='//static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.myg&quot;).hide();
$(&quot;.bts&quot;).click(function(){
$(this).next(&quot;.myg&quot;).slideToggle(&#39;fast&#39;);
}); }); </script>

E para usar os links, adicione um gadget java script e dentro cole o seguinte código:

  <div id="con">   
<div id="back">
<div id="backim"><a href="/" title="hello"><img src="https://i.imgur.com/vOK7YPR.png" /></a></div> 
<div class="stuff">
<a class="bts">about</a>
<div class="myg">
<p style="padding-left:3px;text-transform:lowercase;font-size:10px; color: #ACACAC;">Uma descrição fofa e breve sobre você ou escreva o que quiser aqui nesta caixinha de texto.</p>
</div>
<a class="bts">+ links</a>
<div style="margin-top:-4px;"class="myg">
<p>
<a href="/">link</a>
<a href="/">link</a>
<a href="/">link</a>
<a href="/">link</a>
</p>
</div>
</div>
</div>
</div>

Agora vou explicar onde vocês podem mexer e o que podem modificar:

Para mexer no tamanho da caixa do menu vocês procurem por #back aqui vocês podem mudar o tamanho da caixa e a cor do fundo.

Para mexer na imagem do topo procurem por #backim img aqui vocês podem mudar a cor da borda da imagem por algum efeito de transição etc.. No tamanho vocês tem que deixar o mesmo tamanho do corpo, como está ali em cima.

Para mexer nos links procurem por .stuff aqui vocês irão por a fonte que desejarem e o tamanho.

Para mexer no fundo dos links procurem por .stuff a aqui vocês podem modificar a cor do fundo, a sombra de texto e o tamanho da fonte.

E para mudar a o menu de lugar procurem por #con e onde está margin-left e margin-top é onde vocês irão por a altura que querem o menu.

2 comentários:

  1. Oi Roh! Tudo bem?
    Eu também adoro comer, mas a minha mãe não me deixa comer de tudo porque se não na hora do almoço/janta eu não como nada jkjdfhgd
    Eu achei esse menu muito fofinho, acho que usaria sim, com toda certeza hihi ♥♥♥
    Até~~

    Margineus

    ResponderExcluir
    Respostas
    1. Tudo sim amore, amooo comer mulier, comer é vida Jesuise haha Olha eu não sou de comer tudoooo o que eu vejo pela frente mas se tenho vontade de comer algo eu vou lá e como, não passo vontade! Eu amo esse menu, acho fofo e super prático >.<

      Beijos =3

      Excluir

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^)