31/12/12

[Tutorial]Menu 2


Hola n.n bueno os traigo un menu que yo he usado durante un largo tiempo n.n bueno es muy sencillo 
seguir mis pasos


Edicion >> Elementos de pagina>> Anadir  html/jabascriop

y añadimos este código 
<style type="text/css">/*Credits: Dynamic Drive CSS Library *//*URL: http://www.dynamicdrive.com/style/ */.sidebarmenu ul{width:250;text align:center;list-style-type: none;font: normal 13px Century gothic;}.sidebarmenu ul li{position: relative;}/* Top level menu links style */.sidebarmenu ul li a{display: block;overflow: auto; /*force hasLayout in IE7 */color: white;text-align:center;text-decoration: none;padding: 0px;}.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{background-color: #CDF0FF; /*background of tabs (default state)*/}.sidebarmenu ul li a:visited{color: white;}.sidebarmenu ul li a:hover{background-color: #FDCDFF;}/* Holly Hack for IE \*/* html .sidebarmenu ul li { float: left; height: 1%; }* html .sidebarmenu ul li a { height: 1%; }/* End */</style><script type="text/javascript">//Nested Side Bar Menu (Mar 20th, 09)//By Dynamic Drive: http://www.dynamicdrive.com/style/var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commasfunction initsidebarmenu(){for (var i=0; i<menuids.length; i++){var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")for (var t=0; t<ultags.length; t++){ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenuultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu itemelse //else if this is a sub level submenu (ul)ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated itultags[t].parentNode.onmouseover=function(){this.getElementsByTagName("ul")[0].style.display="block"}ultags[t].parentNode.onmouseout=function(){this.getElementsByTagName("ul")[0].style.display="none"}}for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbarsultags[t].style.visibility="visible"ultags[t].style.display="none"}}}if (window.addEventListener)window.addEventListener("load", initsidebarmenu, false)else if (window.attachEvent)window.attachEvent("onload", initsidebarmenu)</script><div class="sidebarmenu"><ul id="sidebarmenu1"><li><a href="Url de home">Home</a></li><li><a href="Url de tutos">Tutoriales</a></li><li><a href="Url de pedidos">Pideme</a></li><li><a href="Url de afiliados"> Afiliame</a></li></ul></div&gt


EDITA:
Naranja:ya lo deje claro el link de cada cosa
Turquesa:eso se puede cambiar y poner lo que mas te gusta
Rojo:color del fondo
Morado:color del fondo al pasar el cursor

Y si quereis añadir mas categorias teneis que añadir esto
<li><a href="Url de afiliados"> Afiliame</a></li>


2 comentarios:

  1. me gusta este tuto pero como he visto ese menu en muchos blogs no lo hago u.u, gracias por compartirlo

    ResponderEliminar
    Respuestas
    1. ya es muy siplon pero no sabia que subir XD

      Eliminar

Holaa!! muy buenos días-tardes-noches espero que te haya gustado la entrada & si me dejas una huellita estaría muy agradecida.
Si tienes alguna duda no te olvides de mandarme un mail a mi correo o bien hacerlo por medio de la sección de dudas
candelaaisiska@gmai.com