Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 11 de 11

Tema: Menú horizontal desplegable con css [solucionado]

  1. #1
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    27 jul, 06
    Ubicación
    Madrid
    Mensajes
    544
    Poder de Reputación
    19

    Menú horizontal desplegable con css [solucionado]

    Muy buenas,

    Estoy tratando de hacer un menú horizontal basado en CSS. El menú tiene varias partes:
    - Menú principal.
    - Algunas opciones con menú secundario.

    La idea es que el menú principal tenga pestañitas y el secundario no. Además, tanto el uno como el otro me gustaría que fuesen horizontales, con el menú secundario saliendo justo debajo del principal.

    Logros hasta el momento:

    - Menú principal horizontal y con pestañitas (qué mono!!)
    - Menú secundario sin pestañitas y justo debajo del principal.

    Necesito:

    - Qué el menú secundario salga también horizontal y llevo varios días sin conseguirlo

    En fin aquí os dejo el código del Menú:

    Código:
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
      <title>Menu</title>
      <link rel="stylesheet" type="text/css" href="menu.css"  />
    
    <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>
    
    </head>
    
    <body>
    <div id="menu">
    	<ul id="nav">
    		[*]Inicio
    		<li id="activo">Entrevistas
    			<ul id="subm">
    				[*]Grupos
    				[*]Actores
    				[*]Otros famosos
    			[/list]
    		
    		[*]Otros articulos
    		[*]Firmas
    			<ul id="subm">
    				[*]Deivi
    				[*]Tanuka
    				[*]Mareliel
    				[*]Claudia
    				[*]Maryi
    				[*]Jose Ma
    			[/list]
    		
    		[*]Ocio
    			<ul id="subm">
    				[*]Críticas de cine
    				[*]Chiste del mes
    			[/list]
    		
    	[/list]
    </div>
    </body>
    </html>
    Y ahora el de la hoja de estilos (CSS):

    Código:
    #menu {
    	float: left;
    	width: 100% ;
    	text-align: center ;
    	clear: both ;
    	background: #DAE0D2 url("bg.gif") repeat-x bottom;
    }
    #menu ul {
    	list-style: none;
     	display: inline;
    	margin: 0;
    	padding: 10px 10px 0;
    }
    #menu li {
    	float: left;
    	position: relative;
    	color: #40A035;
    	padding:0 0 0 9px;
    	margin: 0;
    	background: url("left.gif") no-repeat left top;
    	display: block;
    }
    #menu #activo {
    	color: #EDFBEB;
    	background-image: url("left_on.gif");
    }
    #menu #activo a {
    	background-image: url("right_on.gif");
    	padding-bottom: 5px;
    }
    #menu #activo li, #menu #activo li a, #menu #subm li, #menu #subm li a {
    	background: #DAE0D2 url("bg.gif") repeat-x bottom;
    }
    #menu li ul {
    /* se ocultan los submenus */
    	display: block;
    	visibility: hidden;
    	position: absolute;
    	width: auto;
    	top: 1.25em;
    	left: 0;
    }
    #menu ul li > #menu ul {
    	top: auto;
    	left: auto;
    }
    #menu ul li:hover ul, #menu ul li.over ul { 
    	visibility: visible;
    }
    /* se hacen visibles los submenus */
    #menu #activo ul, #menu li:hover ul {
    	visibility: visible;
    }
    /* por defecto se ve el submenu que dependa de la opcion activa */
    #menu #activo ul {
    	z-index: 10;
    }
    /* el z-index del hover es mayor para poder ver el submenú de otras opciones */
    #menu li:hover ul {
    	z-index: 100;
    }
    #menu ul li a {
    	float: left;
    	display: block;
    	text-decoration: none;
    	color: #40A035;
    	background: url("right.gif") no-repeat right top;
    /* el padding para la izquierda es también de 15 (como la dere), pero al haber puesto 9 en el elemento "li" hay que descontarlo aquí */
    	padding: 5px 15px 4px 6px;
    	font-weight: bold;
    }
    #menu a:hover {
    	color: #B73CBB;
    }
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    * #menu a { float: none ; }
    /* End */
    A ver si alguien me puede ayudar un poquito :D

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    27 jul, 06
    Ubicación
    Madrid
    Mensajes
    544
    Poder de Reputación
    19
    Bueno, la solución al final no era para tanto, pero no sabéis lo que me ha costado encontrarla.

    El caso es que sobraba la propiedad
    Código:
    position:relative
    incluida en "#menu li".

    Por si a alguien le surge la necesidad os diré que la base de este tipo de menús es configurar las listas con el siguiente código:

    Código:
    li { float: left ; margin-right: 4px ;}
    li ul { display: block ;
    	visibility: hidden;
    	position: absolute ;
    	left: 9px; }
    li:hover ul { visibility: visible;}
    con las soluciones normales de los diferentes "bugs" (es decir, el scrip para IE y código de CSS para los usuarios de Mac con IE) para que se vea bien en todos los navegadores y referidos a las etiquetas correspondientes para que no todas las listas sean así.

    En definitiva, que basándonos en el código anterior podemos hacer menús muy aparentes. (A mi ahora sólo me queda terminar de hacerlo bonito)

  3. #3
    Administrador CCTW Webmaster de CCTWHabitante
    Fecha de Ingreso
    10 ago, 05
    Ubicación
    Cartagena, España
    Mensajes
    3,721
    Poder de Reputación
    10
    Como mola, gracias.

    Imagino que me dejarás que lo coloque de lección en la web, no? A tu salud, claro!

  4. #4
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    27 jul, 06
    Ubicación
    Madrid
    Mensajes
    544
    Poder de Reputación
    19
    Claro, cómo no!!!

  5. #5
    Recien Llegado! Merodeador
    Fecha de Ingreso
    19 jul, 08
    Ubicación
    Rosario
    Mensajes
    5
    Poder de Reputación
    0
    Claro, como Bien dijo. Nomás tendrias que agregar lo siguiente:
    Código:
    ... ; background-repeat: no-repeat
    Era muy Fácil y aparece en el Curso paso a paso escrito por el Administrador ;)

    ¡Saludos!.
    ¡Gonzah!. Llegando a Ser Profesional... (Y)

  6. #6
    Recien Llegado! Merodeador
    Fecha de Ingreso
    05 jun, 09
    Mensajes
    3
    Poder de Reputación
    0
    Hola,oye aver si puedes poner el codigo final de este menu horizontal que es bastante bueno,pero copiandome ese codigo sale el otro menu debajo totalmente pegado :? Gracias

  7. #7
    Me va gustando esto... Habitante
    Fecha de Ingreso
    29 mar, 08
    Mensajes
    44
    Poder de Reputación
    15
    Yo tengo una duda, quiero que en mi menu desplegable en lugar de ser con letras sea con imagenes, como lo hago??

  8. #8
    Recien Llegado! Habitual
    Fecha de Ingreso
    02 ene, 09
    Mensajes
    14
    Poder de Reputación
    12
    Supongo, desde la total inesperiencia, que sera poniendo una imagen, en vede el texto.

  9. #9
    Recien Llegado! Habitante
    Fecha de Ingreso
    07 mar, 11
    Mensajes
    27
    Poder de Reputación
    10
    hq buenas amigo quiero que me hagas un favor me puedes explicar como subistes esas capturas para que se deslizen asi para colocarlas ene l foro yo solo puedo colocar las capturas pero congeladas me gustan asi como la tienes desplegables espero q me enseñes gracias

  10. #10
    Recien Llegado! Merodeador
    Fecha de Ingreso
    20 oct, 12
    Mensajes
    3
    Poder de Reputación
    0
    Debo ser muy cabeza dura ... lo he intentado un par de veces pero no lo puedo hacer ... alguien seria capaz de darme un ejemplo, el mas basico posible, con 1 solo sub menu ... yo creo q con eso me las arreglo .. .saludos !!!! ----.-----

  11. #11
    Recien Llegado! Merodeador
    Fecha de Ingreso
    07 oct, 17
    Mensajes
    3
    Poder de Reputación
    0
    Como mola, gracias.

    Imagino que me dejarás que lo coloque de lección en la web, no? A tu salud, claro!

Temas Similares

  1. menú desplegable horizontal
    Por diamondminibull en el foro Todo sobre Estilos CSS
    Respuestas: 0
    Último Mensaje: 08/05/2010, 11:23
  2. MENU DESPLEGABLE HORIZONTAL
    Por Lidia19 en el foro Todo sobre Estilos CSS
    Respuestas: 6
    Último Mensaje: 15/06/2009, 22:18

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •