menu vertical despegable

skylug · #1 (**permalink**) 07/02/2011, 18:56

hola necesito auyda para crear un menu despeglable con sub menus para mi pagina web y que funcione con mozilla y por supuesto con IE, ya he probado varios pero se me presenta un problema , es cuando voy a elegir una opcion , esta deberia llevarla a la pagina p/pal, pero me abre otra ventana, es decir el mainframe target no hace efecto, donde podre conseguir un menu con estas caracteristicas

gracias

seoista · #2 (**permalink**) 08/02/2011, 00:19

Hola skylug.

Aquí tienes algunos menús desplegables 100% CSS (una atención de nuestro compañero Mikmoro).

Saludos.

skylug · #3 (**permalink**) 08/02/2011, 11:30

Gracias, pero no funciono como esperaba, no me muestra la css, es decir cuando lo voy a editar, y lo abro me los colores no salen y el efecto acordeon tampoco.

ArturoGallegos · #4 (**permalink**) 08/02/2011, 12:16

Increíble que no te funcione, revisa bien los ejemplos de mikmoro copia el código tal cual prueba y vuelve a probar el html ya que te funcione estudia y vuelve a estudiar el css

y si sigues sin dar con el error postea el código empleado para indicarte tu falla

skylug · #5 (**permalink**) 09/02/2011, 09:23

te voy a decir como lo hice:
1, copie el codigo html, con el clic derecho /ver codigo fuente, crlt e para seleccionar todo, y copiar, despues abri un bloc de notas y lo pegue alli, lo guarde con extenion .html para que me generarar un icono de internet exploer, lo abri y para mi sopresa salio el menu todo desglosado y el background en blanco, es decir el efecto acordeon no sale tampoco el color de fondo.

que pasara??

ArturoGallegos · #6 (**permalink**) 09/02/2011, 10:00

revisa que se encuentre el css, ya que en algunos ejemplos hay css extra en hojas externas...si el menu lo ves funcionando en el sitio de mikmoro seguro te falto copiar algo, Igual indicanos cual fue el menu y el codigo actual que tienes

skylug · #7 (**permalink**) 09/02/2011, 17:34

el menu que me intereso es el nª 7

skylug · #8 (**permalink**) 09/02/2011, 17:34

no se que me falto copiar

skylug · #9 (**permalink**) 09/02/2011, 17:35

el codigo es es este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Menus desplegable solo CSS ejemplo 7 - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="recursos, css, diseño web, xhtml, software libre" />
<meta name="Description" content="Pagina dedicada a recursos de diseño web con CSS, en castellano" />
<meta name="Author" content="Mikel Morote Donazar - Praxis Iruñea SLL" />
<meta name="Subject" content="Recursos CSS" />
<meta name="Language" content="español" />
<meta name="Robots" content="index, follow" />
<link rel="alternate" href="http://www.araudi.net/indice.html" title="Indice de contenidos" media="all" lang="es" />
<link rel="stylesheet" href="css/menu-7.css" type="text/css" />
<style type="text/css">
#menu ul li:focus ul, #menu ul li:active ul, #menu ul li a:active ul {display: block;
position: relative;width: 160px;border: solid 1px #fff;border-top: none;background-color: #6CC;}
#menu ul li:focus span, #menu ul li:active span, #menu ul li a:active {background-color: #6CC;border-bottom: solid 1px #6CC;color: #000;border-left: solid 8px #359BB8;border-right: solid 8px #359BB8;
}
</style>


</head>
<body>
<div id="menu">
<ul>
<li class="nivel1 primera" tabindex="1"><span class="nivel1">Opción 1</span>

<ul>
<li class="primera"><a href="http://www.google.es">Opción 1.1</a></li>
<li><a href="#">Opción 1.2</a></li>
</ul>


</li>
<li class="nivel1" tabindex="2"><span class="nivel1">Opción 2</span>

<ul>
<li class="primera"><a href="#">Opción 2.1</a></li>
<li><a href="http://www.google.es">Opción 2.2</a></li>
<li><a href="#">Opción 2.3</a></li>

<li><a href="#">Opción 2.4</a></li>
<li><a href="#">Opción 2.5</a></li>
</ul>

</li>
<li class="nivel1" tabindex="3"><span class="nivel1">Opción 3</span>

<ul>
<li class="primera"><a href="http://www.google.es">Opción 3.1</a></li>

<li><a href="#">Opción 3.2</a></li>
<li><a href="#">Opción 3.3</a></li>
</ul>

</li>
<li class="nivel1" tabindex="4"><span class="nivel1">Opción 4</span>

<ul>
<li class="primera"><a href="#">Opción 4.1</a></li>

<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="#">Opción 4.4</a></li>
</ul>

</li>
<li class="nivel1" tabindex="5"><span class="nivel1">Opción 5</span>


<ul>
<li class="primera"><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="#">Opción 5.3</a></li>
</ul>

</li>
</ul>
</div>

</body>
</html>

skylug · #10 (**permalink**) 09/02/2011, 17:38

este menu lo voy a insertar en una frame, la idea es que al hacer clic en una de la opciones se dirija ala pagina prinicipal, sin cmabiar de ventana, es decir, mi pagina es un marco, una pagina de titulo, otra para menu y la seccion principal, donde se van a mostrar todas la paginas, se puede hacer?? lo intente con otro menu pero las paginas me abrian en otra ventana, asi no es

ArturoGallegos · #11 (**permalink**) 09/02/2011, 17:51

Cita:

Iniciado por skylug

el codigo es es este:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Menus desplegable solo CSS ejemplo 7 - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="recursos, css, diseño web, xhtml, software libre" />
<meta name="Description" content="Pagina dedicada a recursos de diseño web con CSS, en castellano" />
<meta name="Author" content="Mikel Morote Donazar - Praxis Iru&ntilde;ea SLL" />
<meta name="Subject" content="Recursos CSS" />
<meta name="Language" content="espa&ntilde;ol" />
<meta name="Robots" content="index, follow" />
<link rel="alternate" href="http://www.araudi.net/indice.html" title="Indice de contenidos" media="all" lang="es" />
<link rel="stylesheet" href="css/menu-7.css" type="text/css" />
<style type="text/css">
#menu ul li:focus ul, #menu ul li:active ul, #menu ul li a:active ul {display: block;
position: relative;width: 160px;border: solid 1px #fff;border-top: none;background-color: #6CC;}
#menu ul li:focus span, #menu ul li:active span, #menu ul li a:active {background-color: #6CC;border-bottom: solid 1px #6CC;color: #000;border-left: solid 8px #359BB8;border-right: solid 8px #359BB8;
}
</style>

creo que no has puesto mucha atencion al codigo o habrias notado que mikmoro uso una hoja de estilos externas

Cita:

jomaruro · #12 (**permalink**) 09/02/2011, 18:24

Hola:

Cita:

Iniciado por Ag666

creo que no has puesto mucha atencion al codigo o habrias notado que mikmoro uso una hoja de estilos externas

Y yo creo que le hace mucha falta algo de esto: www.librosweb.es

Saludos.

skylug · #13 (**permalink**) 10/02/2011, 10:23

hola, difinitivamente nose como implementarlo a mi web, gracias, pero encontre en el sitio de flasvortex unos menus, botones , banners increible, date una vielta por alla, es mucho mas facil implementarlo ala web

ArturoGallegos · #14 (**permalink**) 10/02/2011, 10:57

simpática la web, aunque le quita la emoción y el nivel de personalización al crear tus propios menús... sin contar que el flash es mas difícil de indexar y para un menú a mi juicio no es buena idea.

pero igual me alegro que solvente tu problema, sale pues suerte en tus proyectos.

skylug · #15 (**permalink**) 11/02/2011, 15:05

pues ni creas, por que no permite mainframe, es decir no se redireccionar los link, pues aparecen en la misma pagina del menu

skylug · #16 (**permalink**) 11/02/2011, 15:06

es que mi problema es que yo se crear elmenu es facil en html o en dreamwaver, lo que no se es hacer el submenu del las opciones del menu,