Menus CSS Grupo#3

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

¿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.

 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.

¿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.

¿Cuáles son los tipos de Menú
CSS?
 Menú Simple
 Menú Horizontal
 Menú Vertical
 Menú Desplegable
Menú Simple

Menú Horizontal
Menú Vertical

¿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:

 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;
}

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;
}

 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>

<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>

Menus CSS Grupo#3

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Menus CSS Grupo#3

Similar a Menus CSS Grupo#3 (20)

Último

Último (20)

Menus CSS Grupo#3