Crear una lista desplegable para cualquier menú horizontal en blogger
La sección de encabezado de un sitio web que incluye sobre todo el logo y el menú
de navegación, es la región que atrae a un visitante. Es la primera sección de su diseño de todo lo que llama la atención del lector. Por
lo tanto con el tiempo, los diseñadores introdujeron algunas versiones de los
menús desplegables usando jQuery y CSS3.
La
mayoría de ustedes probablemente saben cómo personalizar un menú, pero que a
menudo les resulta difícil añadir
efectos jQuery a un menú existente, añadir transiciones CSS3 para los
efectos de roll over y,
especialmente, a su vez un menú horizontal simple en una caída de varios
niveles de menús desplegables. Con
el fin de entender los fundamentos básicos de HTML de un menú y la estructura de CSS vamos a publicar la serie de tutoriales sobre este tema para
que sea extremadamente fácil para la mayoría de ustedes para crear y diseñar
los menús por su cuenta.
En esta serie se dará
a conocer algunos de nuestros códigos de proyecto por primera vez. Usted no encontrará menús simples
de HTML aquí. Usted
aprenderá cómo crear un menú de lujo totalmente desplegable, convertir un menú
horizontal en el menú desplegable, añadir
efectos jQuery con deslizamiento suave, añadir efectos de animación CSS3 y mucho más. Si
fueron capaces de entender cómo un menú está estructurado y diseñado entonces
seguramente se convertirán en un diseñador web optimizado. Estos
tutoriales no se limitan a los usuarios de Blogger
y Wordpress, ya que se puede implementar en cualquier plataforma.
En
cada etiqueta HTML del CSS de estilo, deberán utilizar una
clase que comienza con un punto (.) O un identificador que se inicia con una
almohadilla (#). La
única diferencia entre una clase y el identificador es que en una clase se
pueden utilizar varias veces, pero un ID puede ser utilizado una sola vez.
Nota:
No es necesario aprender la estructura del código, sólo le dan un vistazo rápido
para entender los conceptos básicos. Su
trabajo es mirar el código del menú en su blog y averiguar su nombre de clase, eso es todo lo que tiene que hacer.
El
menú constará de dos partes es decir, CSS
(hojas de estilo) y HTML. Puesto
que estamos diseñando un menú y su estructura se vería ligeramente similar a
esta:
CSS:
.navigation
{
width:1000px;
margin:0 auto;
height:34px;
}
.navigation
ul {
list-style:none;
margin:0;
padding:8px 0 0 0;
}
.navigation
ul li {
float:left;
color:#FFFFFF;
font-size:14px;
text-transform:uppercase;
font-weight:bold;
}
.navigation
ul li a {
color:#FFFFFF;
padding:8px 30px 10px 30px;
border-right:1px solid #ffffff;
}
.navigation
ul li a:hover {
background:#060505;
color:#ffffff;
}
|
En el código anterior en el menú tiene un nombre de clase que se llama, navigation. Así que en el código HTML este
hará que aparezca el menú de la clase usando el atributo class = " navigation"
HTML:
<div
class="navigation">
<ul>
<li ><a href="#">home</a></li>
<li><a href="#">about us</a>
<ul>
<li><a href="#">Test 1</a>
<ul>
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</li>
<li><a href="#">Test 2</a>
<ul>
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</li>
<li><a href="#">Test 3</a></li>
</ul>
</li>
<li><a href="#">services</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#"> Sitemap</a></li>
</ul>
</div>
|
Este mismo concepto
se aplica exactamente a todos los menús, sólo los nombres de las clases y la
estructura del código son diferentes.
Agregar en el menú desplegable
Suponemos que el menú contiene una sencilla lista de enlaces en línea horizontal y no tienen una Columna que cae verticalmente hacia abajo. Para crear esta columna todo lo que necesita hacer es insertar el siguiente código CSS dentro de la parte de su menú.
Realice estos cambios:
Vuelva a colocar la navegación con el nombre de la clase Menú.
Suponemos que el menú contiene una sencilla lista de enlaces en línea horizontal y no tienen una Columna que cae verticalmente hacia abajo. Para crear esta columna todo lo que necesita hacer es insertar el siguiente código CSS dentro de la parte de su menú.
| .navigation li ul { position: absolute; left: -999em; width: 160px; margin: 19px 0 0 0; padding: 0; } .navigation li:hover ul { left: auto; } .navigation li li a { background: #C70D0D; width: 120px; color: #FFFFFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } .navigation li li a:hover { background: #060505; color: #FFFFFF; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; border-bottom: 1px dotted #060505; } .navigation li ul ul { margin: -35px 0 0 145px; } .navigation li:hover ul ul { left: -999em; } .navigation li ul li:hover ul { left: auto; } |
Realice estos cambios:
Vuelva a colocar la navegación con el nombre de la clase Menú.
Para cambiar el
color desplegable de contenedores
en el modo activo cambie edición # C70D0D, para el fondo y para el color de la fuente es # FFFFFF.
Para cambiar el color desplegable cambie #060505, para el fondo de color de la fuente #FFFFFF
Para cambiar el color desplegable cambie #060505, para el fondo de color de la fuente #FFFFFF
Creación de la lista del menú desplegable
Está todo hecho con el trabajo de diseño. Ahora sólo tiene que crear la lista en la parte de HTML.
Cualquier ficha o un enlace en su menú tendrán la siguiente estructura:
Está todo hecho con el trabajo de diseño. Ahora sólo tiene que crear la lista en la parte de HTML.
Cualquier ficha o un enlace en su menú tendrán la siguiente estructura:
| <li><a href="#">LINK TEXT</a> </li> |
Para
agregar una lista desplegable para esta ficha todo lo que necesitas hacer es pegar el siguiente código justo antes de la etiqueta de cierre </li>. Véalo a continuación:
| <li><a
href="#">LINK TEXT</a> <ul> <li><a href="#">FIRST LIST 1</a></li> <li><a href="#">FIRST LIST 2</a></li> <li><a href="#">FIRST LIST 3</a></li> </ul> </li> |
Para agregar una segunda lista desplegable dentro de esta lista vertical,
basta con utilizar el mismo concepto. Voy a añadir en la segunda lista vertical
después de la pestaña: "FIRST LIST 2"
<li><a href="#">LINK TEXT</a>
<ul>
<li><a
href="#">FIRST LIST 1</a></li>
<li><a
href="#">FIRST LIST 2</a>
<ul>
<li><a
href="#">SECOND LIST 1</a></li>
<li><a
href="#">SECOND LIST 2</a></li>
<li><a
href="#">SECOND LIST 3</a></li>
</ul>
</li>
<li><a
href="#">FIRST LIST 3</a></li>
</ul>
</li>
|
Les recuerdo que lo demás sigue el mismo patrón
Guarda y listo ya tienes tu propia lista desplegable para cualquier menú horizontal.
Cualquier cosa que no hayan entendido solo déjenme un comentario y les responderé de inmediato.
Saludos.
Saludos.
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Comentarios