Facebook
RSS

Menus dinamicos para tu web o blog con estilos.css

-
Codisource

Diseño web codigo html y css

Hola que tal sea bienvenido a codisource en este articulo te proporcionare menús realizados con hojas de estilo css

 Ver ejemplo.




El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la
forma de presentación que le aplicaremos a:
• Un web entero, de modo que se puede definir la forma de todo el web de una sola vez.
• Un documento HTML o página, se puede definir la forma, en un pequeño trozo de
código en la cabecera, a toda la página.
• Una porción del documento, aplicando estilos visibles en un trozo de la página.
• Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para
una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra
programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul,
con margenes, sin ellos...
dejare el enlace de descarga al final de este articulo y una descripción de cómo modificarlos para adaptarlos para tu sitio web también creare una vista previa de los menús que les proporciono.

Descripción: Menús animados con hojas de estilo css o cascada
Antes que nada deberemos tener los conocimientos básicos en html o puede ver las instrucciones para darse cuenta cómo funcionan y que debe realizar para usar estos menús
En el archivo que descargara contiene 13 menús diferentes en cada carpeta hay 3 archivos

Una es una carpeta llamada

Images: contendrá las imágenes de nuestro menú.

menu_style.css: esta es la hoja de estilo que le brindara al menú los colores del texto animación etc.

Index.html: este es archivo principal que usted podrá abrir con su explorador preferido.
Comenzaremos explicando menu_style.css y algunas de sus características seré breve y solo explicare las más importantes tu puedes practicar cambiando colores tamaño tipo de fuente etc.
Abreviaturas para tamaño de texto e imagen


Pixels (px) y porcentaje (%).
 Pulgadas (in)
 Puntos (pt)
 Centímetros (cm)






font-size
atributos
xx-small | x-small | small | medium | large | x-large |
xx-large

ejemplo
font-size:12pt;
font-size: x-large;

uso
Sirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud.

font-family

atributos
serif | sans-serif | cursive | fantasy | monospace
Todas las fuentes habituales

Ejemplos
font-family:arial,helvetica;
font-family: fantasy;

uso
Con este atributo indicamos la familia de tipografia del texto. Los primeros valores son genéricos, es decir, los exploradores
las comprenden y utilizan las fuentes que el usuario tenga en su sistema.
También se pueden definir con tipografías normales, como ocurría en html. Si el nombre de una fuente tiene espacios se
utilizan comillas para que se entienda bien.

font-style

atributos
normal | italic | oblique

ejemplos
font-style:normal;
font-style: italic;

Backgroundcolor

Attributos
Un color, con su nombre o su valor RGB

ejemplo
background-color: green;
background-color: #000055;

uso
Sirve para indicar el color de fondo de un elemento de la página.

Backgroundimage

atributo
El nombre de la imagen con su camino relativo o
absoluto

ejemplos
background-image: url(mármol.gif) ;
background-image:url(http://www.imagen.gif )

uso
Colocamos con este atributo una imagen de fondo en cualquier elemento de la página

Ahora les mostrare las carecteristicas de index.html
El codigo que enlazar la hoja de estilo con nuestro archivo html es el siguiente se encontrara entre las etiquetas <head></head>
<head> <link rel="stylesheet" type="text/css"   href="menu_style.css"> </head>

Los enlaces se encontraran en el cuerpo del código html <body></body>
<body>
<div id="menu">
<ul>
<li><a href="#enlace1">texto</a></li>
<li><a href="#enlace2">texto</a></li>
<li><a href="#enlace3">texto</a></li>
<li><a href="#enlace4">texto</a></li>
<li><a href="www.ejemplo.com">texto</a></li>

</ul>
</div>
</body>

Asi es como se muestran los links en html
<a href="www.paginaweb.com">texto</a>
www.paginaweb.com: lo cambiaremos por la url hacia donde nos enlazara, ejemplo www.google.com
texto: es el texto que se mostrara en la pantalla

Atributos en los enlaces

<a href="#paginaweb" target="_blank"  >  abre una nueva ventana al hacer click en el enlace
<a href="#paginaweb" target="_self">  abre el enlace en la misma ventana
<a href="#paginaweb" target="_parent"> abre el enlace en la misma ventana

Descarga pack completo con 13 menus interactivos






Si el contenido de codisource te gusta por favor dale +1 o compartelo en facebook Compartir

3 Responses so far.

  1. Anónimo says:

    Esta con todo tu hoja de estilo man-....exitpo

  2. Me gusta como se ve, muchas gracias por el aporte

  3. esta bueno por favor el menu dos me agrado y como puedo hacer para ponerlo en mi bloger

Leave a Reply