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

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
    20

    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
    20
    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
    20
    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
    16
    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
    13
    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
    11
    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!

  12. #12
    Recien Llegado! Habitual
    Fecha de Ingreso
    02 dic, 17
    Ubicación
    Lâm Đồng
    Mensajes
    10
    Poder de Reputación
    1
    Última edición por thuan114971; 29/12/2017 a las 07:24 Razón: change

  13. #13
    Recien Llegado! Habitual
    Fecha de Ingreso
    02 dic, 17
    Ubicación
    Lâm Đồng
    Mensajes
    10
    Poder de Reputación
    1
    Tiếp nối sự thành công của dự án Him Lam Phú Đông (nằm trên đại lộ Phạm Văn Đồng), Công ty cổ phần kinh doanh địa ốc Him Lam (Him Lam Land) và Phú Đông Land tiếp tục công bố thêm sự ra đời của dự án*căn hộ Phú Đông Premier. Dự án Phu Dong Premier *này đã thu hút sự chú ý của nhiều nhà đầu tư ngay từ lúc*...

  14. #14
    Recien Llegado! Habitual
    Fecha de Ingreso
    02 dic, 17
    Ubicación
    Lâm Đồng
    Mensajes
    10
    Poder de Reputación
    1
    Vị Trí Chiến Lược dự án đất nền Areca Villa Long An – Nằm kế bên chợ Đức Hòa cách Khu Công Nghệ Tân Thới Hiệp chỉ 1,5km. – Cách đường Quốc lộ 1A chỉ 2km. – Cách tuyến đường sắt Metro – Thạnh Xuân – Nhà Bè chỉ 4 km. TỪ ARECA VILLA DI CHUYỂN

    Đất nền Areca Villa tới Công viên phần mềm Quang Trung chỉ mất 8 phút.
    Dự án Areca Villa tới Metro Hiệp Phú chỉ 5 phút
    Areca Villa Quận 12 tới Coop Mart quận 12 chỉ 3 phút
    Areca Villa tới chợ Hiệp Thành quận 12 chỉ 2 phút.
    Areca Villa tới sân bay Tân Sơn Nhất chỉ 25 phút.
    Areca Villa tới bệnh viện quận 12 chỉ 4 phút.
    Areca Villa Long An tới THCS Nguyễn Trung Trực chỉ 1 phút.
    Vị trí Areca Villa tới ĐH Lao động Xã hộ chỉ 7 phút.
    Quỹ đất tại khu vực thành phố đang dần cạn và đặc biệt những dự án đất nền có vị trí đắc địa xung quanh các đặc khu kinh tế khu công nghiệp, do vậy các nền khu dân cư Areca Villa chào bán thời điểm này là hết sức nóng hổi cho người mua nhà an cư lạc nghiệp.

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
  •