Top Banner
¿Qué es un Menú de navegación estilo CSS? CSS (Cascade Style Sheets) Menús CSS
12

Menus CSS Grupo#3

Aug 15, 2015

Download

Education

josel_avila
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Menus CSS Grupo#3

¿Qué es un Menú de navegación estilo CSS?CSS (Cascade Style Sheets)

Menús CSS

Page 2: Menus CSS Grupo#3

¿Qué es un menú CSS?

Básicamente es una lista, no es un párrafo, ni un titulo, es una lista de vínculos.

Hablar de listas (<ul> y <ol> ) es hablar de estructura, recordemos que HTML es un lenguaje diseñado para estructurar datos, y eso es lo que debemos hacer con el. En ese sentido, las listas nos ofrecen una muy buena forma de estructurar listas.

Page 3: Menus CSS Grupo#3

Pero no hay de que preocuparse, ya que el CSS nos permite cambiar completamente el aspecto de la lista, para convertirla en el bonito menú que queramos, sin que deje de ser lista. Pero primero, veamos en qué consisten los pre-formatos que trae de por sí una lista.

Page 4: Menus CSS Grupo#3

¿Cuál es la Función que cumple un menú CSS?

La función que cumplen los menús css  es que se encargan de acceder fácilmente mediante un clic a otra página web o a otro destino.

Page 5: Menus CSS Grupo#3

¿Cuáles son los tipos de Menú CSS?Menú SimpleMenú HorizontalMenú VerticalMenú Desplegable

Menú Simple

Page 6: Menus CSS Grupo#3

Menú Horizontal

Menú Vertical

Page 7: Menus CSS Grupo#3

Menú Desplegable

Page 8: Menus CSS Grupo#3

¿Cómo hacer un menú desplegable CSS En Dreamweaver?

-1.paso:Para realizar un menú CSS, debemos de

tener en cuenta el siguiente código, que proporciona el diseño del menú, En este caso crearemos un menú desplegable:

Page 9: Menus CSS Grupo#3

Para comenzar les mostraremos el código que utilizamos para crear el diseño de nuestro menú desplegable:

<html><head><center>

<head><title> Menú Desplegable</title>

<style type="text/css">

* { margin:0px; padding:0px; }

#header { margin:auto; width:500px; font-family:Arial, Helvetica, sans-serif; }

Page 10: Menus CSS Grupo#3

1 ul, ol {

list-style:none; }

.nav > li {

float:left; }

.nav li a {

background-color:#8B4513;

color:#fff;

text-decoration:none;

padding:10px 12px;

display:block; }

.nav li a:hover {

2 background-color:#434343; }

.nav li ul { display:none; position:absolute;

min-width:140px; }

.nav li:hover > ul {

display:block; }

.nav li ul li {

position:relative; }

.nav li ul li ul {

right:-140px;

top:0px;}

Page 11: Menus CSS Grupo#3

2.paso: Ahora mostraremos el código de la información que contiene

nuestro menú desplegable:</style>

</head><body>

<div id="header"><ul class="nav">

<li><a href="Index.html">Inicio</a></li><li><a href="">Herramientas para</a>

<ul>

<li><a href="Carpinteria.html">Carpintería</a></li>

<li><a href="Fontaneria.html">Fontanería</a></li>

<li><a href="Albañileria.html">Albañilería</a></li>

<li><a href="Electricidad.html">Electricidad</a></ul>

Page 12: Menus CSS Grupo#3

<li><a href="">Redes Sociales</a> <ul>

<li><a href="Facebook.html">Facebook</a></li>

<li><a href="Instagram.html">Instagram</a></li>

<li><a href="Yahoo.html">Yahoo!</a></li>

<li><a href="Twitter.html">Twitter</a></li></ul> </li><li><a href="Index2.html">Imágenes</a></li></ul></div>