Menú Desplegable con Cuadro de Búsqueda en CSS3 y HTML

|
Menú Desplegable con Cuadro de Búsqueda en CSS3 y HTML
Online | Free | 0.5 Mb | Publicación:2013 | Pass:www.detodoprogramacion.com
Descripción:
En este tutorial, vamos a crear un estilo de navegación plana con un cuadro de búsqueda y el menú desplegable de la interfaz de usuario, lo poseis modificar a su gusto para poder usarlo donde mas quieran.

Código HTML:
La navegación se compone de una lista no ordenada (NAV.) Que contiene varios tipos de elementos dentro de ellos:
  • Lista de tareas (LIS), que contienen enlaces normales no tienen id / clase.
  • # settings contiene un vínculo basado en la imagen.
  • # de búsqueda contiene el campo de búsqueda, junto con un botón de envío.
  • # opciones contiene un enlace, así como una lista desordenada (. subnav) que actúa como un menú desplegable.

Al final se incluye prefixfree que nos permite usar las propiedades CSS sólo sin prefijo en todas partes.


Y ahora le aplicamamos CSS a cada elemento:

1. Estilos básicos
Empezamos con un CSS básico restablecer e importar 'Montserrat' una fuente personalizada de Google Fonts.


2. Navegación y la lista de items
El elemento principal de navegación tiene un fondo gris oscuro y una altura fija. Los elementos de la lista se flotaron a la izquierda y están posicionados relativamente para que puedan contener el menú desplegable que está posicionada absolutamente más adelante.   

3. Links
Los enlaces tienen un estilo básico. Ellos utilizan la fuente Montserrat importamos antes de Fuentes de Google. Un tono blanco sutil se añade para que el texto suave y audaz. Los enlaces tienen una altura de línea 60px, que es igual a la de. Nav.
Los enlaces también tienen un efecto de activación donde se cambia el fondo a una versión más ligera del fondo gris.

# settings contiene un enlace de imagen por lo tanto, su trazado se ajusta para optimizar el icono de configuración aparece en el centro. 


4. Cuadro de búsqueda
  • # search se proporciona con un ancho fijo y un pequeño margen o 4px alrededor de ella.
  • # search_text se flota a la izquierda y se proporciona con un fondo verde que anima a un tono más claro en vuelo estacionario.
  • # search_button también flotaba hacia la izquierda para hacer que se alinean con # texto_búsqueda horizontalmente. Se utiliza un icono de búsqueda como su fondo que se coloca en su centro.
El estilo del marcador de posición es un asunto difícil. Parece gris en algunos navegadores. Esta respuesta en Stackoverflow ofrece una visión completa de cómo hacerlo


5. El Desplegable
# options de las cuales contiene un menú desplegable se le da un icono de triángulo como fondo a la derecha para hacerlo más intuitivo.

. subnav está oculto por defecto mediante una combinación de CSS visibilidad y propiedades de opacidad. Su posicionado en el 110% de la parte superior. En la parte superior se sitúe a 100%, junto con las propiedades de visibilidad que dan un efecto fresco flotar en el menú desplegable de la opacidad y.


Se puede modificar a su gusto.


3 comentarios

 

CETEGORIAS DESTACADAS:

Buscar

Siguenos en Facebook

Síguenos en g+

Seguidores

Recibe Nuestros Post

Ingresa tu e-mail: