:: CP - Recursos Web ::

Drop Menu

Drop menu

Un fantastico menu horizontal desplegable, que te dara mucha organización al ordenar tu sitio! Este codigo esta basado en Jquery y Css, es sencillo de editar, guiate por los nombres que se indica en el script.

[ Ejemplo: ]

Informacion:
Nombre: Drop menu
Fecha: 13-02-2013
Creditos: dynamicdrive.com
Garantia: Si ?

Enlazanos:

Compartir:

[ Codigos: ]

- - Por encima de la pagina

<style>.droplinebar{overflow: hidden;}
.droplinebar ul{margin: 0;padding: 0;float: left;width: 100%;font: bold 13px Arial;
background: #242c54 url("https://img.webme.com/pic/c/cssplantillas/blueactive.gif") center center repeat-x; }
.droplinebar ul li{display: inline;}
.droplinebar ul li a{float: left;color: white;padding: 9px 11px;text-decoration: none;}
.droplinebar ul li a:visited{color: white;}
.droplinebar ul li a:hover, .droplinebar ul li .current{color: white;
background: transparent url("https://img.webme.com/pic/c/cssplantillas/blueactive.gif") center center repeat-x;}
.droplinebar ul li ul{position: absolute;z-index: 100;left: 0;top: 0;background: #303c76;visibility: hidden;}
.droplinebar ul li ul li a{font: normal 13px Verdana;padding: 6px;padding-right: 8px;margin: 0;border-bottom: 1px solid navy;}
.droplinebar ul li ul li a:hover{background: #242c54;}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://archivos1.mcloud.cl/adn12/r/droplinemenu.js" type="text/javascript"></script>
<script type="text/javascript">
//build menu with DIV ID="myslidemenu" on page:
droplinemenu.buildmenu("mydroplinemenu")
</script>

- - Donde quiras que aparesca

<div id="mydroplinemenu" class="droplinebar"><ul>
<li><a href="URL">Inicio</a></li>
<li><a href="URL">MENU 2</a><ul>
    <li><a href="URL">SUB MENU 1</a></li>
    <li><a href="URL">SUB MENU 2</a></li>
    <li><a href="URL">SUB MENU 3</a>
<ul>
        <li><a href="URL">SUB SUB MENU 1</a></li>
        <li><a href="URL">SUB SUB MENU 2</a></li>
        <li><a href="URL">SUB SUB MENU 3</a></li>
        <li><a href="URL">SUB SUB MENU 4</a></li>
</ul></li></ul></li>
<li><a href="URL">MENU 3</a></li>
<li><a href="URL">MENU 4</a><ul>
    <li><a href="URL">SUB MENU 1</a></li>
    <li><a href="URL">SUB MENU 2</a></li>
    <li><a href="URL">SUB MENU 3</a></li>
    <li><a href="URL">SUB MENU 4</a>
	  <ul>
        <li><a href="URL">SUB SUB MENU 1</a></li>
        <li><a href="URL">SUB SUB MENU 2</a></li>
        <li><a href="URL">SUB SUB MENU 3</a></li>
        <li><a href="URL">SUB SUB MENU 4</a>
		  <ul>
            <li><a href="URL">SUB SUB SUB MENU 1</a></li>
            <li><a href="URL">SUB SUB SUB MENU 2</a></li>
            <li><a href="URL">SUB SUB SUB MENU 3</a></li>
</ul></li></ul></li>
    <li><a href="URL">SUB MENU 5</a></li>
</ul></li>
<li><a href="URL">MENU 5</a></li>
</ul></div>

Apuntes
Editalo a tu gusto!
- Para cualquier consulta visita nuestro Foro de soporte.

Ya lo han visto 220 visitantesGracias por tu visita!

Recomendamos:

| CERRAR