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

4 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

  4. ¿NECESITAS UN PRÉSTAMO?

    Actualmente estamos ofreciendo un esquema de préstamo flotante a una tasa de interés del 2% con una tarjeta de identidad válida para la verificación.
    Puede enviar su solicitud de préstamo por cualquier cantidad de préstamo que necesite.
    Ofrecemos préstamos que van desde $ 5,000.00 USD Min. $ 50,000,000.00 USD Máx.
    Tenemos un crédito a largo plazo de cinco (5) a cincuenta (50) años como máximo.
    Brindamos el siguiente tipo de préstamo: préstamo para proyectos, préstamos para refinanciamiento, préstamos para inversiones comerciales, préstamos para automóviles o vehículos, préstamos estudiantiles, consolidación de deudas, préstamos para vivienda, préstamos personales, préstamos para viajes y vacaciones, préstamos para Navidad y año nuevo.
    Nuestra compañía también necesita una persona que pueda ser el representante de nuestra compañía en su país.
    Póngase en contacto con nuestra oficina de FIRMAS FINANCIERAS STEPHEN WILLIAMS por correo electrónico: stephenswillsloan@gmail.com
    Si está interesado en nuestra oferta financiera y desea adquirir un préstamo de nuestra parte, contáctenos y bríndenos los detalles a continuación, y será necesario para iniciar los términos y condiciones de la suma del préstamo en consecuencia.
    Nombre: ____________________________
    Género: _______________________________
    Estado civil: _______________________
    Dirección de contacto: ______________________
    Código postal: ________________________
    País: ______________________________
    Fecha de nacimiento: ________________________
    Monto necesario como préstamo: ________________
    Duración del préstamo: ________________________
    Ingreso mensual / ingreso anual: _________
    Ocupación: ___________________________
    Propósito para el Préstamo: _____________________
    Teléfono: ________________________________
    Fax: __________________________________
    En reconocimiento de estos detalles, se enviarán términos y condiciones bien calculados, incluido el acuerdo.
    ¡Gracias por su patrocinio!
    Atentamente,
    STEPHEN WILLIAMS FIRMA DE PRÉSTAMO FINANCIERO
    Correo electrónico: stephenswillsloan@gmail.com
    Sitio web: http://stevenwilliamsfinancialloanfirm.webs.com/
    Twiiter: @ stephenswillsl1
    Instagram: stephenswillsloan

Leave a Reply