Varios menúes con Javascript

Por Anónimo el miércoles, abril 20, 2011

Mi compañero y amigo Cloudx18 creó una entrada bastante simple de como poder crear un menú aplicando CSS al HTML de unos enlaces, pero explicaré una forma de hacerlo aplicando unos estilos y un script, de tal manera que al pasar el cursor por el menú se expanda y se muestren otros enlaces.

Paso 1: Añadimos el CSS y el Script

Bueno esto es algo muy sencillo si no nos centramos en detalles más específicos. Nos vamos a Edición HTML de nuestra plantilla y agregamos esto antes de </head>

<script src='http://dl.dropbox.com/u/26839930/dropdown.js' type='text/javascript'>
</script>
<link href='http://dl.dropbox.com/u/26839930/dropdown.css' rel='stylesheet' type='text/css'/>

*Con esto damos estilos al menú, aunque si deseas cambiar los estilos tan solo tienes que modificar el CSS predeterminado. El efecto lo realiza el script ya añadido.

Paso 2: El menú:

El menú es tan solo HTML así que si queréis podéis añadirlo directamente en los gadgets de la plantilla “Diseño/Elementos de la página”

<dl class="dropdown">
<dt id="nombre-ddheader" onmouseover="ddMenu('nombre',1)"
onmouseout="ddMenu('nombre',-1)">Un menú con Javascript</dt>
<dd id="nombre-ddcontent" onmouseover="cancelHide('nombre')"
onmouseout="ddMenu('nombre',-1)">
<ul>
<li><a href="URL">Un enlace</a></li>
<li><a href="URL">Otro enlace</a></li>
<li><a href="URL">Más enlaces</a></li>
<li><a href="URL">y otro más</a></li>
</ul>
</dd>
</dl>

*Podéis crear tantos menúes como queráis, siempre y cuando la “id” no sea la misma. Un ejemplo de como añadir más sería este:

<dl class="dropdown">
  <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
  <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
    <ul>
      <li><a href="URL" class="underline">enlace 1</a></li>
      <li><a href="URL" class="underline">enlace 2</a></li>
      <li><a href="URL" class="underline">enlace 3</a></li>
      <li><a href="URL" class="underline">enlace 4</a></li>
      <li><a href="URL">enlace 5</a></li>
    </ul>
  </dd>
</dl>

<dl class="dropdown">
  <dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Dropdown Two</dt>
  <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
    <ul>
      <li><a href="URL" class="underline">enlace 1v2</a></li>
      <li><a href="URL" class="underline">enlace 2v2</a></li>
      <li><a href="URL" class="underline">enlace 3v2</a></li>
      <li><a href="URL" class="underline">enlace 4v2</a></li>
      <li><a href="URL">enlace 5v2</a></li>
    </ul>
  </dd>
</dl>

Con esto y un ejemplo acabamos.

Ir a la página principal Subir A favoritos