Regresar a la página www.ComoCrearTuWeb.com

Ver Resultados de Encuesta: ¿Que tan util te fue mi aporte?

Votantes
5. No puedes votar en esta encuesta
  • Muy util

    3 60.00%
  • Util

    2 40.00%
  • Regular

    0 0%
  • Casi nada

    0 0%
  • Nada

    0 0%
Encuesta de Elección Múltiple.
Resultados 1 al 10 de 10

Tema: Mi aporte a cctw, Menu desplegable horizontal solo con "Html y CSS".

  1. #1
    Recien Llegado! Merodeador
    Fecha de Ingreso
    02 ene, 10
    Mensajes
    6
    Poder de Reputación
    0

    Post Mi aporte a cctw, Menu desplegable horizontal solo con "Html y CSS".

    Hola amigos de cctw, quiero agradecerles a todos, y en especial a jorgens por crear esta web tan maravillosa, gracias a él, estoy por terminar mi web, luego se las mostrare cuando esté terminada.

    Al grano, verán, después de terminar el esqueleto de mi página, descubrí que faltaba algo esencial, un menú desplegable, ya que hay muchas sub paginas a las que debo enlazar, y el menú que nos plantea jorgens, no me sirvió de mucho. Encontré un menú horizontal desplegable en cctw, pero tenía problemas de compatibilidad con navegadores, asi que me di a la tarea de hacer uno.

    Después de muchos frustrantes intentos fallidos, decidí buscar entre las páginas que visito, alguna pieza de código que me fuese útil, pero al final obtuve el mismo resultado.

    Hasta que, un día, armado de valor y un buen café con leche, me decidí a modificar un menú que encontré, luego de 13hs y 38 min, logre hacer uno que funcionara en los 3 navegadores dominantes, IE, FF y Chm... Sin flash, ni java.

    Y aquí se los comparto, no sin antes, recomendarles leer un poco de "Comentarios condicionales", ya que sin estos, no sería posible este menú.


    Código HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Menu</title>
    </head>
    
    
    <body>
    
    	<div id="navegacion">
    
                
            <div id="menu">
                <div id="derecha">
                </div>
                <div id="izquierda">
                </div>
    
                      <ul>
    						<li class="nivel1"><a href="../index.html" class="nivel1"><b>Inicio</b></a></li>
                            <li class="nivel1"><a href="#" class="nivel1" style=""><b>Precios y servicios</b></a>
                                        <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
                                        
                                          <ul>
                                                
                                                <li><a href="#">Encuadenaciones</a></li>
                                                <li><a href="#">Notas de venta</a></li>
                                                <li><a href="#">Tripticos</a></li>
                                                <li><a href="#">Volantes</a></li>
                                        
                                    	  </ul>
                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        	</li>
                            <li class="nivel1"><a href="#" class="nivel1"><b>&iquest;Quienes somos?</b></a></li>
                            <li class="nivel1"><a href="#" class="nivel1"><b>&iquest;Donde estamos?</b></a></li>
                            <li class="nivel1"><a href="#" class="nivel1"><b>Contactanos</b></a></li>
                      </ul>
            </div>
                
        </div>
    
    
    </body>
    </html>


    Como ven, es casi igual al menú de jorgens, tiene mas o menos la misma estructura de listas desordenadas, pero la diferencia radica en el funcionamiento... Sin ofender.

    Pero, claro, si ejecutan este código html así como esta, pues, se llevaran una sorpresa desagradable, así que, ¿Que creen que le falta?... Pues claro, el CSS.



    Código HTML:
    /*-------------------------------------------------------------------MENU-----------------------------------------------------------------------------------*/
    
    
    
    #derecha{					  /*Curva derecha del menu*/
    	
    	width:15px;
    	height: 40px;
    	background-color:#F5F5F5;
    	float:left;
    	background-image: url(objetos/ejemplo2.gif);
    	margin:0px;
    	padding:0px;
    	border:0px;
    }
    
    
    #izquierda{					   /*Curva izquierda del menu*/
    	
    	width:15px;
    	height: 40px;
    	background-color:#F5F5F5;
    	float: right;
    	background-image: url(objetos/ejempo.gif);
    	margin: 0px;
    	padding:0px;
    	border:0px;
    }
    
    
    
    #menu {  						/*Estilos de la capa menu*/
    	text-align: center;
    	font-size: 0.7em;
    	width: 800px;
    	height:40px;
    	border:0px;
    	padding:0px;
    	margin-top: 5px;
    	margin-bottom: 5px;
    	background-color:#000;
    	
    }
    #menu ul {                       /*Para los estilos de las listas*/
    	list-style-type: none;
    }
    
    #menu ul li.nivel1 { 			/*Para las li de primer nivel*/
    	float: left;
    	width: 150px;
    	margin-right: 2px;
    	margin-left: 2px;
    	margin-top: 4px;
    	margin-bottom: 2px;
    }
    
    #menu ul li a {              					/*Es para los items de primer nivel, recuerden que son enlaces hacia sitios de la web, no parrafos*/
    	display: block;
    	text-decoration: none;
    	color: #fff;
    	/*background-color: #03C;*/
    	/*border: solid 1px #fff;*/
    	padding: 8px;
    	position: relative;
    }
    
    #menu ul li:hover { 										/*Propiedad css de posicionamiento del despliege de sub menu*/
    	position: relative;
    }
    
    #menu ul li a:hover, #menu ul li:hover a.nivel1 { 			/*Estilos cuando el cursor este sobre los LI*/
    	background-color: /*#006*/;
    	color:  /*#000*/;
    	position: relative;
    	font-weight: bold;
    	font-style: italic;
    	font-size: 12.5px
    }
    
    #menu ul li a.nivel1 {							/*Mantiene la estructura de el menu*/
    	display: block!important;
    	display: none;
    	position: relative;
    }
    
    #menu ul li ul {
    	display: none;
    }
    
    #menu ul li a:hover ul, #menu ul li:hover ul {   /*Describe el comportamiento que deve tener la sub lista que se despliegara*/
    	display: block;
    	position: absolute;
    	left: 0px;
    }
    
    #menu ul li ul li a {			                 /*Para los sub menus*/
    	width: 150px;
    	padding: 6px 0px 8px 0px;
    	border-top-color: #000;
    	background-color:#000;
    	left: -20px;
    }
    
    #menu ul li ul li a:hover {     				/*Estilos cuando el cursor esta sobre los enlaces*/
    	border-top-color: #000;
    	position: relative;
    }
    
    table.falsa {									/*Esto es para que el menu funcione en IE, ya que no soporta la pseudoclase HOVER*/
    	border-collapse:collapse;
    	border:0px;
    	float: left;
    	position: relative;
    }
    
    /*-------------------------------------------------------------FIN DEL MENU------------------------------------------------------------------------------------*/
    
    Pero valla parrafada de código no?... Sí, pero si lo ejecutan, funciona perfectamente.

    Ahora falta la explicación, en el css, se le asigna una propiedad a cada elemento según su posición, ejemplo, para un elemento como los submenus, la posición seria, ul li ul li{ Mas el estilo}, esto modificaría solo a los elementos de lista, que estén dentro de una ul, que está dentro de una li, dentro de una ul.

    Sé que es complicado, pero en este momento no tengo el enlace de una web que me explico este funcionamiento, les prometo que se las pondré en los comentarios más tarde.

    En cuanto a los elementos de curva, decidí agregarles bordes redondeados, pero debido a que no todos los navegadores soportan CSS 3 (Esplororer cof, cof), recurri a las enseñanzas del buen Jorgens.... DIVS.

    Las imágenes estarán en el archivo adjunto que les dejare.


    Disculpen que no esté tan hermoso, pero es como una versión austera, para que ustedes le den su estilo, aunque primero deberán leer y analizar el código, si requieren una explicación más detallada, solo pídanla en los comentarios, y les prometo que se las daré en cuanto tenga tiempo.

    Un saludo a todos.

    PD:

    Disculpen que no haya dedicado tanto tiempo como hubiese querido para este post, es solo la carrera es un poco demandante.
    Curiosidad y ganas de aprender.

  2. #2
    Esto empieza a ser un vicio... Habitante Avatar de Rabs
    Fecha de Ingreso
    16 jun, 11
    Ubicación
    Madrid
    Mensajes
    780
    Poder de Reputación
    13
    Muy buen menu ;) Lo intentaré probar en cuanto pueda :P
    Mericherno.es - Web del servidor DayZ hecha con la inestimable ayuda de johnetrep :)
    http://www.fernandosalcedo.com

  3. #3
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,045
    Poder de Reputación
    21
    Hmmm, no puedo decir que es bueno si no lo veo... no es una crítica, pero serviría mucho que mostraras una imágen o enlace a un sitio que utilice tu código :D.

    Gracias por el aporte :D. Por cierto, Internet Explorer 9 sí soporta CSS3; el gran problema es que esta versión solo funciona en Windows Vista y 7 (obvio, sino nadie tendría Windows Vista XD).

    Saludos.

  4. #4
    Me va gustando esto... Habitante
    Fecha de Ingreso
    24 ago, 11
    Mensajes
    28
    Poder de Reputación
    10
    man os felicito funciona a la perfeccion el menu :D
    Código:
    KevinSteling

  5. #5
    Esto empieza a ser un vicio... Habitante Avatar de olukarak
    Fecha de Ingreso
    28 jul, 10
    Ubicación
    Marte
    Mensajes
    1,868
    Poder de Reputación
    20
    Bien hecho!
    Ya de ahi uno puede anadirle sus estilos y demas.
    Tutorial de CSS3: http://www.comocreartuweb.com/consul...el-19-09-10%29

    Se borrarán los mensajes cuyo título no explique la duda: http://www.comocreartuweb.com/consul...titulo-la-duda!!

    Cómo preguntar en CCTW: http://www.comocreartuweb.com/consul...guntar-en-CCTW

  6. #6
    Recien Llegado! Merodeador
    Fecha de Ingreso
    02 ene, 10
    Mensajes
    6
    Poder de Reputación
    0
    OK, les enviare un archivo html mostrandoles que funciona el menu,
    Curiosidad y ganas de aprender.

  7. #7
    Me va gustando esto... Habitante
    Fecha de Ingreso
    24 ago, 11
    Mensajes
    28
    Poder de Reputación
    10
    man si puedes pon la url de la pagina donde aprendistes a hacer los menus ps
    Código:
    KevinSteling

  8. #8
    Esto empieza a ser un vicio... Habitante Avatar de olukarak
    Fecha de Ingreso
    28 jul, 10
    Ubicación
    Marte
    Mensajes
    1,868
    Poder de Reputación
    20
    La pagina es esta xD El menu esta hecho con sencillo HTML y CSS.
    Tutorial de CSS3: http://www.comocreartuweb.com/consul...el-19-09-10%29

    Se borrarán los mensajes cuyo título no explique la duda: http://www.comocreartuweb.com/consul...titulo-la-duda!!

    Cómo preguntar en CCTW: http://www.comocreartuweb.com/consul...guntar-en-CCTW

  9. #9
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,045
    Poder de Reputación
    21
    OK, les enviare un archivo html mostrandoles que funciona el menu
    Gracias :D.

  10. #10
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    30 sep, 11
    Mensajes
    1
    Poder de Reputación
    0
    genial, funciona genial... hasta que la intento colocar en mi página, ¿algún alma caritativa que me pueda aportar un poco de luz?

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

    <html>
    <!--GENERAL-->
    <head>
    <title>titulo de la pagina</title>
    </head>
    <link rel="stylesheet" href="estilos-general-suja.css" type="text/css" media="all">
    <meta http_equiv="Content-type" content="tex/html; chartset=iso-8859-1">
    <meta name="description" content="#"/>
    <meta name="keywords" content="#"/>
    <!--FIN DE GENERAL-->
    <!--CUERPO-->
    <body>
    <div id="global">
    <!--CABECERA-->
    <div id="cabecera">cabecera
    </div>
    <!--FINDE CABECERA-->
    <!--MENU SUP-->
    <div id="navegacion">
    <div id="menu">
    <ul>
    <li class="nivel1"><a href="#" class="nivel1">inicio</a></li>
    <li class="nivel1"><a href="#" class="nivel1" style="">nosotros</a></li>
    <li class="nivel1"><a href="#" class="nivel1" style="">galeria</a></li>
    <ul>
    <li><a href="#">imagenes</a></li>
    <li><a href="#">videos</a></li>
    </ul>
    <li class="nivel1"><a href="#" class="nivel1">servicios</a></li>
    <ul>
    <li><a href="#">servicio1</a></li>
    <li><a href="#">servicio2</a></li>
    <li><a href="#">servicio3</a></li>
    </ul>
    <li class="nivel1"><a href="#" class="nivel1">contacto</a></li>
    <li class="nivel1"><a href="#" class="nivel1">libro de visitas</a></li>
    </ul>
    </div>
    </div>
    <!--FIN DE MENU SUP-->
    <!--MENU LAT IZQ-->
    <div id="menuizq">
    <ul>
    <li><a href="#">menuizq1</a></li>
    <li><a href="#">menuizq2</a></li>
    <li><a href="#">menuizq3</a></li>
    </ul>
    </div>
    <!--FIN MENU LAT IZQ-->
    <!--CONTENIDOS-->
    <div id="contenido">
    <h1>pongo el título</h1>
    <p>joder vaya lio que me estoy haciendo no entiendo nada de nada no se por qué los putos menús me salen a su bola y eso me está empezando a desquiciar un poco</p>
    <h2>pongo el subtítulo</h2>
    <p>mierda, no entiendo nada</p>
    </div>
    <!--FIN CONTENIDOS-->
    <!--MENU LAT DER-->
    <div id="menuder">
    <ul>
    <li><a href="#">menuder1</a></li>
    <li><a href="#">menuder2</a></li>
    <li><a href="#">menuder3</a></li>
    </ul>
    </div>
    <!--FIN MENU LAT DER-->
    <!-- PIE -->
    <div id="pie">pie
    </div>
    <!-- FIN PIE-->
    </div>


    </body>
    <!-- FIN CUERPO -->
    </html>
    <!-- FIN PAGINA -->

    el CSS:
    *{text-indent:0px;margin:0px;padding:0px;border:0px}
    p{text-align:justify}
    h1{font-size:1.4em;color:yellow;font-weight:bold;text-decoration:none;text-align:center;}
    h2{font-size:1.2em;color:yellow;font-weight:bold;text-decoration:none;text-align:center;}
    body{text-align:center;}
    #global{width:1000px;margin:4px auto;border:black 1px solid}
    #cabecera{background-color:yellow;border-bottom:black 1px solid;height:100px}
    #navegacion {background-color:white; border:black 1px solid;}
    #menu{/*Estilos de la capa menu*/text-align:center;font-size:1em;height:80px;border:0px;padding:0px;margin-top:5px;margin-bottom:5px;}
    #menu ul{/*Para los estilos de las listas*/list-style-type: none;}
    #menu ul li.nivel1{/*Para las li de primer nivel*/float:left;width:160px;margin-right:2px;margin-left:2px;margin-top:4px;margin-bottom:2px;}
    #menu ul li.nivel1 a{/*Es para los items de primer nivel, recuerden que son enlaces hacia sitios de la web, no parrafos*/display:block;text-decoration:none;/*background-color:#03C;border:solid 1px #fff*/;padding:8px;position:relative;}
    #menu ul li:hover{/*Propiedad css de posicionamiento del despliege de sub menu*/position:relative;}
    #menu ul li a:hover, #menu ul li:hover a.nivel1 {/*Estilos cuando el cursor este sobre los LI*/background-color:/*#006*/;color:/*#000*/;position:relative;font-weight:bold;font-style:italic;font-size:12.5px}
    #menu ul li a.nivel1{/*Mantiene la estructura de el menu*/display:block!important;display:none;position:rela tive;}
    #menu ul li ul{display:none;}
    #menu ul li a:hover ul, #menu ul li:hover ul{/*Describe el comportamiento que deve tener la sub lista que se despliegara*/display:block;position:absolute;left:0px;}
    #menu ul li ul li a{/*Para los sub menus*/width:80px;padding:6px 0px 8px 0px;border-top-color:#000;background-color:#000;left:-20px;}
    #menu ul li ul li a:hover {/*Estilos cuando el cursor esta sobre los enlaces*/border-top-color:#000;position:relative;}
    #contenido{background-color:#BDB76B;margin:0px;padding:0px;border-right:black 1px solid;border-left:black 1px solid;width:600px;float:left;}
    #contenido p{margin:5px 10px 0px 10px;text-indent:15px;}
    #menuizq{background-color:blue;margin:0px;padding:0px;width:199px;floa t:left;text-align:left;}
    #menuizq li{list-style:none;margin:4px 8px 4px 6px;}
    #menuder{background-color:green;margin:0px;padding:0px;width:199px;flo at:left;text-align:right;}
    #menuder li{list-style:none;margin:4px 8px 4px 6px}
    #pie{background-color:pink;border-top:black 1px solid;height:100px;width:1000px}
    a{color:black;text-decoration:none;display:block}
    a:link{}
    a:visited{color:blue}
    a:hover{color:red;text-decoration:bold;background-color:silver;}
    a:active{}

Temas Similares

  1. index.html a la carpeta "web-ejemplo-cctw-internet"
    Por troglodita13 en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 8
    Último Mensaje: 11/04/2011, 17:29
  2. No sale "index.html" en "web-ejemplo-cctw-loc
    Por carnugo en el foro Foro General
    Respuestas: 2
    Último Mensaje: 18/06/2010, 06:12
  3. duda de plantilla "cctw" class="paso"
    Por jfdh en el foro Plantillas Para Tu Web
    Respuestas: 1
    Último Mensaje: 23/05/2010, 04:50

Etiquetas para este Tema

Permisos de Publicación

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