tecnopc18

menus

Aquí podrás encontrar, algunos menús, horizontales y verticales, con estructura en css y javascript.

Menú horizontal drop & down con CSS

Código CSS:

#menu ul { margin: 0; padding: 0; list-style: none; }  #menu li {  float: left; position: relative; width: 140px; /* Ancho de las pestañas */ }  #menu li ul { position: absolute; display: block;  top: 2em; left: 0; }  #menu li>ul { top: auto; left: auto; }  #menu li:hover ul { display: block; } #menu li:hover>ul { visibility:visible; } #menu ul ul { visibility:hidden; }  #menu ul, li { margin: 0 0 0 0; }  #menu ul a { display: block; text-decoration: none; color: #777; /* Color del texto de las pestañas */ background: #f9f9f9; /* Color de fondo de las pestañas */ padding: 5px; border: 1px solid #ccc; /* Borde de las pestañas */ text-align: center; /* Alineación del texto */ }  #menu ul a:hover {  color: #E2144A; /* Color del texto al pasar el cursor */ }   #menu li ul a { text-align: left; text-decoration: none; color: #777; /* Color del texto de las subpestañas */ background: #fff; /* Color de fondo de las subpestañas */ border: 1px solid #ccc; /* Borde de las subpestañas */ padding: 5px;  }   #menu li ul a:hover {  color: #E2144A; /* Color del texto de las subpestañas al pasar el cursor */ background: #f9f9f9; /* Color de fondo de las subpestañas al pasar el cursor */ }

Código donde quieras que vaya el menú:

<div id="menu"> <ul id="menuList"> <li><a class="submenu" href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 1</a></li> <li><a class="submenu" href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 2</a>  <ul> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 2.1</a></li> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 2.2</a></li> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 2.3</a></li> </ul> </li> <li><a class="submenu" href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 3</a>  <ul> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 3.1</a></li> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 3.2</a></li> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 3.3</a></li> </ul> </li> <li><a class="submenu" href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 4</a>  <ul> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 4.1</a></li> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 4.2</a></li> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 4.3</a></li> </ul> </li> </ul> </div>

Menú horizontal con marquesina

Código CSS

Código donde quieras que vaya el menú

Menu horizontal con borde superior

Código CSS

Codigo donde quieras que vaya el menú

Menú vertical

Código CSS

Código donde quieras que vaya el menú

Menú burbuja

Código CSS

Código donde quieras que vaya el menú

menus

Aquí va el mensaje

Nuevos contenidos:

Usa youfinder