Tutorial: Menú Folders

¡Hola! ¿Qué onda? Espero que estén muuy bien <3. Yo me encuentro cada vez mejor, y con más energía, lo cual me pone muy feliz ♡. Estoy organizando mis cosas y mis tiempos para empezar proyectos que tenía pensados desde hace muucho tiempo, así que a ponerme las pilas para continuar :D. Hoy les traigo un tutorial de un menú que hice inspirándome en uno que había visto en el blog de annyz, solo que lo cambié a estilo folder {carpetas} así que bueno! Espero que les guste y comencemos con el tutorial :)


Menú Folders
Todos los códigos de los menús se colocan en un gadget HTML/Javascript :) Editas los links a tu preferencia <3
1
 <style type="text/css">
#gb{
position:fixed;
top:140px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbcontent{
float:left;
}
</style>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<a href="LINK"><img src="https://1.bp.blogspot.com/-p6ygGO-QkM0/WjRCbmNMrDI/AAAAAAAAJEw/n0TjpUaXHXcV-eKsenFwPOBtfw9rwswqgCLcBGAs/s1600/a.png" width="100" border="0" height="120" /></a><br />
<center><a href="LINK"><img src="https://1.bp.blogspot.com/-sR-o8suaoQ4/WjRCbuu3nxI/AAAAAAAAJE0/LFDBhNoWgNAs7aor0ZE7Qa-g2m0Fs8kXQCLcBGAs/s1600/aa.png" width="100" border="0" height="120" /></a><br />
<a href="LINK"><img src="https://4.bp.blogspot.com/-GryLob-Fgq0/WjRCb5WRVpI/AAAAAAAAJE4/gFKGj72xlHg9L9M-NgckHC0DWy8Ic1iowCLcBGAs/s1600/aaa.png" width="100" border="0" height="120" /></a><br />
<a href="LINK"><img src="https://2.bp.blogspot.com/-fhk6vSok5OY/WjRC26HNcKI/AAAAAAAAJFA/58k9LHYgpngI_kz_qzUvx0b83Lx0aPyCgCLcBGAs/s1600/aaaa.png" width="100" border="0" height="120" /></a><br /></center>
<div style="text-align:right">
<a href="javascript:showHideGB()">
</a>
</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (100-gb.offsetWidth).toString() + "px";
</script></div></div>

2
 
<style type="text/css">
#gb{
position:fixed;
top:140px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbcontent{
float:left;
}
</style>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<a href="LINK"><img src="https://1.bp.blogspot.com/-LG-m4-EKb74/WjRH-WwnPQI/AAAAAAAAJFc/9PPLmP-Ss-Qv7wa8HOsmZOjZdunMnuYtACLcBGAs/s1600/b.png" width="100" border="0" height="120" /></a><br />
<center><a href="LINK"><img src="https://4.bp.blogspot.com/-AKjBqp26N4Q/WjRH-fm2yEI/AAAAAAAAJFY/8D-eojHtOkgKouihHFVUmZK7I8ZV1cz5QCLcBGAs/s1600/bb.png" width="100" border="0" height="120" /></a><br />
<a href="LINK"><img src="https://1.bp.blogspot.com/-vfpcokQJYD8/WjRH-Gf9o9I/AAAAAAAAJFU/1_oEh9rWmDsPG5mz70StukNrAta-IXlXQCLcBGAs/s1600/bbb.png" width="100" border="0" height="120" /></a><br />
<a href="LINK"><img src="https://4.bp.blogspot.com/-ELPK4owtbJw/WjRH-oPLLCI/AAAAAAAAJFg/pDhUkpI98fUzyNbouowDilvkyDPXmcBawCLcBGAs/s1600/bbbb.png" width="100" border="0" height="120" /></a><br /></center>
<div style="text-align:right">
<a href="javascript:showHideGB()">
</a>
</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (100-gb.offsetWidth).toString() + "px";
</script></div></div>

3
<style type="text/css">#gb{
position:fixed;
top:140px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbcontent{
float:left;
}
</style>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<a href="LINK"><img src="https://3.bp.blogspot.com/-UGAb3h7fI0s/WjRLKU9jJJI/AAAAAAAAJF0/QABmUgSNHrAs29KF23jRfeQUbgQmV1FqwCLcBGAs/s1600/c.png" width="100" border="0" height="120" /></a><br />
<center><a href="LINK"><img src="https://3.bp.blogspot.com/-IuVUUOzBVwA/WjRLKAUcO4I/AAAAAAAAJFs/xzV886g12qI6BcA9EdqJfBiXmaOvhumvwCLcBGAs/s1600/cc.png" width="100" border="0" height="120" /></a><br />
<a href="LINK"><img src="https://1.bp.blogspot.com/-7FuYcm0NIpQ/WjRLKYQ3nGI/AAAAAAAAJFw/yQXmZsB16O8I9KHkwlqCtfQmrnyAZ0jwACLcBGAs/s1600/ccc.png" width="100" border="0" height="120" /></a><br />
<a href="LINK"><img src="https://1.bp.blogspot.com/-3pTKkFT-BUs/WjRLK8oduDI/AAAAAAAAJF4/o_5eX4pt7sQ4_8v0BBa-F26zxilvNgzMgCLcBGAs/s1600/cccc.png" width="100" border="0" height="120" /></a><br /></center>
<div style="text-align:right">
<a href="javascript:showHideGB()">
</a>
</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (100-gb.offsetWidth).toString() + "px";
</script></div></div>
O si prefieres puedes editarlos por ti mismo/a :D

Bueno, eso fue todo por ahora >-<. Si quieres publicar este tutorial en tu blog no te olvides de darme los créditos ñ.ñ
¡Gracias por leer!
-Amary

6 comentarios:

  1. ¡Woah! Que linda idea y las carpetas tiene un diseño muy bonito, jeje. Gracias por compartir~. Espero que estés muy bien, linda. Y^O^Y

    ResponderEliminar
    Respuestas
    1. Me alegra que te guste! <3 muchas gracias por pasarte ^u^ ✿

      Eliminar
  2. Gracias por el tutorial,esta muy bueno.Espero que tengas un buen año :).Besos *3*

    ResponderEliminar
  3. ohhh este menu esta muy hermoso.Y es diseño que hicistes para las carpetas me encanto
    besos

    ResponderEliminar

Comenta con respeto ^-^

¡Gracias por tu comentario!

Emojis:
(∩ω∩) | (>△<) | (>▽<) | (⊙▽⊙) | (╯ω╰) | (☆▽☆) | (≧ω≦) | ≡(▔﹏▔)≡ | ( ̄(エ) ̄) | (・∀・ ) | (ノ◕ヮ◕)ノ*:・゚✧ | (^▽^) | (¬_¬) | ✖‿✖ | (¬‿¬) | (─‿‿─) | (~ ̄▽ ̄)~ | (︶ω︶) | (+_+) | (。♥‿♥。) | (✿ ♥‿♥) | ●ᴥ●

Simbolos:
☺♥♫△☆ღ