[TUTORIAL] menu desplegable en dos archivos (index y css)

Hola,

esto es un experimento casi secreto :shock: , yo y un amigo hemos estado trabajando en un pequeño proyecto donde se pueda usar unos desplegables faciles y sin muchas complicaciones, usando solo el css.
Para los novatos, novatos que pasan del curso de jorgens, tienen que crear un archivo llamado estilos.css, y escribir dentro de el:

/* empezamos desplegables */
	#nav-secondary, #nav-secondary ul {position:static}
	#nav-secondary, #nav-secondary li {list-style: none;margin:0;padding:0;background:#fff}
	#nav-secondary {padding-top:0;border-top: 1px solid #ccc;margin-top: 1px}
	#nav-secondary a {line-height:1.8;padding: 5px 0 5px 23px;background: #fff url("images/sprites.gif") no-repeat 10px -695px;font: bold 86% arial;display:block}
	#nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {text-decoration:none;cursor:pointer} 
	#nav-secondary a:link {color:#000} 
	#nav-secondary a:visited {color:#000} 
	#nav-secondary a:hover {color:#c00;background: #fee url("images/sprites.gif") no-repeat 10px -695px} 
	#nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {color:#c00} 
	#nav-secondary li {border-top: 1px solid #fff;border-bottom: 1px solid #ccc}
	#nav-secondary ul {margin: 0 0 1em 23px;padding:0}
	#nav-secondary li.active li a, #nav-secondary li.active li a:link, #nav-secondary li.active li a:visited {line-height:1.5;background: #fff url("images/sprites.gif") no-repeat 0 -798px;padding:0 0 0 12px;font-weight:normal;width:auto;color:#000;width:130px;display:block}
	#nav-secondary li.active li a:hover, #nav-secondary li.active li a:active {color: #c00}
	#nav-secondary li.active li {border: none;margin:0}
	#nav-secondary li.active li.active a:link, 
	#nav-secondary li.active li.active a:visited, 
	#nav-secondary li.active li.active a:hover, 
	#nav-secondary li.active li.active a:active {font-weight:bold}
	#nav-secondary ul ul {margin: 0 0 1em 13px;padding:0}
	#nav-secondary li.active li.active li a, #nav-secondary li.active li.active li a:link, #nav-secondary li.active li.active li a:visited {width:117px}
	#nav-secondary li.active li.active li a:link, 
	#nav-secondary li.active li.active li a:visited, 
	#nav-secondary li.active li.active li a:hover, 
	#nav-secondary li.active li.active li a:active {font-weight:normal}
	#nav-secondary li.active li.active li.active a:link, 
	#nav-secondary li.active li.active li.active a:visited, 
	#nav-secondary li.active li.active li.active a:hover, 
	#nav-secondary li.active li.active li.active a:active {font-weight:bold}
	#nav-secondary ul ul ul {margin: 0 0 1em 13px;padding:0}
	#nav-secondary li.active li.active li.active li a, #nav-secondary li.active li.active li.active li a:link, #nav-secondary li.active li.active li.active li a:visited {width:104px}
	#nav-secondary li.active li.active li.active li a:link, 
	#nav-secondary li.active li.active li.active li a:visited, 
	#nav-secondary li.active li.active li.active li a:hover, 
	#nav-secondary li.active li.active li.active li a:active {font-weight:normal}
	#nav-secondary li.active li.active li.active li.active a:link, 
	#nav-secondary li.active li.active li.active li.active a:visited, 
	#nav-secondary li.active li.active li.active li.active a:hover, 
	#nav-secondary li.active li.active li.active li.active a:active {font-weight:bold}
	#nav, #nav ul {padding: 0;margin: 0;list-style: none}
	#nav {font-weight:bold;height:2.09em;font: bold 96% arial;margin: 0 105px 0 40px}
	#nav li {position:relative;background: #999;float: left;width: 10em;display:block;margin: 0;border-bottom: 3px solid #666;border-right: 3px solid #252525;padding:0}
	#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {text-decoration:none;cursor:pointer;color:#fff;display: block;padding: 4px 10px 2px}
	#nav a:hover {color:#000}
	#nav li ul {border-left: 1px solid #c00;background: #f6f6f6 url("images/featurebox_bg.gif") no-repeat 100% 100%;width:15.8em;font-size:90%;margin-top:3px;position: absolute;font-weight:normal;left: -999em}
	#nav li:hover ul, #nav li.sfhover ul {left: 0;z-index:99999}
	#nav li li {background:none;float:none;border:none;border: 1px solid #999;border-top:1px solid #fff;border-right:none;border-left:none;padding-left:0}
	#nav li li.last {border-bottom:none}
	#nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover {color:#000;padding: 3px 10px 2px;width:14em}
	#nav li li a:hover {color:#fff;background:#c00}
	#nav li.active {background: #c00;border-bottom: 3px solid #c00}
	#nav li.active ul {border:none;background: #c00 url("images/featurebox2_bg.gif") no-repeat 100% 100%}
	#nav li.active a:link, #nav li.active a:visited, #nav li.active a:hover, #nav li.active a:active {}
	#nav li.active a:hover {color:#000}
	#nav li.active li {border:none;border-top: 1px solid #c15c5c;border-bottom: 1px solid #870000}
	#nav li.active li.last {border-bottom: none}
	#nav li.active li a:link, #nav li.active li a:visited, #nav li.active li a:hover, #nav li.active li a:active {color:#fff}
	#nav li.active li a:hover {background: #666 url("images/sprites.gif") repeat-x 0 99%;color:#fff}
	#nav li.active li.active a:link, #nav li.active li.active a:visited, #nav li.active li.active a:hover, #nav li.active li.active a:active {color:#fff;font-weight:bold;background: #666 url("images/sprites.gif") repeat-x 0 99%}
	#nav li {width:auto}
/* terminamos */

y luego en el index.html escribir:

<ul id="nav">
		<li class="first">[url="#"]Inicio[/url]
		<li class="active">[url="#"]Arte[/url]
			<ul>
			<li class="first">[url="#"]Madrid[/url]
			<li class="active">[url="#"]España[/url]
			[*][url="#"]Europa[/url]
			<li class="last">[url="#"]Resto del mundo[/url]
			[/list]
		
		[*][url="#"]Historia[/url]
			<ul>
			<li class="first">[url="#"]Prehistoria[/url]
			[*][url="#"]Edad media[/url]
			[*][url="#"]Siglo XVII[/url]
			[*][url="#"]Siglo XIX[/url]
			<li class="last">[url="#"]Siglo XX[/url]
			[/list]
		
		[*][url="#"]Historias del mundo[/url]
			<ul>
			[*]<a href"#">CRISIS?</a>
			[*][url="#"]Por la causa[/url]
			<li class="last">[url="#"]Otros[/url]
			[/list]
		
		<li class="last">[url="#"]Informacion[/url]
			<!--<ul>
			<li class="first"><a href="#"1</a>
			[*][url="#"]2[/url]
			[*][url="#"]3[/url]
			<li class="last">[url="#"]4[/url]
			[/list]-->
		
		[/list]

:arrow: este es un menu sencillo.

Lo he puesto aposta para ver si alguien podia hacer algo con el, nose ponerle submenus o algo parecido que hasta alli no he llegado :D , espero que los mejores y los no mejores de vosostros pueda ayudar, y usar este experimente para crear alfina un menu desplegable bueno.

Tambien quiero ver si podeis ver como se ve en todos los navegadores, el firefox y el explore.

Tambien quiero ver si podeis simplificar los codigos de alguna manera o no se, vosotros vereis.

Adios y espero que os guste eh!!!

ya lo probe y quedo muy bien :D

[contenido no disponible]

Hola,

gracias!! solo te queda arreglar los colores para que te quede bien.

Teambien le puedes poner imagenes y demas.

Si no entiendes algio dimelo!

Adios

creo que hay malas noticias en el navegador explorer no se despliegan :cry:

Hola,

yo la veo en el Explore!!
:?:
Adios

splaing escribió:creo que hay malas noticias en el navegador explorer no se despliegan :cry:

Hola:

Se debe saber que al utilizar menus desplegables diseñados con css suele existir una falta de compatibilidad con el Explorer, sobre todo el 6, y por ello hay que utilizar codigo javascript para suplir esa falta de compatibilidad con la pseudoclase hover.

Lo que hace ese script es dar una funcion que añade la clase over a un elemento Li cuando se pasa el cursor por encima.
También hay que usar un holly hack y etc. etc. etc.

Las últimas versiones de Internet Explorer ya se puede decir que en gran medida están siendo compatibles,

Pero es bueno en los spot, dejar claro para qué versión es dicho tutorial, o con qué ha sido probado, ya que no se debe suponer que todo el mundo tiene las últimas versiones

Esta es información para usted, y consejo para nosabernada, lógicamente con todos mis respetos

Saludos

Hola,

gracias raul! no se que haria sin ti!

Si, ahora que loveo con IE6, no se ve bien, no se desplega. Pero funciona bien en lo demas, supongo.

Gracias por la informacion raul.

Espero que sirva a mas gente.


Saludos, nosaber