add

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.

Crear una lista desplegable para cualquier menú horizontal en blogger

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

.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

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: 

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

emailEnviar por correo

9 comentarios:

  1. Hola, un articulo muy interesante, pero tengo un problemilla...

    Yo seguí este tutorial para dejar un menu en mi blog (http://ciudadblogger.com/2012/04/menu-horizontal-con-subpestanas-y.html)

    Pero cuando intento añadir otro nivel a las pestañas, estas se ponen hacia abajo, y no de lado...

    sabes que es lo que hay que modificar para que se ponga bien¿?

    Salu2

    ResponderEliminar
  2. Hola Ruben,
    hemos creado el menu desplacable. Tanto los contenedores del menu como de los submenus se ven permantemente. Que hicimos mal?
    Gracias de antemano

    ResponderEliminar
  3. Hola Abi, talvez algo hisistes mal, te recomiendo borrar todo el codigo que insertates enteriormente e intentes con este nuevo menu que es mas facil de insertar con un solo widget, aqui te dejo el enlace.
    http://www.ayudadeblogger.com/2012/10/como-agregar-un-menu-para-mi-blog-de-blogger-con-un-solo-widget.html
    Cualquier pregunta no dudes en hacermelo saber
    Saludos.

    ResponderEliminar
  4. Hola Valentín,

    Elmío funciona básicamente bien. Pero si tengo una lista larga de pestañas, sólo me permite ir hasta el límite de la entrada. Cómo lo soluciono? Se agradece de corazón.

    Saludos

    ResponderEliminar
  5. Hola At, necesito que seas un poco mas explicativo posible para poderte ayudar en lo que tu mensaje dice, ya que no te entiendo muy bien, espero tu respuesta para poderte ayudar.
    Saludos.

    ResponderEliminar
  6. Hola Valentín,gracias por tu respuesta.
    En la parte superior de mi blog tengo un menú desplegable con efecto deslizante de varios niveles. Debajo del menú están las entradas y a la derecha los gadgets.

    Las pestañas del menú (son 7 u 8) despliegan el primer nivel de subpestañas.
    EJEMPLO una pestaña que despliega 6 subpestañas: todo va bien cuando paso el mouse sobre la 1a, 2a, 3a y 4a subpestañas, puedo hacer click en ellas y funcionan los links; PERO si tan sólo paso el mouse sobre la 5a (ni hablar de la 6a) las subpestañas desplegadas desaparecen y menos con el otro subnivel.
    Probé aumentando el espacio entre el menú y la entrada, pero no es muy estético y he visto que en muchos blogs que llegan a tener hasta 8 subpestañas con otros niveles de subpestañas y que se despliegan bien hacia abajo.
    Muchas gracias por tu ayuda

    ResponderEliminar
  7. Hola At ana Torres, borra el menu que tienes en tu blog incluido el codigo del menu que introducistes en el codigo html de tu plantilla, y pon este menu, aqui te dejo el enlase de mi post: http://www.ayudadeblogger.com/2012/10/como-agregar-un-menu-para-mi-blog-de-blogger-con-un-solo-widget.html
    Saludos.

    ResponderEliminar
  8. Cuando dice "Vuelva a colocar la navegación con el nombre de la clase Menú." ¿a que se refiere? Estoy tratando se realizar el menú pero el texto me sigue apareciendo subrayado y no puedo apreciar los menúes desplegables

    ResponderEliminar
    Respuestas
    1. Hola para que no tengas inconvenites al momento de swguir este tutorial, te recomiendo que sigas este nuevo tutorial que es mas facil de realizarlo, sigue este enlace y borra todo lo que pusiste anteriormente e instala este nuevo tutorial en un solo widget: http://www.ayudadeblogger.com/2012/10/como-agregar-un-menu-para-mi-blog-de-blogger-con-un-solo-widget.html
      Saludos.

      Eliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios