AYuDWeB

Menu Gratis

Fuente: www.cssplay.co.uk
Vista Previa:

Texto Por Encima De La Pagina

Código:

Codigo Del Menu (Editar Links)

Código:

<div id="circularMenu">
<li class="home"><a href="inicio.htm"><b>Inicio<br><span>Ve Al Inicio</span></b></a></li>
<li class="chat"><a href="gracias.htm"><b>Contactame<br><span>Enviame Tus Dudas o Comentarios</span></b></a></li>

<li class="email"><a href="construccion.htm"><b>Mi Email<br><span>Enviame Correos</span></b></a></li>
<li class="shop"><a href="construccion.htm"><b>Lo Nuevo<br><span>Encuentra Lo Nuevo De la Web</span></b></a></li>
<li class="delivery"><a href="afiliados.htm"><b>Afiliados<br><span>Web Amigas</span></b></a></li>
<li class="search"><a href="gracias.htm"><b>Afiliate!!<br><span>Te Gustaria Estar En Mi Web?</span></b></a></li>
<li class="address"><a href="http://www.paginawebgratis.es"><b>Pagina Web Gratis<br><span>Te Gustaria Una Web Como Esta?</span></b></a></li>

<li class="upload"><a href="http://www.piczuela.co.cc"><b>UPLOAD<br><span>Sube Imagenes!!</span></b></a></li>
</div>

Salu2!!

Menus Desplegables:

He puesto éste código para todos aquellos WebMaster que deseen colocar un menu horizontal desplegable, modificable y que funcione con el navegador Tested in IE6, IE7, Firefox, Opera, Netscape, Mozilla y Safari (PC) (ya que el menu desplegable de didita por alguna razon no me funcionaba con algunos navegadores).
Primero desir que el codigo no es para nada sensillo, y para todo aquel que quiera implementarlo en su web debera tener conocimientos del lenguaje CSS o sino está la posibilidad que su menu no le funcione.

Bueno acá les va el código, modifiquenlo a su pinta:

Esto va en Texto por debajo de la Página escribió:

Simbologia escribió:

Azul= Color de Letra
Naranjo= Color del Fondo de los menus Desplegables (Fondo Link 0.0 y 0.0.0)
Verde= Color del Borde del menu desplegable
Medidas Recomendadas de tus imágenes:
URL VIÑETA:4x7
URL FONDO M DER-IZ:3x25
URL FONDO M:1x25
URL FONDO MHOVER:1x25
pdt=el ancho no es muy importante pero el alto debe ser de 25px en tus fondos

Luego este es el codigo de tu menu, puedes pegarlo en un box y luego con el codigo de pirro ubicarlo donde quieras

Código Menu escribió:

Acá tienes un ejemplo de como se verá tu menú desplegable:
Click AQUI
Espero que les sirva a vari@s

Codigo Para Posicionar tu Menu Desplegable escribió:

<div style="position:absolute;left:0px;top:114px;">
Acá va el codigo de tu menu
</div>

Codigo escribió:

Simbologia escribió:

CELESTE:Éste es el ancho de tu menu horizontal
ROJO: Son las url de tus imagenes
VERDE CLARO: Es el alto de tu menu horizontal
VERDE: Es el color de los bordes
NARANJO: Es el fondo de lo que se desplega
AZUL: Es el color de letra
ROSA: Es La ubicación de tu menú horizontal

Medida Recomendada:
URL FONDO M DER-IZ:3x25
URL FONDO M:1x25
URL FONDO MHOVER:1x25

Y ESTE ES EL CODE PARA QUE COMIENCES A CREAR TU MENU:

MENU escribió:

<div style="position:absolute;left:0px;top:140px;">
<div id="marco">
<span class="preload2"></span>

<ul class="menu2"><img src="URL FONDO IZ" align="left" /><img src="URL FONDO DER" align="right"/>

<li class="top"><a href="#" id="Menu1" class="top_link"><span class="down">Menu1</span>
</a>
<ul class="sub">
<li><a href="#">Link 1.1</a></li>
<li><a href="#">Link 1.2</a></li>
<li><a href="#">Link 1.3</a></li>
<li><a href="#">Link 1.4</a></li>
</ul>

</li>

<li class="top"><a href="#" id="Menu2" class="top_link"><span class="down">Menu2</span>
</a>
<ul class="sub">
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<li><a href="#">Link 2.4</a></li>
</ul>

</li>

<li class="top"><a href="#" id="Menu3" class="top_link"><span class="down">Menu3</span>
</a>
<ul class="sub">
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>

<li class="mid"><a href="#" class="fly">Link 3.3
</a>
<ul>
<li><a href="#">Link 3.3.1</a></li>
<li><a href="#">Link 3.3.2</a></li>
<li><a href="#">Link 3.3.3</a></li>
<li><a href="#">Link 3.3.4</a></li>
</ul>

</li>

<li class="mid"><a href="#" class="fly">Link 3.4
</a>
<ul>
<li><a href="#">Link 3.4.1</a></li>
<li><a href="#">Link 3.4.2</a></li>
<li><a href="#">Link 3.4.3</a></li>
<li><a href="#">Link 3.4.4</a></li>
</ul>

</li>

</ul>

</li>

</ul>

</div>
</div>

SIMBOLOGIA:

Mas...:

Hola xD !

Primero se pegas este codigo :

Código:

Para agregar esto :

Código:

<div id="myjquerymenu" class="jquerycssmenu">
<ul>
<li><a href="#">Item 1</a></li>

<li><a href="#">Item 2</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="#">Folder 3.1.1</a>
   <ul>
   <li><a href="#">Sub Item 3.1.1.1</a></li>
   <li><a href="#">Sub Item 3.1.1.2</a></li>
   <li><a href="#">Sub Item 3.1.1.3</a></li>
   <li><a href="#">Sub Item 3.1.1.4</a></li>
   <li><a href="#">Sub Item 3.1.1.5</a></li>
   </ul>
</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>

Saludos !

fuente:

http://www.dynamicdrive.com/style/csslibrary

Otro Mas xD:

Aqui les dejo un menu horizontal desplegable... espero q les guste

aunque yo se q hay muchos jejeje

Lo primero es la estructura, para ella usaré una lista, asi queda todo bien recogidito:

<ul id=”menu-horizontal”>
<li><a href=”#” title=”Texto”>Texto</a></li>
<li><a href=”#” title=”Texto”>Texto</a></li>
<li><a href=”#” title=”Texto”>Texto</a>
<ul>
<li><a href=”#” title=”Texto”>Texto</a></li>
<li><a href=”#” title=”Texto”>Texto</a></li>
</ul>
</li>
<li><a href=”#” title=”Texto”>Texto</a></li>
<li><a href=”#” title=”Texto”>Texto</a></li>
</ul>

La cosa es así: el <ul> es el menú en sí, cada <li> es un botón del menú y el <ul> dentro del <li> es desplegable de ese botón. ¿Me se entiende? xD

Vale, ahora voy a aplicarle un poco de estilo para que quede el menu en horizontal, ya que por defecto las listas son verticales. Se consigue fácil, agregandole a los elementos de la lista el atributo de flotante:

ul#menu-horizontal li {
float: left;
display: inline;
position: relative;
}

Y ahora que es horizontal, voy a ocultar el submenú, ya que no quiero que aparezca aún, solo se tiene que mostrar cuando pase el ratón por encima del botón que tiene submenu. El css en cuestión:

ul#menu-horizontal ul {
display: none;
position: absolute relative;
top: 24;
left:0;
margin-left:-40px;
margin:0;
padding:0;
background:#FFFFFF;
}

ul#menu-horizontal ul li {
display: block !important;
}

ul#menu-horizontal li:hover ul,
ul#menu-horizontal li.iehover ul {
display: none;
}

ul#menu-horizontal li:hover ul,
ul#menu-horizontal li.iehover ul{
display: block;
}

Y.. perfecto! Ya funciona nuestro menu desplegable y horizontal, pero nos queda un paso. Hacerlo bonito. Para ello aplicamos un poco de estilo por aquí..

#menu-horizontal {
width:500px;
margin:0 auto;
}

#menu-horizontal li {
margin:0 1px;
width:98px;
min-height:19px;
text-align:center;
background:#BBB;
list-style:none;
padding:2px 0;
}

/* y otro poquito por aquí.. */

#menu-horizontal li:hover {
background:#C5014F;
}

#menu-horizontal li a {
font:bold 11px Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
}

#menu-horizontal li ul li{
float:none;
width:98px;
margin:1px 0;
}

Windows

Menu Gratis

Categorias

Submenu

Submenu