CSS3 es la última versión de Cascading Style Sheets, añadiendo nuevas características tales como animaciones, gradientes y de apoyo para los bordes curvos. CSS3 ofrece a los diseñadores Web la oportunidad de diseñar menús funcionales y estéticamente agradable durante el uso de relativamente pocos recursos. CSS3 menús pueden desplegarse rápidamente, sin necesidad de scripts JavaScript recursos pesados o menús basados en Flash. Los CSS3 codificación de los menús desplegables se pueden agregar en el código CSS existente en un período relativamente breve de tiempo.
NAVEGACIÓN VERTICAL
Lo que necesita
Editor de HTML
Abra la página CSS externa o una página HTML que contiene el código CSS de encabezado en su editor de HTML. Crear un espacio para el código CSS3 que compone el menú desplegable donde se mantiene la información de su CSS. Si utiliza un archivo CSS externo, asegúrese de que el archivo se hace referencia correctamente en su página HTML.
Escriba el siguiente código CSS3 para el principal de navegación y barra de botones:
# Nav {
margin: 0;
padding: 7px 6px 0;
background: # 7d7d7d URL (img / gradient.png) repeat-x 0-110px;
line-height: 100%;
border-radius: 2em;
-Webkit-border-radius: 2em;
-Moz-border-radius: 2em;
-Webkit-box-shadow: 0 1px 3px rgba (0,0,0, 0,4);
-Moz-box-shadow: 0 1px 3px rgba (0,0,0, 0,4);
}
# Nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
Agregue el siguiente código CSS3 para el estilo de enlace de nivel principal y el cursor del ratón estacionario:
/ * Enlace de nivel principal * /
# Nav a {
font-weight: bold;
color: # e7e5e5;
text-decoration: none;
display: block;
padding: 20px 8px;
margin: 0;
-Webkit-border-radius: 1.6em;
-Moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba (0,0,0, 0,3);
}
# Nav a: hover {
background: # 000;
color: # fff;
}
/ * Enlace principal nivel ciernen * /
. # Nav una corriente, # nav li: hover a {
background: # 666 URL (img / gradient.png) repeat-x 0-40px;
color: # 444;
border-top: 1px solid # f8f8f8;
-Webkit-box-shadow: 0 1px 1px rgba (0,0,0, 0,2);
-Moz-box-shadow: 0 1px 1px rgba (0,0,0, 0,2);
box-shadow: 0 1px 1px rgba (0,0,0, 0,2);
text-shadow: 0 1px 0 rgba (255 255 255, 1);
}
Agregue el siguiente código CSS3 para
/ * Enlace niveles sub libración * /
# Nav ul li: hover a, # nav li: hover li a {
background: none;
fronterizo: ninguno;
color: # 666;
-Webkit-box-shadow: none;
-Moz-box-shadow: none;
}
# Nav ul a: hover {
background: # 0078ff URL (img / gradient.png) repeat-x 0-100px importante;
color: # fff importantes;!
-Webkit-border-radius: 0;
-Moz-border-radius: 0;
text-shadow: 0 1px 1px rgba (0,0,0, 0,1);
}
Agregue el siguiente código CSS3 para la lista desplegable y sus diversos efectos:
/ * Desplegable * /
# Nav li: hover ul {
display: block;
}
/ * Nivel de lista 2 * /
# Nav ul {
display: none;
margin: 0;
padding: 0;
Ancho: 185px;
position: absolute;
top: 35px;
izquierda: 0;
background: # ddd URL (img / gradient.png) repeat-x 0 0;
frontera: 1px solid # b4b4b4;
-Webkit-border-radius: 10px;
-Moz-border-radius: 10px;
border-radius: 10px;
-Webkit-box-shadow: 0 1px 3px rgba (0,0,0, 0,3);
-Moz-box-shadow: 0 1px 3px rgba (0,0,0, 0,3);
box-shadow: 0 1px 3px rgba (0,0,0, 0,3);
}
# Nav ul li {
float: none;
margin: 0;
padding: 0;
}
# Nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 # fff;
}
/ * Nivel 3 + lista * /
# Nav ul ul {
izquierda: 181px;
top:-3px;
}
Agregue el siguiente código CSS3 para crear las esquinas redondeadas para los menús de navegación. Tenga en cuenta que las esquinas redondeadas no se muestren correctamente en algunos navegadores:
/ * Las esquinas redondeadas de primer y último enlace * /
# Nav ul li: first-child a {
-Webkit-border-top-left-radius: 9px;
-Moz-border-radius-topleft: 9px;
-Webkit-border-top-derecha-radio: 9px;
-Moz-border-radius-topright: 9px;
}
# Nav ul li: last-child a {
-Webkit-border-bottom-left-radius: 9px;
-Moz-border-radius-bottomleft: 9px;
-Webkit-border-bottom-derecha-radio: 9px;
-Moz-border-radius-bottomright: 9px;
}
Cuando termine, guarde el archivo CSS.
Consejos y advertencias
La vertical de menú desplegable rendirá según lo previsto en los navegadores que soportan CSS3 - Firefox, Safari, Chrome. Internet Explorer y otros navegadores que no soportan CSS3, todavía se ve el menú, pero las características adicionales, tales como esquinas redondeadas y por observación no se ve.
Bueno!
ResponderEliminar