EseKaOch0

Bueno, vamos a crear un exelente menú con HTML y CSS, empecemos!Comenzamos con el HTML: <div id="navlist"> <ul> <li><a href="#" class="active">Ejemplo 1</a></li> <li><a href="#">Ejemplo 2</a></li> <li><a href="#">Ejemplo 3</a></li> <li><a href="#">Ejemplo 4</a></li> </ul></div> Nos quedaría algo así:Básicamente lo que hicimos acá fue crear un div, darle un id llamado navlist. Dentro de este div le agregamos una lista con el texto que queremos darle a este menú.Seguimos con el CSS: body{ background-color:#222; margin:0px; padding:0px; font-family: Verdana, Arial, sans-serif; font-size: 12px;}a{ text-decoration:none;}#navlist { float: left; width: 170px; margin-top: 30px; margin-left: 5px;}#navlist ul { list-style: none;}#navlist li a{ display: block; height: 25px; width: 100px; padding: 9px; margin: 5px; background: inherit; border-right: 4px solid #444; color: #999; text-transform: lowercase; font-size: 0.9em;}#navlist li a:hover { color: #f4f4f4; background: #333; border-right: 4px solid #98cb00;}#navlist li .active { color: #999; background: #333; border-right: 4px solid #444;} Bueno, acá le dimos estilos al body, un fondo y el tipo de fuente. Al navlist le dimos forma, un ancho, un alto, hover, active y varias cosas más.Y nos quedaría algo así:DEMO | DESCARGA

Hola taringueros, hoy les traigo un plugin de jQuery llamado tipsy . Bueno, tipsy es una especie de tooltip como el de facebook, para los que no conoscan el plugin aquí una captura de facebook: (Lo que está en negro es el tooltip ) Bueno, primero tenemos que tener 3 cosas. El plugin de jQuery (jquery-1.3.2.min.js) El plugin tipsy (jquery.tipsy.js) El CSS del plugin tipsy Ganas de hacerlo. Descargar todo lo dicho anteriormente. Empezamos a crear nuestro tooltip . Creamos un nuevo archivo HTML lo llamamos index.html (o como queramos), ponemos nuestras etiquetas básicas (html, head, body). Dentro del head pondremos esto: <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>         <script type="text/javascript" src="js/jquery.tipsy.js"></script>        <link rel="stylesheet" type="text/css" href="tipsy.css" /> *Nota*dijo:Cambiar la ruta ( src="" ) por donde tengamos nuestro archivos (jquery-1.3.2.min.js, jquery.tipsy.js y tipsy.css)Importante!*Nota 2*dijo:El archivo tipsy .css lo abrimos y cambiamos la ruta del background por donde tenemos nuestra imagen tipsy.gif Ya hecho esto, pondremos esto después de la etiqueta body: <script type='text/javascript'>           $(function() {            $('#button1').tipsy();          });        </script>  Y después de esto, pondremos un link con un id: <a id="button1" class="button" title="Tolltip Norte">Norte</a> Bueno, explicaré esto. En nuestro script, tenemos #button1, con esto hacemos que el plugin recaiga en nuestro elemento que tenga el id #button1. En nuestro link, tenemos una clase y un title, en el title pondremos lo que queremos que salga en nuestro tooltip , y en donde dice Norte pondremos lo que queremos que, al pasar nuestro mouse, aparezca nuestro tootltip. También podemos cambiar de lado nuestro tooltip de la siguiente manera. {gravity: 'n'} Agregamos esta linea de código dentro de nuestro paréntesis, de esta manera: $('#button1').tipsy({gravity: 'n'}); Los valores que podemos asignar en lugar de n son: s (sur-arriba), e (este-isquierda), w (oeste-derecha) y n (norte-abajo). Básicamente con esto, tenemos nuestro tooltip listo DEMO Espero les haya servido de algo, saludos!

Introducción: ¿Qué vamos a hacer?Retomamos los tutoriales relacionados con javascript y jQuery de la mano de este control en forma de menú desplegable.Al contrario que otros controles de este tipo, para desplegar este control, el usuario sólo tendrá que pasar el ratón por encima, en lugar de hacer click. Este será el aspecto final del control a crear:La idea es que las distintas opciones sean mostradas en formato lista (<ul>, de forma que cada elemento de la lista sea un enlace que te traslade a una nueva sección en la que aparezca marcada la nueva opción seleccionada.El control no necesitará hacer el cambio entre sección actualmente activa y la seleccionada, ya que eso se controlaría a la hora de generar la salida html en la lógica de programación (PHP, Java, Python… o lo que quiera que uséis).Actualización: Por cierto… veo que algunas personas no lo han entendido bien: estamos imprimiendo una salida HTML limpia, por tanto los robots y rastreadores de Google y derivados, podrán indexar y seguir perfectamente todas esas opciones de nuestro menú.¡Vamos a por el primer paso del tutorial!Paso 1: La estructura HTMLComo acostumbramos a realizar en nuestros tutoriales, mantendremos una estructura sencilla, intentando que sea vistosa pero sobretodo clara a la hora de comprender qué estamos haciendo: <!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" dir="ltr" lang="es-ES"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Cómo crear un menú de pestañas elegante en jQuery</title> <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" /> </head> <body> <div class="wrapper"> <h1>Creando un menú desplegable en jQuery</h1> <ul class="dropdown"> <li class="active">Visualizando: <span>Tutoriales</span></li> <li class="first"><a href="#">Recursos</a></li> <li><a href="#">Inspiración</a></li> <li><a href="#">Contacto</a></li> <li class="last"><a href="#">Ver más...</a></li> </ul> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html> Esto es lo que deberíamos tener actualmente:Básicamente lo único relevante de este paso es comprender que estamos aplicando la clase de CSS “dropdown” a nuestra lista, con la que estaremos advirtiendo a nuestro futuro código javascript que será un control del tipo desplegable.Vamos pues a darle un poco de estilo al ejemplo antes de ponernos con la lógica en javascript…Paso 2: Aplicando estilo con CSS a nuestro menú desplegableEn este caso, el código CSS es muy básico y se centra principalmente en el aspecto visual del control de menú desplegable que estamos creando: @CHARSET "UTF-8"; /* Author: Adrian Mato Author URI: http://web.ontuts.com */ /******* GENERAL RESET *******/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border:0pt none; font-family:inherit; font-size:100%; font-style:inherit; font-weight:inherit; margin:0pt; padding:0pt; vertical-align:baselinebaseline; } body{ line-height: 1em; font-size: 14px; font-family: Arial, Helvetica, sans-serif; margin: 0pt; cursor: default; color: #fff; background: #262626 url("bg.png") repeat scroll 0 0; } table{ border-collapse: separate; border-spacing: 0pt; } strong{ font-weight: 700; } caption, th, td{ font-weight:normal; text-align:left; } blockquote:before, blockquote:after, q:before, q:after{ content:""; } blockquote, q{ quotes:"" ""; } pre{ font-family: Arial, Helvetica, sans-serif; } input{ border: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; } textarea{ font-family: Arial, Helvetica, sans-serif; color: #888888; padding: 7px 3px 0 4px; font-size: 11px; } select{ font-size: 11px; color: #888888; background: #fff; font-family: Arial, Helvetica, sans-serif; border: 1px solid #CAD2CE; } ul{ list-style: none; list-style-type: none; list-style-position: outside; } a{ cursor: pointer; color: #ece6bd; text-decoration: underline; outline: none !Important; } html,body{ height:100%; } .clear{ clear: both; height: 0; visibility: hidden; display: block; line-height: 0; } .clearfix{ overflow: hidden; } .italic{ font-style: italic; } /******* /GENERAL RESET *******/ /******* GENERAL *******/ h1{ color: #fff; font-size: 26px; line-height: 3em; } h2{ line-height: 2em; margin-top: 30px; margin-bottom: 20px; color: #e4e1cd; } .wrapper{ width: 982px; margin: 0pt auto; padding-top: 10px; } /******* /GENERAL *******/ /******* CONTENT *******/ h3{ line-height:1em; vertical-align:middle; height:48px; padding:10px 10px 10px 52px; font-size:32px; color:#E4E1CD; } /******* /CONTENT *******/ /******* MENU *******/ ul.dropdown{ width: 200px; border: 1px solid #000; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #1a1a1a; margin-top: 2em; } ul.dropdown li{ display: none; font-size: 12px; } ul.dropdown li.active{ display: block; color: #8c8c8c; font-size: 14px; padding: 12px; color: #555; border-top: 1px solid #313131; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } ul.dropdown li.active span{ background: transparent url("dropdown.png") no-repeat scroll rightright center; padding-right: 24px; color: #8c8c8c; } ul.dropdown li a{ display: block; text-decoration: none; padding: 8px 8px 8px 10px; background: #1e1e1e; border-bottom: 1px solid #171717; } ul.dropdown li.last a{ border:0; } ul.dropdown li.first a{ border-top: 3px solid #131313; } ul.dropdown li a:hover{ background: #232323; color: #fff; padding-left: 11px; } /******* /MENU *******/ La clase dropdown será con la que identificaremos el control y sobre la cual aplicaremos el resto de propiedades a los distintos elementos.Así pues todos los elementos de la lista compartirán estilo excepto la clase active la cual aparecerá siempre en el primer puesto de la lista, y será la que identifique el elemento actualmente seleccionado / activo.Este es el aspecto que presentará ahora nuestro control:Como habréis podido comprobar, ahora no se están mostrando los elementos de la lista, salvo el elemento activo. Sólo necesitamos crear la lógica para que se muestren / oculten a nuestro antojo via javascript…¡Vamos a ello!Paso 3: Añadiendo interacción con javascript mediante jQueryRepasemos qué es lo que queremos de nuestro control en forma de menú despegable antes de aplicar la interacción: Mostrar opciones al pasar el ratón por encima. Ocultar opciones al mover el ratón de encima. Reutilizable para tener múltiples controles en una misma página.Con esto en mente, necesitaremos identificar (mediante selectores de jQuery) los elementos de clase “dropdown” para reconocerlos como controles de menú desplegable.Antes de explicar la parte de los eventos, echemos un vistazo al código final: //variable global para controles dropdown var menu = $("ul.dropdown"); //control de eventos $(this.document).ready(function(){ menu.mouseover(function(){ displayOptions($(this).find("li")); }); menu.mouseout(function(){ hideOptions($(this)); }); }) //funcion que MUESTRA todos los elementos del menu function displayOptions(e){ e.show(); } //funcion que OCULTA los elementos del menu function hideOptions(e){ e.find("li").hide(); e.find("li.active").show(); } El código como podéis comprobar es relativamente sencillo, y en el podemos ver la asignación de los eventos “al pasar por encima” y “al quitar el ratón de encima”, los cuales llaman a las funciones: displayOptions(): Muestra todos los elementos de la lista inicialmente ocultos al pasar el ratón por encima. hideOptions(): Oculta todos los elementos de la lista, y luego vuelve a mostrar el elemento activo.La razón por la que mostramos nuevamente el elemento activo es porque el selector de jQuery que estamos empleando está ocultando todos los elementos de la lista, entre los que se incluye el activo, pero deseamos que se mantenga visible.Antes de dar por finalizado el tutorial, me gustaría resaltar otro detalle del código anterior: la función find(), mediante la cual localizamos los elementos del control que está recibiendo los eventos.Siempre que programes controles reutilizables, trata de trabajar con referencias al objeto activo, de esta forma podrás reutilizarlos o crear plugins de forma realmente sencilla.Podríamos estar utilizando selectores de jQuery genéricos pero recordad: queremos que nuestro control pueda aparecer en más de una ocasión en una misma página, por tanto trabajamos con referencias al objeto activo, en lugar de a todos los objetos que contengan la clase de CSS dropdown.Con todo ello, generar un plugin apartir de este planteamiento sería realmente trivial. Si bien no lo hemos hecho en este tutorial, sí que hemos explicado anteriormente cómo crear plugins en jQuery, echadle un vistazo que es realmente útil.

A nosotros, los programadores web, algo que resulta importante, aparte de la compatibilidad, es como se vee nuestra web en otras resoluciones.Hoy les traigo Window resizer que es una extensión para Google Chrome. Esta extensión cambia de tamaño la ventana de Google chrome para ver como se verían los sitios en otra resolucion.Para descargarla debes hacer click aquí.Para instalar es fácil. Nos vamos a la página anteriormente mencionada y seguimos los pasos:Le damos añadir a chrome:Le damos a instalarY ya instalado, nos saldrá algo como estoAlgo así se ve la extensiónY bueno, este fué mi post, espero les haya gustado.Saludos, un abrazo.