Cómo insertar el menú desplegable de Dynamicdrive

Este es un menú diseñado por Dynamicdrive y basado en html, css y javascript. Voy a explicarlo un poco rapidillo, oki? Es que tengo sueño! je je je. Conseguirás algo así:

Una imagen vale más que mil palabras y en este caso en lugar de usar 1001, os dejo un enlace para que veais lo que se consigue con el código que os propongo.

Ejemplo de menú desplegable

Para empezar es necesario pegar esto dentro del head, es decir, entre las líneas <head> y </head> del código html de tu página web (el código siguiente se va a salir de la pantalla, pero lo dejo así que se ve más claro, oki? Si ves que se cae de la página me avisas que lo recoja! ja ja ja):

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #F3F3F3; /*overall menu background color*/
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 90px; /*Width of top level menu link items*/
padding: 1px 8px;
border: 1px solid black;
border-left-width: 0;
text-decoration: none;
color: navy;
}
	
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}

.suckertreemenu ul li a:hover{
background-color: black;
color: white;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #F3F3F3 url(objetos/arrow-down.gif) no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(objetos/arrow-right.gif) no-repeat center right;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows
           suckertree menu, add 1em top spacing between the two in IE */
padding-top: 1em;
}
	
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t>ultags.length; t++){
		if (ultags[t].parentNode.parentNode.id==menuids[i]){
//if this is a first level submenu
			ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px"
//dynamically position first level submenus to be height of main menu item
			ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
		}
		else{ //else if this is a sub level menu (ul)
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"
//position menu to the right of menu item that activated it
    	ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
		}
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.visibility="visible"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.visibility="hidden"
    }
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)

</script>

Bien. Ahora tienes que pegar dentro del cuerpo o body, en el lugar en el que deseas que aparezca el menú desplegable, lo siguiente:

 


<div class="suckertreemenu">
<ul id="treemenu1">
	<li><a href="#" style="border-left: 1px solid black">Item 1</a></li>
	<li><a href="#">Folder 1</a>

		<ul>
			  <li><a href="#">Sub Item 1.1</a></li>
			  <li><a href="#">Sub Item 1.2</a></li>

			  <li><a href="#">Sub Item 1.3</a></li>
			  <li><a href="#">Sub Item 1.4</a></li>
		</ul>

	</li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Folder 2</a>
		<ul>

			<li><a href="#">Sub Item 2.1</a></li>
			<li><a href="#">Folder 2.1</a>
			    <ul>
				    <li><a href="#">Sub Item 2.1.1</a></li>

				    <li><a href="#">Sub Item 2.1.2</a></li>
				    <li><a href="#">Sub Item 2.1.3</a></li>
				    <li><a href="#">Sub Item 2.1.4</a></li>

			    </ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Item 4</a></li>

</ul>
<br style="clear: left;" />
</div>

<p id="iepara">Rest of content here></p>

Si tengo tiempo os explico como personalizarlo un poco, aunque creo que es sencillo, no? O lo comentamos en el foro, oki?

Menús Desplegables:

Comparte este artículo en tu red Twitter Comparte este artículo en tu red Facebook Comparte este artículo en tu red Google Enviar '' a Meneame.net