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ú.
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.
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.
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ú.
<!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>¿Quienes somos?</b></a></li>
<li class="nivel1"><a href="#" class="nivel1"><b>¿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.
/*-------------------------------------------------------------------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.