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

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

  1. #1
    Esto empieza a ser un vicio... Habitante Avatar de nosabernada
    Fecha de Ingreso
    02 ago, 08
    Ubicación
    Velar por CCTW
    Mensajes
    1,418
    Poder de Reputación
    17

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

    Hola,

    esto es un experimento casi secreto , 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:
    Código:
    /* 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:
    Código:
    <ul id="nav">
    		<li class="first">Inicio
    		<li class="active">Arte
    			<ul>
    			<li class="first">Madrid
    			<li class="active">España
    			[*]Europa
    			<li class="last">Resto del mundo
    			[/list]
    		
    		[*]Historia
    			<ul>
    			<li class="first">Prehistoria
    			[*]Edad media
    			[*]Siglo XVII
    			[*]Siglo XIX
    			<li class="last">Siglo XX
    			[/list]
    		
    		[*]Historias del mundo
    			<ul>
    			[*]<a href"#">CRISIS?</a>
    			[*]Por la causa
    			<li class="last">Otros
    			[/list]
    		
    		<li class="last">Informacion
    			<!--<ul>
    			<li class="first"><a href="#"1</a>
    			[*]2
    			[*]3
    			<li class="last">4
    			[/list]-->
    		
    		[/list]
    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!!!

  2. #2
    Me va gustando esto... Habitante
    Fecha de Ingreso
    25 jun, 08
    Ubicación
    quien sabe
    Mensajes
    164
    Poder de Reputación
    10
    ya lo probe y quedo muy bien :D


  3. #3
    Esto empieza a ser un vicio... Habitante Avatar de nosabernada
    Fecha de Ingreso
    02 ago, 08
    Ubicación
    Velar por CCTW
    Mensajes
    1,418
    Poder de Reputación
    17
    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

  4. #4
    Me va gustando esto... Habitante
    Fecha de Ingreso
    25 jun, 08
    Ubicación
    quien sabe
    Mensajes
    164
    Poder de Reputación
    10
    creo que hay malas noticias en el navegador explorer no se despliegan

  5. #5
    Esto empieza a ser un vicio... Habitante Avatar de nosabernada
    Fecha de Ingreso
    02 ago, 08
    Ubicación
    Velar por CCTW
    Mensajes
    1,418
    Poder de Reputación
    17
    Hola,

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

  6. #6
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    16 feb, 08
    Ubicación
    Estella-Spain
    Mensajes
    2,253
    Poder de Reputación
    21
    Cita Iniciado por splaing
    creo que hay malas noticias en el navegador explorer no se despliegan
    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
    Agradecido de los que aprenden enseñando

  7. #7
    Esto empieza a ser un vicio... Habitante Avatar de nosabernada
    Fecha de Ingreso
    02 ago, 08
    Ubicación
    Velar por CCTW
    Mensajes
    1,418
    Poder de Reputación
    17
    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

Temas Similares

  1. Tutorial: MENÚ DESPLEGABLE
    Por solidaria en el foro Tutoriales Varios
    Respuestas: 66
    Último Mensaje: 18/09/2010, 12:47
  2. [TUTORIAL] menu desplegable al hacer clic derecho
    Por linkgl en el foro Tutoriales Varios
    Respuestas: 8
    Último Mensaje: 20/05/2009, 18:38

Permisos de Publicación

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