La función 'Panel de control' en una Mac se ve muy bien, y el menú que le permite agregar / eliminar widgets es una función bien diseñada. Un efecto similar puede agregar un nuevo nivel de funcionalidad a un sitio web, proporcionando un simple menú desplegable en la parte superior de la página. Este tutorial lo guiará a través del proceso de principio a fin.
Antes de comenzar, puede consultar la demostración o descargar el código fuente completo aquí.
Empezando en Photoshop
1) Crear un fondo de repetición de la rejilla.
Comience por crear una imagen de 56 (W) x 64 (H) px en Photoshop. Luego, haga un gradiente de 3 colores que vaya del # 111111 al # 313131 y finalmente vuelva al # 111111. Debe tener un aspecto como este.
Ahora es el momento de agregar los hoyuelos.
Seleccione la herramienta de pincel y elija un pincel cuadrado de tamaño 2px y # 000000. Crea una nueva capa y asegúrate de que esté seleccionada. Comience haciendo un punto en cualquier lugar de esta nueva capa. Ahora mueva ese punto 3px desde la parte superior de la imagen y 1px desde el lado izquierdo. Luego puede duplicar esta capa 11 veces (de modo que tenga una fila de 12 puntos en total) y cada vez que mueva el punto hacia abajo 5px.
Ahora puede combinar todas estas capas (excepto el fondo). Duplique esta nueva fila de puntos 6 veces, y cada vez mueva la fila a la derecha 8px.
Usando la primera fila creada, duplíquela una vez más y muévala 4px a la derecha y 2px hacia abajo. Esta nueva fila también se puede duplicar 6 veces y cada 8px movida a la derecha. Ahora debería tener el fondo del panel de control.
2) Encuentre un paquete de iconos como el que se usa en este tutorial. El mío se encontró en: http://www.smashingmagazine.com/2008/10/01/dellipack-2-a-free-icon-set/
3) Crea un área de texto para los consejos de iconos.
Cree una nueva imagen 292px (W) x 34px (H) y cree una nueva capa. Eliminar la capa de fondo. Ahora dibuje una ruta de rectángulo redondeada nuevamente como lo hicimos para el ícono, sin embargo, esta vez quiere ser 290px (W) x 32px (H) y hacer que sea una selección llenándola con un blanco. Establecer el relleno en esta capa al 10%. Ahora todo lo que queda por hacer es agregar un trazo blanco de 1px a su alrededor, dejándote con esto. (He puesto un fondo negro en el ejemplo que no tendrás, solo para que puedas ver cómo debería ser)
¡Ahora estamos listos para poner algo de HTML y CSS en esto y hacerlo!
HTML y CSS
Para construir este ejemplo, necesitará la última versión de J-Query.
Lo primero que debes hacer es preparar el HTML. Vamos a necesitar etiquetas DIV, una de ellas como un contenedor general de todo, lo que garantizará que el tablero de instrumentos abarque el ancho de la ventana del navegador. El otro actuará como un contenedor para los iconos, manteniéndolos restringidos dentro de un ancho de 945px. Esto es para asegurar que todos sean visibles en las resoluciones de pantalla más comunes.
A partir de esto, he adjuntado una hoja de estilo llamada index.css, he agregado algunos estilos en esa hoja de estilo para garantizar que este DIV se vea y se desempeñe como deseo.
La imagen de fondo tiene una repetición-x en ella para permitir que la imagen abarque el ancho de la ventana del navegador. La altura debe ser la misma que la gratingRepeat.png que creamos anteriormente.
El contenedor de avance tiene un ancho de 945px para permitir que incluso las resoluciones de pantalla más pequeñas puedan ver el tablero de instrumentos en su totalidad. Siempre diseño mis sitios web a un mínimo de 1024 x 768 porque esta suele ser la resolución de pantalla más común al momento de escribir. Además, al tener un margen: configurado automáticamente en el contenedor, el navegador centrará los íconos sin importar qué tan ancho esté configurado. Para que esto funcione, el elemento debe tener un ancho establecido.
Lo siguiente que debemos agregar es el UL, que contendrá todos nuestros iconos.
Como puedes ver, cada LI tiene una clase diferente adjunta. Esto es para que podamos asignar diferentes atributos a cada icono. Asegúrate de nombrar tus clases para que correspondan con el ícono para que entiendas dónde colocar todo.
Primero pasaremos por las áreas principales del estilo en el UL y el LI.
En primer lugar, el estilo de lista UL: ninguno quita puntos de bala no deseados. También he puesto un relleno: 0 y un margen: 0 aquí, esto debería detener cualquier problema de compatibilidad del navegador colocando cosas en áreas inesperadas. He puesto estos atributos en todo el sitio de UL porque usaremos otro UL más adelante y estas configuraciones también se aplicarán.
En la lista de avance específicamente, he elegido posicionar los iconos utilizando el método de flotación. (Creo que esto me da el mayor control sobre el posicionamiento). El ancho es importante cuando se flota para asegurar una colocación precisa. He elegido 645px porque tenemos que dejar espacio para el área de sugerencias, que se agregará más adelante.
A la LI dentro de este UL se le ha dado una altura y anchura (la misma altura y anchura que los iconos) y luego flotó a la izquierda. Al hacer esto, el LI se coloca en una línea horizontal sobrescribiendo la alineación vertical predeterminada de UL. El margen izquierdo aquí se coloca en cada LI individual, lo que significa que habrá un espacio de 15px entre cada ícono.
La siguiente sección de CSS debe repetirse y modificarse ligeramente para cada clase de icono. Incluiré un ejemplo para orientación. Es muy simple, establece el fondo en el ícono.png y luego configura el fondo para el estado del ícono. Esto significa que cuando el ícono está sobre (en todos los navegadores excepto IE6) el ícono cambiará de color.
Asegúrese de replicar esto cambiando la clase para cada ícono que elija usar. Asegúrate también de cambiar la imagen que usan como fondo.
Finalmente, agregaremos el área de Puntas y le daremos estilo. El HTML es muy similar al del conjunto de iconos. Utilizando UL y LI. Sin embargo, solo usamos una LI con una serie de CLASES DIV diferentes dentro de ella.
Si bien esto puede parecer una pieza de código desalentadora, de hecho es muy simple. Cada DIV se relaciona con un ícono y, mediante el uso de CSS, solo uno o ningún DIV será visible a la vez. Asegúrese de dar a cada DIV una clase separada relacionada con el icono que se resaltará. Esto será necesario en el siguiente paso.
Para empezar, he flotado el derecho de UL y le he dado un ancho. Esto colocará el área de la punta a la derecha de los íconos, ya que el ancho dado al ícono UL permite que ambos elementos se sienten en la misma línea.
Luego le he dado un fondo a la clase, cargando en el textArea.png creado anteriormente. Se le ha dado una altura para que sea visible.
Tengo todas las clases de DIV para mostrar: ninguna significa que cada DIV dentro del LI inicialmente estará oculto. Usaremos javascript para habilitarlos más tarde.
Cada DIV está configurado para que tenga la misma altura y anchura que textArea.png, esto es para que podamos ubicar el texto de manera precisa. Text-align: center mueve todo el texto al centro del DIV y, por lo tanto, al área de texto. Finalmente, la línea de altura: 35px; Asegura que el texto esté centrado verticalmente. Este valor variará según el tamaño de la fuente y la elección de la familia de fuentes; es posible que se necesite un poco de prueba y error aquí.
Finalmente, necesitaremos un botón para hacer clic para hacer que el panel esté visible. Fuera de los dos DIV que hemos creado, inserte un enlace y asígnele una clase de advanceMenuBtn. Esto será necesario cuando lo llames dentro del javascript más tarde.
Si carga esto en un navegador, podrá ver el tablero de instrumentos en la parte superior y los iconos cambiarán de color cuando coloque su motor sobre ellos, ¡muy emocionante!
Ahora es el momento de agregar la funcionalidad javascript. Asegúrese de colocar todos los javascript posteriores dentro de las etiquetas HEAD en la parte superior de su página.
Esta primera parte del código alterna la visibilidad del panel de control cuando se hace clic en el botón advanceMenuBtn. Para asegurarse de que el tablero de instrumentos comience de manera invisible, ahora debe colocar una pantalla: ninguno en el avance de menú DIV en el CSS.
La segunda línea de este fragmento configura la función para que esté lista para ejecutarse cuando la página esté lista y cargada, lo que significa que funcionará cada vez que la página esté visible. La siguiente línea se centra en el avanceMenuBtn y configura otra función para ejecutarse cuando se hace clic en ese botón. Cuando se utiliza JQuery para centrarse en los elementos, la sintaxis utilizada es muy similar a la de CSS. Primero declara el tipo de elemento con la 'a' y luego declara la clase usando '.advanceMenuBtn'.
La siguiente línea llama al panel de control y declara qué función se debe realizar e indica una variable que le dice cómo realizarla. slideToggle es una función JQuery que está incorporada en el marco y tiene diferentes variables de velocidad adjuntas. Puedes elegir entre lento, normal o rápido. El panel de control aparecerá ahora oculto al ver la página. Al hacer clic en el enlace, aparecerá el panel de control.
La última pieza de javscript hará que el área de texto muestre la sugerencia cuando el usuario se desplace sobre un icono. Nuevamente, esta secuencia de comandos es muy repetitiva, por lo que le mostraré un ejemplo que debe ajustarse ligeramente para los otros íconos.
Este script es nuevamente muy simple y muy efectivo. Una vez más, la función está lista para ser utilizada cuando se carga la página, como lo indica la tercera línea. La siguiente línea llama al ícono con una clase de información y configura una función para que se ejecute cuando el usuario coloca el mouse sobre ella.
A continuación, la clase que muestra el fragmento de texto asociado con ese ícono se enfoca y se le dice a '.show' cuando esto sucede. Esta función debe revertirse para que otros fragmentos de texto se muestren cuando se mueven otros iconos.
Las últimas líneas están haciendo exactamente lo contrario de la primera función cambiando 'mouseover' a 'mouseout' y '.show' a '.hide'
Estas dos funciones deben repetirse para cada ícono que cambia las clases a las que se llama para coordinar con el ícono en cuestión.
¡Ahora deberíamos estar listos para verlo funcionando en su totalidad!
Echa un vistazo a la demostración y descarga el código fuente completo aquí
Bien hecho y espero que puedas darle un buen uso a esto.
Tenga en cuenta que debido a que IE6 no comprende la función: desplazamiento, este ejemplo tendrá un uso muy limitado en ese navegador en particular. Sin embargo, hay correcciones para ello que se pueden encontrar usando más javascript.
Prosems - Soluciones de desarrollo y diseño web de comercio electrónico