Foros del Web » Creando para Internet » CSS »

menu desplegable en CSS

Estas en el tema de menu desplegable en CSS en el foro de CSS en Foros del Web. Por fa alguien me podria orientar como lograr este menu con CSS (agreguenle el www por que cada vez q quiero colocarlo no me acepta ...
  #1 (permalink)  
Antiguo 11/01/2007, 16:46
 
Fecha de Ingreso: noviembre-2006
Mensajes: 36
Antigüedad: 11 años, 1 mes
Puntos: 1
menu desplegable en CSS

Por fa alguien me podria orientar como lograr este menu con CSS
(agreguenle el www por que cada vez q quiero colocarlo no me acepta el msg si de paso alguien me explica por q... por q aun no se cuales son las reglas del foro) .unprg.edu.pe

ya tengo algo similar pero mi problema es que el submenu me aparece atras del menu principal que propiedades puedo cambiar ya que lo tengo con listas...

por si acaso este es el codigo ya que no encontré la manera de insertar una imagen...

<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>

<style type="text/css">
<!--
.menuTitle {
font-family:comic Sans MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:normal;
line-height: 12px; }

a:link {
text-decoration: none; }

a:visited {
text-decoration: none; }

a:hover {
text-decoration: none; }

a:active {
text-decoration: none; }

ul { /* todas las opciones*/
margin: 0;
padding: 0;
list-style: none;
width: 140px;
border-bottom:1px solid #000000;/*#A2A2A2*/
/*borde final de cada bloque*/ }

ul li {
position:relative; }

li ul { /*conj de elementos de cada opción*/
position:absolute;
left: 130px;
top: 5;
display: none;
/* border-style:none;*/
width:145px; }

ul li a { /*cada opcion*/
display: block;
text-decoration: none;
color: #000000; /*ffffff;*/
background:url(images/fondoaux.gif);
padding: 7px;
border: 1px solid #000000/*#A2A2A2*/;
border-bottom: 1;
width:inherit;
clear:both;
}

ul li ul li a{ /*cada elemento de la opción*/
background:url(images/fondoaux.gif);
/* color:#666666;*/
border-color:#000000/*#A2A2A2*/;
}


/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul {
display: block; }

ul li a:hover{
BACKGROUND: #f9f9f9;
COLOR:#004080;
}

LI UL A:hover {
BACKGROUND:#999999;
COLOR:#ffffff;
}

-->
</style>

<body>
<ul type="disc" id="nav">
<li class="menuTitle"><a href="#">Period&iacute;sticos</a>
<ul>
<li><a href="?System=Noticiasdel21&action=Inicio" >Noticias del 21</a></li>
<li><a href="?System=AmpliaciondeNoticias&action=Inicio" >Ampliación de Noticias</a></li>
<li><a href="?System=AbriendoFuego&action=Inicio">Abriend o Fuego</a></li>
<li><a href="?System=EnDirecto&action=Inicio">En Directo</a></li>
<li><a href="?System=MinutoaMinuto&action=Inicio">Minuto a minuto</a></li>
<li><a href="?System=TeleSemana&action=Inicio">Telesemana </a></li>
<li><a href="?System=PuntoDeEncuentro&action=Inicio">Punt o de Encuentro </a></li>
</ul>
</li>
<li class="menuTitle"><a href="#">Deportivos</a>
<ul>
<li><a href="?System=AntesalaDeportiva&action=Inicio">Ant esala Deportiva </a></li>
</ul>
</li>
<li class="menuTitle"><a href="#">Entretenimento </a>
<ul>
<li><a href="?System=ComoenCasa&action=Inicio">Como en Casa</a></li>
<li><a href="?System=LaGranPena&action=Inicio">La Gran Pe&ntilde;a de Chiclayo</a></li>
<li><a href="?System=MusikparatusOjos&action=Inicio">Musi k para tus ojos</a></li>
<li><a href="index2.php?System=MasRock&action=Inicio">+ Rock </a></li>
</ul>
</li>
<li class="menuTitle"><a href="#">Religiosos</a>
<ul>
<li><a href="index2.php?System=ParedeSufrir&action=Inicio ">Pare de Sufrir</a></li>
</ul>
</li>
<li class="menuTitle"><a href="#">Programacion CBN</a>
<ul>
<li><a href="#">Vida Dura</a></li>
<li><a href="#">Agua Viva</a></li>
<li><a href="#">Club 700 Hoy</a></li>
<li><a href="#">One Cubed</a></li>
</ul>
</li>
<li class="menuTitle"><a href="#">Culturales
</a>
<ul>
<li><a href="#">Culturales del 21</a></li>
<li><a href="#">Rescatando Tradiciones</a></li>
</ul>
</li>
<li class="menuTitle"><a href="#">Cine</a></li>
</ul>

</body>
</html>


gracias de antemano

Última edición por Lisyromi; 11/01/2007 a las 17:03
  #2 (permalink)  
Antiguo 11/01/2007, 18:49
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: menu desplegable en CSS

No sé si es exactamente lo que necesitas, pero puedes probar con esto:

Código:
  <style type="text/css">
.menuTitle { font-family: "comic Sans MS",Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
font-size: 11px;
line-height: 24px;
}
a:link { text-decoration: none;
}
a:visited { text-decoration: none;
}
a:hover { text-decoration: none;
}
a:active { text-decoration: none;
}
ul { border-bottom: 1px solid rgb(0, 0, 0);
margin: 0pt;
padding: 0pt;
list-style-type: none;
width: 160px;
}
li { border: 1px solid rgb(0, 0, 0);
height: 25px;
}
li ul { position: absolute;
left: 130px;
display: none;
width: 145px;
}
ul li a { border-color: rgb(0, 0, 0);
border-width: 1px;
background: transparent url(images/fondoaux.gif) repeat scroll 0% 50%;
text-decoration: none;
display: block;
padding-left: 7px;
color: rgb(0, 0, 0);
}
ul li ul li a { background: transparent url(images/fondoaux.gif) repeat scroll 0% 50%;
}
* html ul li { float: left;
}
* html ul li a { height: 1%;
}
li:hover ul, li.over ul { display: block;
}
ul li a:hover { background: rgb(249, 249, 249) none repeat scroll 0% 50%;
color: rgb(0, 64, 128);
}
li ul a:hover { color: rgb(255, 255, 255);
background-color: rgb(153, 153, 153);
}
  </style>
</head>
<body>
<ul id="nav">
  <li class="menuTitle"><a href="#">Period&iacute;sticos</a>
    <ul>
      <li><a href="#">Noticias
del 21</a></li>
      <li><a href="?System=AmpliaciondeNoticias&amp;action=Inicio">Ampliaci&oacute;n
de Noticias</a></li>
      <li><a href="?System=AbriendoFuego&amp;action=Inicio">Abriend
o Fuego</a></li>
      <li><a href="?System=EnDirecto&amp;action=Inicio">En
Directo</a></li>
      <li><a href="?System=MinutoaMinuto&amp;action=Inicio">Minuto
a minuto</a></li>
      <li><a href="?System=TeleSemana&amp;action=Inicio">Telesemana</a></li>
      <li><a href="?System=PuntoDeEncuentro&amp;action=Inicio">Punto
de Encuentro</a></li>
    </ul>
  </li>
  <li class="menuTitle"><a href="#">Deportivos</a>
    <ul>
      <li><a href="?System=AntesalaDeportiva&amp;action=Inicio">Antesala
Deportiva</a></li>
    </ul>
  </li>
  <li class="menuTitle"><a href="#">Entretenimento</a>
    <ul>
      <li><a href="?System=ComoenCasa&amp;action=Inicio">Como
en Casa</a></li>
      <li><a href="?System=LaGranPena&amp;action=Inicio">La
Gran Pe&ntilde;a de Chiclayo</a></li>
      <li><a href="?System=MusikparatusOjos&amp;action=Inicio">Musi
k para tus ojos</a></li>
      <li><a href="index2.php?System=MasRock&amp;action=Inicio">+
Rock </a></li>
    </ul>
  </li>
  <li class="menuTitle"><a href="#">Religiosos</a>
    <ul>
      <li><a
 href="index2.php?System=ParedeSufrir&amp;action=Inicio%20">Pare
de Sufrir</a></li>
    </ul>
  </li>
  <li class="menuTitle"><a href="#">Programacion
CBN</a>
    <ul>
      <li><a href="#">Vida Dura</a></li>
      <li><a href="#">Agua Viva</a></li>
      <li><a href="#">Club 700 Hoy</a></li>
      <li><a href="#">One Cubed</a></li>
    </ul>
  </li>
  <li class="menuTitle"><a href="#">Culturales</a>
    <ul>
      <li><a href="#">Culturales del 21</a></li>
      <li><a href="#">Rescatando Tradiciones</a></li>
    </ul>
  </li>
  <li class="menuTitle"><a href="#">Cine</a></li>
</ul>
</body>
</html>
A ver qué tal. Ya dirás.

Mikel.
  #3 (permalink)  
Antiguo 11/01/2007, 19:25
 
Fecha de Ingreso: noviembre-2006
Mensajes: 36
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: menu desplegable en CSS

Gracias Mikmoro, pero el detalle es que con el codigo q me facilitas el sub menu queda alineado con la parte inferior de la opcion, y lo que deseo es que no quede en los bordes sino como un efecto de superpuesto unos pixeles mas abajo del borde superior y unos pixeles mas a la izquierda del borde derecho. por fis
  #4 (permalink)  
Antiguo 11/01/2007, 19:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: menu desplegable en CSS

Edito el mensaje para corregir un error.

Simplemente añade a tu selector li ul un margen superior negativo:

li ul { position: absolute;
left: 130px;
display: none;
width: 145px;
margin-top: -15px;
}

Con esto lo colocarás donde quieras con respecto a su contenedor. De todas maneras, mi código era una muestra de cómo resolverlo y por dónde podrías trabajar, para que luego hicieras con esa base lo que quieras conseguir

Mikel.

Última edición por Mikmoro; 11/01/2007 a las 20:07 Razón: Lo edito para corregir un error
  #5 (permalink)  
Antiguo 12/01/2007, 09:09
 
Fecha de Ingreso: noviembre-2006
Mensajes: 36
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: menu desplegable en CSS

una vez mas GRACIAs Mikmoro, no te enfades, lo que pasa es que llevo poco tiempo con CSS recién estoy entendiendo el significado de las propiedades, y por las correcciones que has hecho al código te darás cuenta q hubo lineas q quizas no tenian sentido y muchos comentarios que eran producto de las pruebas q iba haciendo,,,, con la referencia que me das puedo adaptarlo a mi necesidad.... GRACIAS!!!!
  #6 (permalink)  
Antiguo 12/01/2007, 09:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: menu desplegable en CSS

¿Enfadarme? Por descontado. Encantado de ayudarte. Plantea todo lo que necesites, que yo me divierto mucho buscando soluciones con css. Me lo paso pipa. Disculpa si te ha parecido que te echaba una reprimenda. Ni mucho menos.

Mikel.
  #7 (permalink)  
Antiguo 06/09/2007, 21:06
Avatar de rockobop  
Fecha de Ingreso: octubre-2004
Ubicación: Bolivia
Mensajes: 826
Antigüedad: 13 años, 1 mes
Puntos: 1
submenus no funcionan

hola Mikmoro

veo q eres un maestro de css espero me puedas echar una mano

mira te muestro mi css y mi html logre hacer un menu horizontal pero despues de batallar y hacer el submenu viejo me rendi no me sale pro ningun lado

Codigo HTML

Código HTML:
<div id="barizquierda">
                            
                            <h2 class="hide"></h2>
                        <ul class="avmenu" class="current">
                            <li><a href="index.html">Inicio</a></li>
                            <li><a href="styles.html">Informacion</a></li>
                            <li><a href="2-columns.html">Clientes</a></li>
                            
                                    <li><a href='infoClientes.php'>Nuestros Clientes</a></li>
                                    <li><a href='fotosClientes.php'>Fotos</a></li>
                            </ul>
                            <li><a href="3-columns.html">Nuestro Trabajo</a></li>
                            <li><a href="themes.html">Album de Fotos</a></li>
                            <li><a href="themes.html">Contacto</a></li>
                        </ul>
</div> 
bueno la idea como veraz es q pasando el mose sobre clientes aparezca el sub menu bueno hay varios niveles mas y otros submenus pero creo q con una idea ya podre resolver el resto

Codigo CSS

Código HTML:
#barizquierda ul.avmenu {list-style:none; 
margin:0 0 18px; 
padding:0; 
width:150px;}

#barizquierda ul.avmenu li {display:inline; 
padding:0; 
width:150px;}

#barizquierda ul.avmenu li a {background:url(images/dolphin_bg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; 
border-left:4px solid #ccc; 
border-right:1px solid #d8d8d8;
 border-top:1px solid #d8d8d8; 
 color:#FFFFFF; 
 float:left; 
 font-size:1em; 
 font-weight:700; 
 margin-bottom:5px; 
 padding:5px 1px 5px 5px; 
 text-decoration:none; 
 width:138px;}
 
#barizquierda ul.avmenu li a:hover,#barizquierda ul.avmenu li a.current {background:url(images/dolphin_bg-OVER.gif) repeat-x bottom left #eaeaea; 
border-bottom:1px solid #b0b0b0; 
border-left:4px solid #505050; 
border-right:1px solid #b0b0b0; 
border-top:1px solid #b0b0b0; 
color:#FFFFFF;}

#barizquierda ul.avmenu ul {font-size:0.9em; 
margin:0 0 0 15px; 
padding:0 0 5px 0; 
width:133px;}

#barizquierda ul.avmenu ul a {padding:3px 1px 3px 5px; 
width:123px;}
#barizquierda ul.avmenu ul ul {font-size:1em; 
width:120px;}

#barizquierda ul.avmenu ul ul a {width:108px;}
gracias por todo, y si alguien tb podria colaborar bien venido sea

saludos
__________________
:pensando: Tú no necesitas un libro mágico, un gurú carismático, rituales primitivos. Sólo necesitas tus cinco sentidos.:adios:
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 07:49.