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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg_1QoY3qeOElRQ4ZHlCAPk1xy7RJP87vNWFiT3qkxxA_miC4duxLIvmM7uzohP4Hj31OUcBR45eS0LcaKk1EBVlgRhAFRrgpTFC70VrM07aDsJPLLgAnYxnuJ4g88mC9xbh5bRa-YDDo/s1600/a.png" width="100" border="0" height="120" /></a><br />
<center><a href="LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgURp22AKfl_WrwkEcWtpnZHXnHhuHWqf5bA6iFz8JeAgNF4uI7F0025QmUCB1uuAb9BPNRVhuO4S6l4j2usQG3Zo33zyJ2TO5qRW-aw37sXmaPngPsuD41rZRx3mZxMaazLdPwlHFCKCw/s1600/aa.png" width="100" border="0" height="120" /></a><br />
<a href="LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijwuhsz18IgkPipSrOKGIYNDEfsEdrYGz-wQdm8uLVP2sJoNyRSo9wG-5XMkLodol08Dt20r23LWLUlr4xgj_CbOYP7m4qyPa9JtszUknawNiRR1cd4IYbVjljxsHTDRf8iHsDLSpXqYk/s1600/aaa.png" width="100" border="0" height="120" /></a><br />
<a href="LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTg8inPWPGAgPytwVOhu3xyMyjZcv6ktu8FV2HRjdTrJJCdS1ezILUodWFd_RmIhhyaWR1XXksCaA8sq_dQD3z0Hufla6QopantZ_BxSMFvRpbzuC89TtM8KzopwKfC4Yw4VrMbsapiQE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI_CnkglxEMEHbnSR7vOzxvMBhlK0PHzTut6ctMq7R000uEpBNMFjjQlSrRWPMUWyRJUEqiXLoCOcPYypXsEVOsYtC8q0kw6n38bmNJNuliCQIOPe8AL5iT_45wCdftf6hSUA6rPQoDkE/s1600/b.png" width="100" border="0" height="120" /></a><br />
<center><a href="LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZYw_q9ytwcVdTnr4jFpntyUZBa7rVxhn3NbjBPXl5ggxB2t4u0z2Dmurifz4NGhay40wNJBRDnKuBY79yg-9Dn9vXV9EYJzDOtqPwGJgBhY8XMx6PJ5l3AHEKN-TH9uBD42HPUYg8O7o/s1600/bb.png" width="100" border="0" height="120" /></a><br />
<a href="LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTM5jtjlMOu_VRUKU4Yj3hnfej6Xi_Ykt5bo7DJJ_IuKOaxp_uNjmmA9f4h6ccUxW8VvqXiigTF54s7aslwYt3d9yO4ZGR2NiWDoZfU3w7dl5oiHxlRBVq9cphrfxoNwLHJRw2WVXduo4/s1600/bbb.png" width="100" border="0" height="120" /></a><br />
<a href="LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkGp0ypOIl0VKEeZ8MUS-lC4lKwE1Jw3xJ71LnfRxbCwAzf38jlMctL2Iq3rZbB2TaAJyoSSE_25aVj6ysVPY_Q8zzt5b7SaYcu1-FiKFWUs-_ATyDjTiqTgZO_jNCTyQYrtum5jgM9ww/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimGSmAkyZfw55Bm5ynzmY3UgZ3LZERyunjv1fs21XOfAnJcOlYdPr7kgcGlz4DmEq_3ks72cXNL-HMSnj5X3gguexPjUfxGJBLAl9IEVH5yLR9YKPkAs0oyd3e8YaQRTx5egF0bgxOzwI/s1600/c.png" width="100" border="0" height="120" /></a><br />
<center><a href="LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhidVYLizEGmuQ2mF9joKb_h_FQfwb5EaRiXK7_0WUnemuNzpgsf8EekEW9-GTQZ9V-f_aFdbnofdZjOBN_JbCZYIxmcrtdDbjiFu0jB3oLbYfJ66hjD-NgpP3YR1kNwi8ISs6bIhlHwRw/s1600/cc.png" width="100" border="0" height="120" /></a><br />
<a href="LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg8fv3132UI5_pr_auO0LHTR2X8pgks0duNvvJsdT5cPBmoUqAC3oYtH4aymqK4sjwnmCD1Mze1jUCIhjDaJBCcLg90sIYh3m_h6EBYqgrqmDO-dDB3ii7sDhnypY90KNhIjgyLPoqpEE/s1600/ccc.png" width="100" border="0" height="120" /></a><br />
<a href="LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8E7E5X3LqgPlyNEPq3Gar1DhW1Ki3I0ZlqCrZkQ39-1j62xiHgmVEgftyr0_wgur46TL-kmiKa5kwv2bSGDBVmvyiRV_3WVGEmsep1ZxyAiaJStpwM8vtTHXtdv_-WxBvSS-JE7p-AbA/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!