Entrar

duda menu lateral desplegable

denebola · · Solicitar retirada
En primer lugar, hola a todos, ya que es mi primer post, soy una nueva loca-novata en el tema de la informática y las páginas web.
Bueno estoy haciendo mi página, para promocionar mi estudio de arquitectura (que como esta el tema hay poco que hacer, jejej) y no se como colocar un menu desplegable. He estado leyendo comentarios de otros compañeros pero no se como aplicarlo a mi caso.


Os dejo mi html:

<head>
<title> GLOBAL Y EFIMERO | Estudio de Arquitectura </title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">



</head>
<body>


<p class="centrado"> Página en construcción. Disculpen las molestias </p>
<div id="global">
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul>

<li><a href="#">INICIO</a><li/>
<li><a href="#">PRESENTACIÓN</a><li/>
<li><a href="#">PROYECTOS</a><li/>
<li><a href="#">INTERIORISMO</a><li/>
<li><a href="#">CONTACTO</a><li/>
<ul/>
</div>
<p class="centrado"><img src="objetos/logo.jpg" width="300px" height="200px" alt</p><p></p></div>
<div id="pie">Este es el pié de página</div>
</div>
<p></p>
<p></p>
<p></p>



Que como veis es una cosa muy sencilla, y ahora mi css



* {margin:0px ; padding:0px ; border: 0px}
body {background-color: #1C1C1C}
img {border-style: none}
.centrado {text-align:center}
.izquierda {text-align:left}
.derecha {text-align:right}
#global {width:800px ; margin: 4px auto }
#navegacion {background-color: gray }
#contenido {background-color:#1C1C1C;width:800px; float:left;}
#menu {background-color: #1C1C1C; width: 150px ; float:left; text-align:left;font-size: 0.4cm;
font-family: Bankgothic md bt,verdana;font-weight:bold;}
#pie {background-color: brown}
#menu li {list-style:none;margin: 0px 0px 0px 0px}
body {text-align: center;font-family: Bankgothic md bt;font-size: 0.4cm}
a {color:silver; text-decoration:none}
a:link {}
a:visited {}
a:hover {color:#FF8C00 ; text-decoration:none}
a:active{}

<p><a href="mailto:[correo eliminado]">[correo eliminado] </a></p>
</body>
</html>


A ver si alguien me puede ayudar, porque estoy bastante perdida. Como veis no me he complicado mucho la vida, porque quiero algo muy claro, que si no luego hasta yo misma me pierdo.jeje.

Saludos.
skaparate · · Solicitar retirada
Hola, ¿lo que has posteado es exactamente lo que tienes en tu página.html (excluyendo el texto de color)? Si es así, entonces esta mal, tu página debe quedar así:

<html>
<head>
<title> GLOBAL Y EFIMERO | Estudio de Arquitectura </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="estilos.css" type="text/css" media="all" />
<!-- LO QUE ESTA ENTRE LAS ETIQUETAS <style></style> DEBE IR EN estilos.css -->
<style type="text/css" media="all">
* {margin:0px ; padding:0px ; border: 0px;}
body {background-color: #1C1C1C;}
img {border-style: none;}
.centrado {text-align:center;}
.izquierda {text-align:left;}
.derecha {text-align:right;}
#global {width:800px ; margin: 4px auto;}
#navegacion {background-color: gray;}
#contenido {background-color:#1C1C1C;width:800px; float:left;}
#menu {background-color: #1C1C1C; width: 150px ; float:left; text-align:left;font-size: 0.4cm;font-family: Bankgothic md bt,verdana;font-weight:bold;}
#pie {background-color: brown;}
#menu li {list-style:none;margin: 0px 0px 0px 0px;}
body {text-align: center;font-family: Bankgothic md bt;font-size: 0.4cm;}
a {color:silver; text-decoration:none;}
a:link {}
a:visited {}
a:hover {color:#FF8C00 ; text-decoration:none;}
a:active{}
</style>
</head>
<body>
<p class="centrado"> Página en construcción. Disculpen las molestias </p>
<div id="global">
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul>
<li><a href="#">INICIO</a><li/>
<li><a href="#">PRESENTACIÓN</a><li/>
<li><a href="#">PROYECTOS</a><li/>
<li><a href="#">INTERIORISMO</a><li/>
<li><a href="#">CONTACTO</a><li/>
<ul/>
</div>
<p class="centrado"><img src="objetos/logo.jpg" width="300px" height="200px" alt</p><p></p></div>
<div id="pie">Este es el pié de página</div>
</div>
</body>
</html>

También sería útil que mostraras el resultado y especificaras un poco más qué es lo que quieres o lo que buscas obtener :D.

Saludos.
denebola · · Solicitar retirada
Uff, perdón pero se me ha descolgado una cosa al pegarlo y por eso parece que esta mal.
Este es mi html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title> GLOBAL Y EFIMERO | Estudio de Arquitectura </title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">

</head>
<body>


<p class="centrado"> Página en construcción. Disculpen las molestias </p>
<div id="global">
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul>

<li><a href="#">INICIO</a><li/>
<li><a href="#">PRESENTACIÓN</a><li/>
<li><a href="#">PROYECTOS</a><li/>
<li><a href="#">INTERIORISMO</a><li/>
<li><a href="#">CONTACTO</a><li/>
<ul/>
</div>
<p class="centrado"><img src="objetos/logo.jpg" width="300px" height="200px" alt</p><p></p></div>
<div id="pie">Este es el pié de página</div>
</div>

<p><a href="mailto:[correo eliminado]">[correo eliminado] </a></p>

</body>


</html>


Y esta es mi hoja de estilos:

* {margin:0px ; padding:0px ; border: 0px}
body {background-color: #1C1C1C}
img {border-style: none}
.centrado {text-align:center}
.izquierda {text-align:left}
.derecha {text-align:right}
#global {width:800px ; margin: 4px auto }
#navegacion {background-color: gray }
#contenido {background-color:#1C1C1C;width:800px; float:left;}
#menu {background-color: #1C1C1C; width: 150px ; float:left; text-align:left;font-size: 0.4cm;
font-family: Bankgothic md bt,verdana;font-weight:bold;}
#pie {background-color: brown}
#menu li {list-style:none;margin: 0px 0px 0px 0px}
body {text-align: center;font-family: Bankgothic md bt;font-size: 0.4cm}
a {color:silver; text-decoration:none}
a:link {}
a:visited {}
a:hover {color:#FF8C00 ; text-decoration:none}
a:active{}

Lo que yo quiero que me quede es un menu desplegable como el de esta página por ejemplo
http://www.rubioalvarezsala.com/

pero en vertical, como en esta otra página
http://www.a-cero.com/

No puedo enseñar como queda la mia, porque todavia no la he colgado en internet, me da un poco de cosa ponerla tal cual, que está practicamente vacía, jeje.
ricky · · Solicitar retirada
Pues no se lo que te corrigieron si igual esta mal, presta atencion al cierre de etiquetas la contrabarra va primero </li> y no <li/>, no uses fuentes raras y esa medida "cm" cambiala por "px"=pixeles, yo te doy mi grano de arena con este menu que te hice:
<div id="menu">



<ul>

<li><a href="#">INICIO</a>

<ul>

<li><a href="#">PRESENTACIÓN</a></li>

<li><a href="#">PROYECTOS</a> </li>

<li><a href="#">INTERIORISMO</a></li>

<li><a href="#">CONTACTO</a> </li>

</ul>

</li>

</ul>

</div>
* {margin:0px ; padding:0px ; border: 0px}
body {
background-color: #1C1C1C;
}
#menu {
float:left;
}
#menu ul{list-style:none}
#menu ul li{
}
#menu ul li ul{
display:none;
}
#menu ul li a:hover ul, #menu ul li:hover ul{
display:block;
}
#menu ul li a {
color:silver;
text-decoration:none;
width:160px;
display:block;
border:1px red solid;
}
#menu ul li a:hover{
color:#FF8C00;
}

Personalizalo tu.
NOTA: se ve bien en ie8,ie9,chrome,firefox,opera... pero NO es compatible con versiones viejas como ie6 o netscape 5, para eso ahi que usar una tecnica de una tabla oculta y aun no la domino

RESULTADO:
[contenido no disponible]
denebola · · Solicitar retirada
Gracias ricky por hacer el menu, pero yo he copiado exactamente lo que me has puesto y no consigo lo que te ha salido a ti. Porque al pasar el raton por inicio, no se me despliega nada...voy a seguir tocando el html a ver si doy con la tecla, porque debo tener algo distinto que no veo.
Doodleo · · Solicitar retirada
Aquí tienes un menú desplegable, totalmente configurable en CSS y muy fácil:


Código CSS:
#menu {
text-align: center;
width:100%;
}
#menu ul { list-style-type: none; padding:0;}
#menu ul li.nivel1 {
[COLOR="lime"]width: 162px; /* Ancho de las pestañas */[/COLOR]
}
#menu ul li.primera {
[COLOR="lime"]border-top: solid 1px #FFF; /* Borde superior de la primera pestaña */[/COLOR]
}
#menu ul li {padding:0;}
#menu ul li a {
display: block;
text-decoration: none;
[COLOR="lime"]color: #fff; /* Color del texto */
background-color: #045FB4; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pestañas */[/COLOR]
border-top: none;
padding: 8px;
position: relative;
}
#menu ul li:hover {
position: relative;
[COLOR="lime"]color: #000; /* Color del texto al pasar el mouse */[/COLOR]
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
[COLOR="lime"]background-color: #6E6E6E; /* Color de fondo al pasar el mouse */[/COLOR]
color: #000;
position: relative;
}
#menu ul li a.nivel1 {
display: block!important;
display: none;
position: relative;
}
#menu ul li ul {
display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
display: block;
position: absolute;
left: 161px;
top:-1px!important;
top:-31px;
}
#menu ul li ul li a {
width: 160px;
[COLOR="lime"]background-color: #045FB4; /* Color de fondo subpestañas */
color: #fff; /* Color del texto subpestañas */[/COLOR]
}
#menu ul li ul li a:hover {
position: relative;
[COLOR="lime"]background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpestañas */
color: #000; /* Color del texto al pasar el mouse subpestañas */[/COLOR]
}

Ahora donde quieras pegar el menú pon esto:
<div id="menu"> 
<ul> 

<li class="nivel1 primera"><a href="[COLOR="red"]#[/COLOR]" class="nivel1">[COLOR="red"]INICIO[/COLOR]</a> 
<ul> 
<li class="primera"><a href="[COLOR="red"]#[/COLOR]">[COLOR="red"]SUBPESTAÑA DE INICIO[/COLOR]</a></li> 
<li><a href="[COLOR="red"]#[/COLOR]">[COLOR="red"]SUBPESTAÑA DE INICIO 2[/COLOR]</a></li>
</ul> 
</li>


<li class="nivel1"><a href="[COLOR="red"]#[/COLOR]" class="nivel1">[COLOR="red"]PRESENTACIÓN[/COLOR]</a> 
<ul> 
<li class="primera"><a href="[COLOR="red"]#[/COLOR]">[COLOR="red"]SUBPESTAÑA DE PRESENTACIÓN[/COLOR]</a></li>
<li><a href="[COLOR="red"]#[/COLOR]">[COLOR="red"]SUBPESTAÑA DE PRESENTACIÓN 2[/COLOR]</a></li> 
</ul> 
</li> 


<li class="nivel1"><a href="[COLOR="red"]#[/COLOR]" class="nivel1">[COLOR="red"]PROYECTOS[/COLOR]</a> 
<ul>
<li class="primera"><a href="[COLOR="red"]#[/COLOR]">[COLOR="red"]SUBPESTAÑA DE PROYECTOS[/COLOR]</a></li> 
<li><a href="[COLOR="red"]#[/COLOR]">[COLOR="red"]SUBPESTAÑA DE PROYECTOS 2[/COLOR]</a></li> 
</ul> 
</li> 


<li class="nivel1"><a href="[COLOR="red"]#[/COLOR]" class="nivel1">[COLOR="red"]INTERIORISMO[/COLOR]</a> 
<ul> 
<li class="primera"><a href="[COLOR="red"]#[/COLOR]">[COLOR="red"]SUBPESTAÑA DE INTERIORISMO[/COLOR]</a></li> 
<li><a href="[COLOR="red"]#[/COLOR]">[COLOR="red"]SUBPESTAÑA DE INTERIORISMO 2[/COLOR]</a></li> 
</ul> 
</li> 


<li class="nivel1"><a href="[COLOR="red"]#[/COLOR]" class="nivel1">[COLOR="red"]CONTACTO[/COLOR]</a>  
</li> 

</ul> 
</div>
denebola · · Solicitar retirada
Para conseguir esos efectos tengo que tener la página ya colgada en internet? Porque he copiado exactamente lo mismo que me habeis puesto en una plantilla nueva, para cerciorarme de que no arrastro ningún error con mi página, y solo veo un menú estático. Para dinamizar la página tengo que colocar un Scrip?
Doodleo · · Solicitar retirada
Has puesto el CSS en la hoja de estilos? Asegúrate que es en la hoja de estilos y no en la página html
No, con el menú que te hemos puesto no hace falta ningún script
denebola · · Solicitar retirada
Ya lo he conseguido por fin¡¡, Muchas gracias doodleo. Me he registrado temporalmente en una página con dominio y hosting gratis y he colgado la plantilla en internet y ahora si que puedo verlo. Por ahora hay un revoltillo de menu pero lo ire cambiando con tiempo.
Saludos.
Doodleo · · Solicitar retirada
En el CSS te puse en verde lo que puedes cambiar, hay más cosas pero con eso ya puedes hacer un buen menú :D