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!

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

¡Gracias por tu comentario!

Emojis:
⸜(。˃ ᵕ ˂ )⸝♡ | ૮ ˶ᵔ ᵕ ᵔ˶ ა | (>▽<) | ପ(๑•ᴗ•๑)ଓ ♡ | (╯ω╰) | (☆▽☆) | (≧ω≦) | ૮ • ﻌ - ა | ଘ(੭ˊᵕˋ)੭ | (・∀・ ) | (¬_¬) | (ノ◕ヮ◕)ノ*:・゚✧ | ฅ^•ﻌ•^ฅ | (¬‿¬) | (─‿‿─) | (~ ̄▽ ̄)~ | (︶ω︶) | ٩(ˊᗜˋ*)و ♡ | (╥﹏╥) | (✿ ♥‿♥) | ●ᴥ●

Simbolos:
♡♥♫△☆ღ