Embed Size (px)
Citation preview
¿Qué es un Menú de navegación estilo CSS?CSS (Cascade Style Sheets)
Menús CSS
¿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ú SimpleMenú HorizontalMenú VerticalMenú Desplegable
Menú Simple
Menú Horizontal
Menú Vertical
Menú Desplegable
¿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>
