Foros del Web » Creando para Internet » Diseño web »

¿Convertir este menú en desplegable?

Estas en el tema de ¿Convertir este menú en desplegable? en el foro de Diseño web en Foros del Web. Hola, antes de nada enhorabuena por el foro, muy bueno y muy bien presentado. Bien, me gustaría saber si puedo convertir este menú simple que ...
  #1 (permalink)  
Antiguo 03/04/2011, 06:53
 
Fecha de Ingreso: abril-2011
Mensajes: 6
Antigüedad: 6 años, 8 meses
Puntos: 0
¿Convertir este menú en desplegable?

Hola, antes de nada enhorabuena por el foro, muy bueno y muy bien presentado.

Bien, me gustaría saber si puedo convertir este menú simple que cogí de una web de recursos para el webmaster en desplegable:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Mi Web</TITLE>
<META content=3D"text/html; charset=3Dwindows-1252" =
http-equiv=3DContent-Type><LINK=20
rel=3Dstylesheet type=3Dtext/css=20
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/misestilos7.cs=
s">
<META name=3DGENERATOR content=3D"MSHTML 8.00.7600.16722"></HEAD>
<BODY>
<DIV id=3Dcontenedor>
<DIV id=3Dcabecera></DIV>
<DIV id=3Dinferior>
<DIV id=3Dcuerpo></DIV>
<DIV id=3Dizquierda>
<UL id=3Dmenu>
<LI>Menu de Opciones</LI>
<LI><A=20
=
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/ejemplo6.html#=
">IMAGES</A></LI>
<LI><A=20
=
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/ejemplo6.html#=
">CLIENTS</A></LI>
<LI><A=20
=
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/ejemplo6.html#=
">MAKING OF</A></LI>
<LI><A=20
=
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/ejemplo6.html#=
">VARIOUS</A></LI>
<LI><A=20
=
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/ejemplo6.html#=
">CONTACT</A></LI>
<LI><A=20
=
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/ejemplo6.html#=
">Elecci=F3n=20
6</A></LI>
<LI><A=20
=
href=3D"http://www.wmasterfacil.com/documentos/0047ejmenuv/ejemplo6.html#=
">Elecci=F3n=20
7</A></LI></UL></DIV>
<DIV id=3Dderecha></DIV></DIV>
<DIV id=3Dpie></DIV></DIV></BODY></HTML>

------=_NextPart_000_0014_01CBF195.C3A5DF80
Content-Type: text/css;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
Content-Location: http://www.wmasterfacil.com/documentos/0047ejmenuv/misestilos7.css

* {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: =
0px; PADDING-TOP: 0px
}
BODY {
TEXT-ALIGN: center; BACKGROUND-COLOR: white
}

#contenedor {
POSITION: relative; TEXT-ALIGN: left; BACKGROUND-COLOR: WHITE; MARGIN: =
auto; WIDTH: 1004px; HEIGHT: auto; TOP: 0px; LEFT: 0px
}
#cabecera {
POSITION: relative; BACKGROUND-COLOR: WHITE; WIDTH: 100%; HEIGHT: 100px; =
TOP: 0px; LEFT: 0px
}
#cuerpo {
POSITION: relative; BACKGROUND-COLOR: WHITE; MIN-HEIGHT: 700px; WIDTH: =
620px; HEIGHT: auto !important; TOP: 0px; LEFT: 200px
}
#pie {
POSITION: relative; BACKGROUND-COLOR: WHITE; WIDTH: 100%; HEIGHT: 40px; =
OVERFLOW: hidden; TOP: 0px; LEFT: 0px
}
#izquierda {
POSITION: absolute; BACKGROUND-COLOR: WHITE; WIDTH: 200px; HEIGHT: =
100%; OVERFLOW: hidden; TOP: 0px; LEFT: 0px
}
#derecha {
POSITION: absolute; BACKGROUND-COLOR: WHITE; WIDTH: 184px; HEIGHT: =
100%; OVERFLOW: hidden; TOP: 0px; LEFT: 820px
}
#inferior {
POSITION: relative; WIDTH: 100%; HEIGHT: auto; TOP: 0px; LEFT: 0px
}
UL#menu {
BORDER-BOTTOM: white 1px solid; BORDER-LEFT: WHITE 1px solid; =
PADDING-BOTTOM: 0px; LINE-HEIGHT: 220%; LIST-STYLE-TYPE: none; MARGIN: =
5px; PADDING-LEFT: 0px; WIDTH: 185px; PADDING-RIGHT: 0px; FONT-FAMILY: =
arial, verdana, sans-serif; FONT-SIZE: 12px; BORDER-TOP: WHITE 1px =
solid; LIST-STYLE-IMAGE: none; BORDER-RIGHT: WHITE 1px solid; =
PADDING-TOP: 0px
}
UL#menu LI {
BORDER-BOTTOM: white 1px solid; TEXT-ALIGN: center; BORDER-LEFT: WHITE =
1px solid; BACKGROUND-COLOR: WHITE; HEIGHT: 30px; COLOR: WHITE; =
BORDER-TOP: white 1px solid; FONT-WEIGHT: bold; BORDER-RIGHT: white 1px =
solid
}
UL#menu LI A {
BACKGROUND-COLOR: white; DISPLAY: block; HEIGHT: 100%; COLOR: BLACK; =
TEXT-DECORATION: none
}
UL#menu LI A:hover {
BACKGROUND-COLOR: grey
}

------=_NextPart_000_0014_01CBF195.C3A5DF80--


Vi los ejemplos que Mikel posteó en su día (geniales) pero al quitar las cajas y poner todo blanco menos el texto (como el ejemplo que os dejo) siempre estropeaba algo, así que he decidido intentar algo desde este más sencillo.

Gracias de antemano y un saludo

EDIT:

Otra opción sería quitar la caja de este otro y dejar solo el texto:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>FreeStyle Menus Demonstration</title>



-->


<!-- Demo CSS layouts for the list menu. Pick your favourite one and customise! -->
<!-- Remove all but one and change "alternate stylesheet" to "stylesheet" to enable -->
<link rel="stylesheet" type="text/css" id="listmenu-o"
href="listmenu_o.css" title="Vertical 'Office'" />
<link rel="alternate stylesheet" type="text/css" id="listmenu-v"
href="listmenu_v.css" title="Vertical 'Earth'" />
<link rel="alternate stylesheet" type="text/css" id="listmenu-h"
href="listmenu_h.css" title="Horizontal 'Earth'" />
<link rel="alternate stylesheet" type="text/css" id="listmenu-a"
href="listmenu_a.css" title="Accordion Menu" />

<!-- Fallback CSS menu file allows list menu operation when JS is disabled. -->
<!-- This is automatically disabled via its ID when the script kicks in. -->
<link rel="stylesheet" type="text/css" id="fsmenu-fallback"
href="listmenu_fallback.css" />

<!-- Alternatively, this CSS file is for the second div-based demo menu. -->
<link rel="stylesheet" type="text/css" href="divmenu.css" />

</head>

<body style="font: 13px/20px arial; background-color: white">
<font color="BLACK">

<div style="text-align: center">
<h1 style="font: 32px/48px sans-serif">FreeStyle Menus v1.0 RC12</h1>
by Angus Turnbull - <a href="http://www.twinhelix.com">http://www.twinhelix.com</a>.
Updated: 2 October 2009.
<hr />
</div>

<ul class="menulist" id="listMenuRoot">
<li>
<a href="#">IMAGES</a>
<ul>
<li><a href="#">Beauty</a></li>
<li><a href="#">Fashion</a></li>
</ul>
</li>

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

<li>
<a href="#">MAKING OF</a>
<ul>
<li><a href="#">Photo</a></li>
<li><a href="#">Video</a></li>
</ul>
</li>
</font>

<script type="text/javascript">



var listMenu = new FSMenu('listMenu', true, 'display', 'block', 'none');



listMenu.animations[listMenu.animations.length] = FSMenu.animFade;
listMenu.animations[listMenu.animations.length] = FSMenu.animSwipeDown;


var arrow = null;
if (document.createElement && document.documentElement)
{
arrow = document.createElement('span');
arrow.appendChild(document.createTextNode('>'));

arrow.className = 'subind';
}
addReadyEvent(new Function('listMenu.activateMenu("listMenuRoot", arrow)'));

</script>

<script type="text/javascript">

</script>



</body>
</html>


Pero tampoco sé como hacerlo porque he cambiado todos los colores de todo y los bordes de todo y nada, ni la más mínima alteración.

Saludos

Última edición por Diorkel; 03/04/2011 a las 07:03
  #2 (permalink)  
Antiguo 03/04/2011, 12:11
 
Fecha de Ingreso: marzo-2011
Mensajes: 184
Antigüedad: 6 años, 8 meses
Puntos: 11
Respuesta: ¿Convertir este menú en desplegable?

¿No sería más fácil que buscaras un menu desplegable y después le cambiaras el diseño? Sino es el caso, siempre puedes, de todos modos, ver como funciona un menu desplegable (bajandote, de igual manera, un ejemplo o script) y usar eso para cambiar este y hacerlo desplegable.

Saludos!

__________________
“Un estómago vacío, es un mal consejero.” Albert Einstein

Reflexiones, humor gráfico, chistes, Deporte, Consejos y tips
  #3 (permalink)  
Antiguo 03/04/2011, 18:43
 
Fecha de Ingreso: abril-2011
Mensajes: 6
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: ¿Convertir este menú en desplegable?

jaja, ya he aprendido a hacerlo, me estaba volviendo loco así que lo he creado desde cero y ya lo he conseguido, pero gracias por contestar.
  #4 (permalink)  
Antiguo 04/04/2011, 09:39
 
Fecha de Ingreso: abril-2011
Mensajes: 4
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: ¿Convertir este menú en desplegable?

Cita:
Iniciado por Diorkel Ver Mensaje
jaja, ya he aprendido a hacerlo, me estaba volviendo loco así que lo he creado desde cero y ya lo he conseguido, pero gracias por contestar.
je je compartelo ... saludos.

Etiquetas: desplegable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:26.