Prueba

Latest Posts

This is an example title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pretium mauris nec arcu. Integer at leo vel ipsum elementum sodales. Nam est quam, posuere non, feugiat nec, consectetuer ac, lectus. Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Nulla venenatis, turpis eu vestibulum tincidunt, felis diam luctus velit, facilisis cursus mi ligula vitae nunc. Curabitur libero. Fusce felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.

Comment(5) · Read More

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pretium mauris nec arcu. Integer at leo vel ipsum elementum sodales. Nam est quam, posuere non, feugiat nec, consectetuer ac, lectus.

>>Diseñando El Futuro De Pwg!

Menu Vertical Despegable

Menu desplegable vertical muy sencillo de modificar.

Lo primero que hay que hacer es crear nuestro menu a base de listas:

Lo primero para esto es decirle al navegador que vamos a hacer una lista. Esto se consigue con las etiquetas <ul> (para el comienzo) y </ul> (para el final).

Por lo que de momento nuestro menu quedaria asi:


Código:
<ul>

   </ul>


Esto significa que dentro deberia haber una lista pero no todo lo que hay dentro
de esas dos etiquetas es una lista. Para indicar que elementos son de esa lista
hay que señalarlo con las etiquetas <li> y </li>. Por ejemplo, si deseamos que en esa lista esten los elementos
menu 1, menu 2 y menu 3, la lista quedaria asi:

Código:
<ul>
   <li>Menú 1</li>
   <li>Menú 2</li>
   <li>Menú 3</li>
</ul>


Esto el navegador lo leeria asi:

·Menu 1
·Menu 2
·Menu 3

Estos serian los botones principales y debajo de ellos irian los submenus.

Para añadir submenus lo que hay que hacer es crear una lista entre las etiquetas <li> y </li> de cada elemento que
queramos que tenga submenu. En este caso voy a querer que en un futuro mi menu tenga submenus
en los elementos Menu 2 y menu 3 por lo que el codigo quedaria asi:

Código:
<ul>
   <li>Menú 1</li>
   <li>Menú 2
      <ul>
         <li>Submenú 1</li>
         <li>Submenu 2</li>
      </ul>
   </li>
   <li>Menú 3
      <ul>
         <li>Submenú 3</li>
         <li>Submenu 4</li>
      </ul>
   </li>
</ul>


Una cosa, no hace falta que dejais tantos espacios en el codigo. Yo solo lo hago para facilitarme la tarea.
En realidad podriais ponerlo asi:

Código:
<ul>
<li>Menú 1</li>
<li>Menú 2
<ul>
<li>Submenú 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li>Menú 3
<ul>
<li>Submenú 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>



Sigamos. Si habeis hecho todo bien os deberia quedar algo como esto:

·Menú 1
·Menú 2
oSubmenú 1
oSubmenu 2
·Menú 3
oSubmenú 3
oSubmenu 4

Pues este es basicamente la estructura del menu. Este lo colocais donde quereis que aparezca.
Ahora vamos a diseñarlo. Para ello usaremos css y un poco de javascript(este ultimo para que nuestro menu sea compatible con el
maldito internet explorer)


Lo que voy a poner ahora lo teneis que poner en la casilla de editar diseño Css si style tags si teneis
el diseño Css-design y entre las etiquetas <style> y </style> si teneis cualquier otro diseño. Luego de meterlo
entre las etiquetas style lo podeis colocar en algun box o en cualquier lado.

Primero tenemos que ponerle un nombre al menu porque en el futuro lo necesitare. Vamos a llamarlo nav:


Código:
<ul id="nav">
   <li>Menú 1</li>
   <li>Menú 2
      <ul>
         <li>Submenú 1</li>
         <li>Submenu 2</li>
      </ul>
   </li>
   <li>Menú 3
      <ul>
         <li>Submenú 3</li>
         <li>Submenu 4</li>
      </ul>
   </li>
</ul>



Este seria el codigo css:

Código:
<style>
      .nav { width: 170px;} /* Esto significa que el menu tendra de ancho 170px */
      
      ul {
      list-style: none;/* con esto evitamos que los elementos de la lista tengan los puntos (ej: ·Menu1) */
      padding: 0;
      margin: 0;

      }

      li {
      position: relative; /* Esto significa que la posicion de los elementos de la lista depende de como esten los elemnetos superiores(o lo que es lo mismo, la posicion del submenu depende de la del menu*/
      }

      li ul {
      display: none; /* Esto significa que los submenus estaran ocultos cuando no se pase el raton por encima */


      }

      li>ul { 
      top: auto;
      left: auto;
      }

      li:hover ul, li.over ul {  /* Con esto conseguimos que al pasar el raton por el menu se extienda */
      display: block;
      }
</style>


Debido a que IE tiene problemas con el hover (cuando pasas el raton por encima del boton) hay que añadir este codigo:


Código:
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
   if (document.all&&document.getElementById) {
      navRoot = document.getElementById("nav");
      for (i=0; i<navRoot.childNodes.length; i++) {
         node = navRoot.childNodes[i];
         if (node.nodeName=="LI") {
            node.onmouseover=function() {
               this.className+=" over";
            }
            node.onmouseout=function() {
               this.className=this.className.replace(" over", "");
            }
         }
      }
   }
}
window.onload=startList;

//--><!]]></script>



Esto lo pegan en Texto por encima del contenido o donde quieran (excepto en css si style tags) y ya casí estara.
Pueden ver el resultado en http://humorjona.es.tl/listas.htm
Veran que aun no tiene enlaces y sin estos no funcionara por lo que vamos:

Lo primero, añadir enlaces.
Para añadir elaces, basta con poner este codigo <a href="enlace">Nombre 1<a/>
Vamos a poner enlaces a todos los submenus y a los menus 1 y 2 pero no al 3.

Código:
<ul id="nav">
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 2</a>
      <ul>
         <li><a href="#">Submenu 1</a></li>
         <li><a href="#">Submenu 2</a></li>
      </ul>
   </li>
   <li>Menú 3
      <ul>
         <li><a href="#">Submenu 3</a></li>
         <li><a href="#">Submenu 4</a></li>
      </ul>
   </li>
</ul>



Pueden ver el resultado en http://humorjona.es.tl/Lista-con-enlaces.htm


Vamos a añadirle un poco de color, cambiar el tamaño y cambiar el tipo de letra. Para eso vamos a modificar el codigo css:

Código:
<style type="text/css">
        .nav { width: 170px;} /* Esto significa que el menu tendra                           de ancho 170px */
   
   ul a { /* esto solo afecta a los enlaces. */
   text-decoration: none; /* con esto evitamos que esten subrayados */
   color: #fff;   /* con esto, los enlaces tendran color blanco */

}
        ul {
        list-style: none;/* con esto evitamos que los elementos de la lista tengan los    puntos (ej: Menu1) */
   width: 170px;   /*el menu solo tendra 170px de ancho */
        padding: 0; /* sin padding */
        margin: 0; /* Sin margen*/
        background-color: #888; /* ponemos como fondo del menu gris */
   color: #777; /* el color del texto sera de este color */
        }

        li {
        position: relative; /* Esto significa que la posicion de los elementos de la lista depende de como esten los elemnetos superiores(o lo que es lo mismo, la posicion del submenu depende de la del menu*/
        }

        li ul {
        display: none; /* Esto significa que los submenus estaran ocultos cuando no se pase el raton por encima */
   background-color: #fe0404; /* el color de los submenus es rojo*/
   border: 2px solid; /* los submenus tendran un borde de 2px */

        }

        li>ul {
        top: auto;
        left: auto;
        }

        li:hover ul, li.over ul {  /* Con esto conseguimos que al pasar el raton por el menu se extienda */
        display: block;
        }


</style>



Tutorial hecho por: humorjona
 
 
Hoy ha habido 11519 visitantes (22124 clics a subpáginas) ¡Aqui en World-Desing!
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis