⋮ 𝐺𝑎𝑟𝑜𝑡𝑎 𝑛𝑜 𝑀𝑢𝑛𝑑𝑜 𝐻𝑡𝑚𝑙 ⋯

Olá gentchi, buenas notches como vão? Tudo certo por ai? Domingo quase acabando e eu perdi só uns 40 minutos para achar uma imagem da Rosé que tivesse uma boa qualidade ¬¬ Eu sou muito chata com imagens e qualidade e as vezes demoro uma cara para postar só porque não achei uma imagem decente para por aqui, então, eu demorei mas encontrei hehe. Falando sobre postagens, eu fiz 3 em junho e acho que é uma quantidade até boa para quem estava ausente, poderia ter postado mais mas não deu tempo mesmo e outra que acredito que não tem necessidade de postar tanto sendo que não tem pedidos na minha ask, então vai na sorte.

Gente, semana passada foi uma semana bem agitada, com tantos acontecimentos, tantas situações que parece que foram ~~5 dias em um só~~. Não irei falar sobre tudo o que aconteceu mas trarei um resumo breve sobre, é que uma coisa que eu descobri e que eu tenho para falar para vocês e esta coisa é: Somos muito mais do que imaginamos, nunca podemos ficar pensando que não somos ninguém e que não somos importantes, ledo engano meus caros, ledo engano. Todos temos algo do que se orgulhar, seja com um dom, uma característica que seja única, ou uma habilidade que talvez só você tenha e dai por diante.. Sabe porque estou escrevendo essas coisas?

Porque há alguns dias atrás eu estava bem na bad e não era em relação a mim ou minha vida pessoal, mas sim na minha vida profissional, fiquei pensando e achando várias coisas sobre meu desempenho e criando muitas paranoias que de início nem eram para ter passado pela minha cabeça. O que resultou eu ter chego nessas conclusões de que todos somos fodas em nossos próprios modos? Parei e foquei em todas as minhas qualidades e toda a minha entrega e como eu sou focada nas coisas, e isso foi o suficiente para eu perceber de como eu sou boa no que eu faço, e ~~todos nós temos que pensar assim~~, todos temos defeitos mas tenho certeza que as qualidades sobressaem as más.

Mudando de assunto agora, bixo vou te contar um negócio, esses menus não tão fáceis de criar não viu? Mesmo que dois modelos eu peguei a base no codepen rapaz, que coisa do capiroto hein? Eu não sei se a maioria dos efeitos não pegam por causa da nova interface do blogger ou se é por outros motivos mas juro que pra chegar nesses modelos que trouxe hoje eu tive que testar uns 50 efeitos, sério!

Bora verificar? LIVE PREVIEW ❤

Modelo 1

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

@font-face{
font-family:"Millennial Solstice";
src: url('https://dl.dropboxusercontent.com/s/lrp8h0hihiutysb/Millennial%20Solstice.otf');
}
.wish4 {
float:center;
background: url("https://i.imgur.com/tJ8pqGp.png")repeat;
border: solid 1px #eba7b9;
display:block;
width:90px;
height: 35px;
line-height:37px;
margin:1px;
margin-bottom:px;
margin-left:px;
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
font-size:18px;
font-family:'Millennial Solstice';
font-weight:300;
text-align: center;
text-transform:none;
letter-spacing:0px;
word-spacing:0px;
-webkit-transition-duration: .80s;
}
.wish4 a{
color:#fff;
text-shadow: 1px 1px 1px #df6586;
}
/*Menu topo by gnmh*/
@font-face{
font-family:"glowies3";
src: url('https://dl.dropboxusercontent.com/s/108jph3jeqb1zlb/ax.otf');
}
.topo1 a{
background: url("https://i.imgur.com/I1jJkao.png")repeat;
border: solid 1px #eba7b9;
width:90px;
height: 30px;
line-height:32px;
padding:0px 0px 0px 0px;
display: block;
opacity:1;
margin:-4px;
margin-top: 6px;
font-family:'glowies3';
font-weight: 0;
font-size: 12px;
color: #fff;
letter-spacing: 0px;
text-transform: uppercase;
text-shadow: 1px 1px 1px #df6586;
-webkit-transition: all ease-out 0.99s;
}
.topo1 a:hover{
color: #e0839d;
text-shadow: 1px 1px 1px #fff;
}

Para funfar os links, dentro de um gadget cole o código:

<div style="position: absolute; margin-left:10px; margin-top: 20px; z-index:999999999999999999999999999;">
<div class="wish4"><a href="javascript:animatedcollapse.toggle('cat')">Menu</a>
<div id="cat" style="display: none; " groupname="pets" speed="400">
<div class="topo1">
<div class="back1">
<center>
<a href="/"target="_blank" title="título">nome</a>
<a href="/"target="_blank" title="título">nome</a>
<a href="/"target="_blank" title="título">nome</a>
<a href="/"target="_blank" title="título">nome</a>
<a href="/"target="_blank" title="título">nome</a>
<a href="/"target="_blank" title="título">nome</a>
<a href="/"target="_blank" title="título">nome</a>
<a href="/"target="_blank" title="título">nome</a>
<a href="/"target="_blank" title="título">nome</a>
<a href="/"target="_blank" title="título">nome</a>
</center>
</div>
</div></div></div>

Modelo 2

Vá até o seu modelo e clique em editar html, dentro procure por </head> e abaixo dele cole o código da que irá fazer seu player funfar:

<script type="text/javascript">
$(document).ready(function() {
var Menu = {
body: $('.menu'),
button: $('.button'),
tools: $('.tools')
};
Menu.button.click(function () {
Menu.body.toggleClass('menu--closed');
Menu.body.toggleClass('menu--open');
Menu.tools.toggleClass('tools--visible');
Menu.tools.toggleClass('tools--hidden');
});
});
</script>

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

.menu{
position: relative;
margin: 15em auto 0 auto;
background: url("https://i.imgur.com/bRgH9U1.png")repeat;
border: solid 1px #88c8ce;
width: 66px;
border-radius: 50px;
transition: 0.3s border-radius ease-in-out, 0.3s height ease-in-out;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
.menu--closed{
height: 65px;
}
.menu--open{
height: 380px;
}
.button{
transition: 0.3s transform ease-in-out, 0.3s opacity ease-in-out;
cursor: pointer;
position: absolute;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 2.1em;
height: 1.5em;
left: 27%;
top: 20px;
opacity: 1;
}
.button:hover {
opacity: 0.6;
}
.button span{
width: 90%;
height: 3px;
background-color: #fff;
border: solid 1px #a3d2d6;
border-radius: 20%;
}
.menu--open .button{
transform-origin: center;
transform: rotate(180deg);
}
.tools{
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
height: 70%;
justify-content: space-between;
transition: 0.3s margin ease-in-out;
}
.tools .icon{
transition: 0.2s transform ease-in-out;
}
.tools .icon:hover{
transform: rotate(360deg);
}
.tools--hidden{
margin-top: 400px;
z-index: -100;
}
.tools--visible{
margin-top: 40%;
z-index: 100;
}

Para funfar os links, dentro de um gadget cole o código:

<div style="position: absolute; margin-left:125px; margin-top: -280px; z-index:999999999999999999999999999;">
<div class="menu menu--closed">
<div class="button">
<span> </span>
<span> </span>
<span> </span>
</div>
<div class="tools tools--hidden">

<a href="#"><img class="icon home" width="40" height="40" src="https://i.imgur.com/sLWmTxj.png">
</a>

<a href="#"><img class="icon message" width="40" height="40" src="https://i.imgur.com/e8gtnja.png">
</a>

<a href="#"><img class="icon tags" width="40" height="40" src="https://i.imgur.com/uERebNT.png">
</a>

<a href="#"><img class="icon follow" width="40" height="40" src="https://i.imgur.com/xwWD4iO.png">
</a>
</div>
</div>
</div>

Modelo 3

Vá até o seu modelo e clique em editar html, dentro procure por <head> e abaixo dele cole o código da que irá fazer seu player funfar.

<script type="text/javascript">
$(function() {
$(".menuzin").click(function() {
if ($("#navigation").hasClass("hidden")) {
$("#navigation").attr("class", "visible animated slideInLeft");
} else {
$("#navigation").attr("class", "hidden animated slideOutLeft");
}
$(this).toggleClass("open");
});
$("#navigation").click(function() {
if ($("#navigation").hasClass("visible")) {
$(".menuzin").toggleClass("open");
} else {
}
$(this).attr("class", "slideOutLeft hidden");
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
if ($("#navigation").hasClass("visible")) {
$(".menuzin").toggleClass("open");
} else {
}
$("#navigation").attr("class", "slideOutLeft hidden");
}
});
});
</script>

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

.menuzin {
background: url("https://i.imgur.com/O5m85KH.png")repeat;
border: solid 1px #eba7b9;
width: 45px;
height: 30px;
padding: 5px;
display: block;
cursor: pointer;
position: relative;
float: center;
right: px;
z-index: 1;
}
.menuzin span {
left: 17%;
top: 5px;
display: block;
cursor: pointer;
height: 3px;
width: 30px;
margin-bottom: 5px;
background: #fff;
box-shadow: 1px 1px 1px #d693a5, inset 1px 1px 1px #eee;
-moz-box-shadow: 1px 1px 1px #d693a5, inset 1px 1px 1px #eee;
box-shadow: 1px 1px 1px #d693a5, inset 1px 1px 1px #eee;
position: relative;
transform: rotate(0deg);
-webkit-transition: all ease-out 0.99s;
}
.hidden {
opacity: 0;
transition-delay: .5s;
pointer-events: none;
cursor: default;
}
.visible {
opacity: 1;
}
.menu.open span:nth-child(1) {
top: 20px;
background: #fff;
}
.menu.open span:nth-child(2) {
opacity: 0;
right: 100px;
background: #fff;
}
.menu.open span:nth-child(3) {
top: -10px;
background: #fff;
}
@font-face{
font-family:"glowies3";
src: url('https://dl.dropboxusercontent.com/s/108jph3jeqb1zlb/ax.otf');
}
#navigation {
background: #fff;
box-shadow: 1px 1px 1px #dbb9c2, inset 1px 1px 1px #eee;
-moz-box-shadow: 1px 1px 1px #dbb9c2, inset 1px 1px 1px #eee;
box-shadow: 1px 1px 1px #dbb9c2, inset 1px 1px 1px #eee;
width: 200px;
height: 90px;
position: absolute;
left: 0px;
top: 50px;
}
.nav {
background: url("https://i.imgur.com/bViZwu6.png")repeat;
border: solid 1px #eba7b9;
display: flex;
justify-content: center;
text-align: center;
-webkit-transition: all ease-out 0.99s;
}
.nav a{
font-family:'glowies3';
color: #fff
text-shadow: 1px 1px 1px #c9728a;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: all ease-out 0.99s;
}
.nav a:hover {
color: #e28f9c;
text-shadow: 1px 1px 1px #fff;
letter-spacing:3px;
-webkit-transition: all ease-out 0.99s;
}
ul {
list-style-type: none;
}
ul li a {
text-decoration: none;
}
.slideInLeft {
-webkit-transition: all ease-out 0.99s;
}
.slideOutLeft {
-webkit-transition: all ease-out 0.99s;
}

Para funfar os links, dentro de um gadget cole o código:

<div style="position: absolute; margin-left:228px; margin-top: -38px; z-index:999999999999999999999999999;">
<div class="menuzin">
<span></span>
<span></span>
<span></span>
</div>
<div id="navigation" class="hidden">
<div class="nav">
<ul>
<li><a href="http://google.com" target="_top">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>

E voilá mores, os menus são editáveis porém não recomendo a mexer nos códigos onde fazem funcionar os efeitos do toggle ( efeito de clicar e aparecer algo ), vocês podem editar as cores do fundo, links, fontes etc.. Qualquer coisa vocês podem e devem me perguntar sobre ok? Beijocas =3

2 comentários:

Lena Jack Black (Oficial)julho 30, 2021
Eu já tinha visto seu tutorial, e acabei esquecendo de comentar.
O terceiro menu foi totalmente maravilhoso. Tô pensando futuramente fazer um novo layout, e talvez usar um desses menus. Quero algo mais elaborado como os seus.
ResponderExcluir
Respostas

Adicionar comentário

Olá! Se chegou até aqui é porque leu toda a postagem certo? Não? Poxa, comenta antes de sair e por favor, tente ler todo o conteúdo do post pois, por mais que a maioria do que eu escrevo seja sobre css e html, eu também comento sobre vários assuntos no mesmo post.

E abaixo, algumas regrinhas para seguir e fazer um comentário bem maroto:

1 - Comente apenas se sentir a vontade e queira.

2 - Seja educado, não use palavras inapropriadas, respeite os outros comentários e opiniões alheias.

3 - Se eu fico feliz quando comentam algo? Ô se fico, na verdade adoro!

4 - Antes de sair além de comentar deixe o link do seu bloguinho caso queira pois assim conseguirei lhe visitar e deixar um recadinho.

5 - Quer ser afiliado ao blog? Só pedir nos comentários ou na própria página direcionada a isto, estou precisando de afiliados mesmo rsrs.

Obrigada por tanto e obrigada por me acompanhar até aqui, fico muito feliz e grata pela sua companhia!

Roh ~

{ 환영 G N M H 사랑 }

25.7.21

Modelos de menu de clique

2 comentários: