You are here
Menú de navegación desplegable con CSS Programación 

Menú de navegación desplegable con CSS

Menú de navegación desplegable con CSS

Creación de un Menú de navegación desplegable con CSS de buen aspecto de navegación es una gran manera de mejorar el aspecto general de una aplicación web. Un menú bien diseñado y atractivo aumentará la facilidad de uso y dar a su aplicación una sensación pulida.Hay algunas maneras de ir sobre la creación de un menú desplegable en una aplicación web:

  1. Construir un menú basado en Flash
  2. Construir un menú basado en Javascript
  3. Construir un menú CSS / basada en HTML

¿Qué debe elegir?

En estos días, se debe evitar Flash, ya que no funciona en muchos dispositivos móviles.Eso te deja con Javascript y CSS / HTML, ninguno de los cuales son malas opciones. Yo personalmente prefiero el enfoque CSS / HTML, por varias razones:

  1. Es más fácil para crear y manipular: Sólo es necesario para entender CSS y HTML, y se le deja con código sencillo que es fácil de actualizar.
  2. Es ligero: se le deja con menos código en general, y de un tamaño más pequeño de aplicaciones.
  3. No se ejecutará en cualquier conflicto javascript: Si ya utiliza Javascript en diferentes partes de su aplicación web, es posible que encuentre conflictos de Javascript si lo usa en otros lugares. Es poco probable, pero posible.
  4. Más personas pueden utilizarlo: Como Javascript puede ser utilizado con fines maliciosos, algunos usuarios desactivar en sus navegadores. Como tal, un menú basado en Javascript no funcionará para ellos.

En este tutorial, voy a mostrar cómo crear un simple, pero atractivo menú desplegable basado en CSS. Este primer tutorial sólo incluirá los aspectos básicos, pero a lo largo de las próximas semanas, voy a construir fuera de este tutorial, y le enseñará algunos trucos CSS3 que se pueden agregar a sus aplicaciones web.

¿Cómo se hace?

Si alcanzó su punto máximo en la fuente de la página de la demo, te has dado cuenta que hay dos partes en el menú: Una sección HTML y una sección de CSS. Me voy a caminar a través de cada parte, pero a empezar con el código HTML:

HTML

La parte HTML del menú es sólo una lista desordenada estándar. Se dará cuenta de que las opciones del menú desplegable se presentan como elementos de la lista. Aquí está el código HTML para el menú.

Código:

<div id="wrap">
		  <ul class="navbar">
			 <li><a href="#">Home</a></li>
			 <li><a href="#">Retrievals</a>
				<ul>
				   <li><a href="#">Data Listing</a></li>
				   <li><a href="#">Web Scheduling</a></li>
				   <li><a href="#">Google Maps Application</a></li>
				</ul>         
			 </li>
			 <li><a href="#">Reporting</a>
				<ul>
				   <li><a href="#" >Ad Hoc Report</a></li>
				   <li><a href="#">Drill Down Report</a></li>
				   <li><a href="#">Ranking Report</a></li>
				</ul>         
			 </li>
			 <li><a href="#">Business Intelligence</a>
				<ul>
				   <li><a href="#">Business Dashboard</a></li>
				   <li><a href="#">Web Pivot Table</a></li>
				   <li><a href="#">Interactive Report</a></li>
				   <li><a href="#">What-If Analysis</a></li>
				</ul>         
			 </li>
			 <li><a href="#">Data Maintenance</a>
				<ul>
				   <li><a href="#">Database CRUD</a></li>
				   <li><a href="#">Database Update</a></li>
				   <li><a href="#">Order Entry</a></li>
				   <li><a href="#">Drag-and-Drop Application</a></li>
				</ul>         
			 </li>
			 <li><a href="#">B2B Portal</a>
				<ul>
				   <li><a href="#">B2B Portal</a></li>
				   <li><a href="#">Secure Data-Driven Listings</a></li>
				   <li><a href="#">Secure Shopping Cart</a></li>
				</ul>         
			 </li>
		  </ul>
</div>

Ahora bien, si se va a copiar y pegar el código en una aplicación web, se vería como una lista con viñetas.¿Cómo se ve tan diferente en el ejemplo? ¿Por qué no se puede ver los elementos de la lista desplegable hasta que pase sobre una de las opciones? La respuesta está en la CSS, que vamos a cubrir siguiente.

CSS

La porción CSS del menú ofrece todo el estilo. En pocas palabras, es lo que hace que la mirada lista con viñetas como un menú desplegable. Es lo que oculta las opciones del menú desplegable hasta que pase sobre el menú. Es lo que cambia los colores cuando una selección se cernió sobre. Para aprender a hacerlo, vamos a repasar el código, y explicar la función de cada estilo. Para facilitar las cosas, he incluido una imagen con cada sección del código. En cada imagen, He destacado la zona de la barra de menú que se aplica al código.

¿Suena bien? Vamos a empezar en la parte superior. El primer estilo esencialmente crea un contenedor para nuestro menú de navegación. Se coloca el rectángulo azul a lo ancho de la página, y le asigna una altura de 50 píxeles. Puede encontrar el código de abajo, así como una imagen para ilustrar qué sección del menú se aplica el código. Ya he realizado observaciones sobre las partes del código cuyo propósito puede no ser obvia:

Código:

 

#wrap	{
	width: 100%; /* Spans the width of the page */
	height: 50px; 
	margin: 0; /* Ensures there is no space between sides of the screen and the menu */
	z-index: 99; /* Makes sure that your menu remains on top of other page elements */
	position: relative; 
	background-color: #366b82;
	}

 

El estilo siguiente se asegura de que el menú de navegación no afecta a otros elementos de la página. Esto lo logramos con el “position: absolute;” estilo. Cuando se coloca un elemento absolutamente, se saca del flujo de la página. En otras palabras, se ignora por otros elementos. Esto es muy importante, ya que no quiere que sus menús desplegables para empujar hacia abajo otros elementos, que harían de otro modo.Aquí está el código y la imagen correspondiente para este estilo:

Código:

.navbar	{
	height: 50px;
        padding: 0;
	margin: 0;
	position: absolute; /* Ensures that the menu doesn’t affect other elements */
	border-right: 1px solid #54879d; 
	}

 

A continuación, pasamos a los estilos que son responsables de hacer los elementos del menú se alinean horizontalmente en la parte superior de la página. Ya he realizado comentarios después de los estilos más importantes, por lo que entender cómo funciona este código. Este código es responsable de los principales elementos de menú en la barra de navegación. Aquí está el código, así como la imagen correspondiente:

Código:

.navbar li 	{
			height: auto;
			width: 150px;  /* Each menu item is 150px wide */
			float: left;  /* This lines up the menu items horizontally */
			text-align: center;  /* All text is placed in the center of the box */
			list-style: none;  /* Removes the default styling (bullets) for the list */
			font: normal bold 12px/1.2em Arial, Verdana, Helvetica;  
			padding: 0;
			margin: 0;
			background-color: #366b82;
                        }

 

Hasta ahora, hemos creado una lista, retiramos las balas, y alineamos todos los elementos de la lista horizontalmente. La siguiente parte de estilos de código de las etiquetas de anclaje que se encuentran en cada elemento de la lista. Como se puede ver en la imagen, cada etiqueta de anclaje es el mismo tamaño y forma que el elemento de la lista. Aquí está el código para cada anclaje, así como la imagen correspondiente. Ya he realizado comentarios en el código para ayudarle a entender lo que hace cada estilo:

Código:

.navbar a	{							
		padding: 18px 0;  /* Adds a padding on the top and bottom so the text appears centered vertically */
		border-left: 1px solid #54879d; /* Creates a border in a slightly lighter shade of blue than the background.  Combined with the right border, this creates a nice effect. */
		border-right: 1px solid #1f5065; /* Creates a border in a slightly darker shade of blue than the background.  Combined with the left border, this creates a nice effect. */
		text-decoration: none;  /* Removes the default hyperlink styling. */
		color: white; /* Text color is white */
		display: block;
		}

 

El siguiente estilo es responsable de cambiar el color de fondo de cada elemento del menú cuando se cernía sobre con un puntero del ratón. No hay imagen, ya que es bastante sencillo. Aquí está el código:

Código:

.navbar li:hover, a:hover {background-color: #54879d;}

He combinado los próximos dos estilos ya que están relacionadas. El primer estilo oculta el menú desplegable, mientras que el segundo estilo lo muestra cuando un puntero ratón sobre el elemento del menú principal. Aquí está el código:

Código:

.navbar li ul 	{
		display: none;  /* Hides the drop-down menu */
		height: auto;									
		margin: 0; /* Aligns drop-down box underneath the menu item */
		padding: 0; /* Aligns drop-down box underneath the menu item */			
		}				

.navbar li:hover ul 	{
                        display: block; /* Displays the drop-down box when the menu item is hovered over */
                        }

 

Los próximos estilos se aplican al menú desplegable. Tenga en cuenta que este estilo hereda la mayoría de estilos de “li .navbar”, que se aplica a todos los elementos “li” que se encuentra dentro de la lista desplegable. Nosotros queremos cambiar el color de fondo del menú desplegable. Esto sólo requiere un estilo, donde se puede encontrar a continuación (junto con la imagen):

Código:

.navbar li ul li {background-color: #54879d;}

 

Del mismo modo que colocamos hipervínculos dentro de cada elemento de la lista en el menú principal, vamos a hacer lo mismo en cada elemento de la lista en el menú desplegable.

El hipervínculos también hereda los estilos que se encuentran en “.navbar li a”, por lo que nuestro trabajo será bastante fácil. Sólo queremos cambiar las fronteras, con el fin de crear el mismo efecto que se encuentra en el menú principal.El primer estilo se enumeran a continuación se hace responsable de las fronteras, mientras que el segundo estilo cambia el color de fondo cuando se cernía sobre.

Aquí está el código y la imagen correspondiente:

Código:

.navbar li ul li a 	{
		border-left: 1px solid #1f5065; 
		border-right: 1px solid #1f5065; 
		border-top: 1px solid #74a3b7; 
		border-bottom: 1px solid #1f5065; 
		}
				
.navbar li ul li a:hover	{background-color: #366b82;}


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

 

Related posts