MENÚ DESPLEGABLE HORIZONTAL PARA BLOGGER

MENÚ DESPLEGABLE HORIZONTAL PARA BLOGGER.

Agregar un hermoso menú desplegable al blog aumenta la belleza de su blog. También los menús desplegables ayudan a sus lectores a navegar fácilmente por su blog.

Este menú también está diseñado con el uso de CSS3 puro, como compartimos antes de un excelente menú desplegable css3 de múltiples niveles.

 Este menú está diseñado por Nick La de webdesignerwall .

Como siempre he probado mi mejor nivel para hacerlo en la instalación por pasos. Así que solo tiene que copiar y pegar el código.

Puede agregar este menú como un widget HTML / JavaScript para que pueda no edite su plantilla :). Veamos cómo agregarla al blogger blogger.




Si queréis instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

Ir a Blogger

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

<style>
#nav {
    margin: 0;
    padding: 7px 6px 0;
    background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXfpKG2043yrODuq0mv2cBD95O1u52wAieXxdTg35bQVfK7KbRJJKTH5yDhCdUiOrFpnjf4tdMXjn8Pk9BHLjiiETERSxEeCzbHsqQONUhthX8aYK4imPhEEBsmAhRMIj-G77sCsLeNOg/s1600/hb-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, .4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    width: 100%
}

#nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
    font-family: calibri;
}


/* main level link */
#nav a {
    font-weight: bold;
    color: #e7e5e5;
    text-decoration: none;
    display: block;
    padding: 8px 20px;
    margin: 0;
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
    text-shadow: 0 1px 1px rgba(0,0,0, .3);
}

#nav a:hover {
    background: #000;
    color: #fff;
}

/* main level link hover */
#nav .current a, #nav li:hover > a {
    background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXfpKG2043yrODuq0mv2cBD95O1u52wAieXxdTg35bQVfK7KbRJJKTH5yDhCdUiOrFpnjf4tdMXjn8Pk9BHLjiiETERSxEeCzbHsqQONUhthX8aYK4imPhEEBsmAhRMIj-G77sCsLeNOg/s1600/hb-gradient.png) repeat-x 0 -40px;
    color: #444;
    border-top: solid 1px #f8f8f8;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    box-shadow: 0 1px 1px rgba(0,0,0, .2);
    text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

#nav ul a:hover {
    background: #0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXfpKG2043yrODuq0mv2cBD95O1u52wAieXxdTg35bQVfK7KbRJJKTH5yDhCdUiOrFpnjf4tdMXjn8Pk9BHLjiiETERSxEeCzbHsqQONUhthX8aYK4imPhEEBsmAhRMIj-G77sCsLeNOg/s1600/hb-gradient.png) repeat-x 0 -100px !important;
    color: #fff !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#nav li:hover > ul {
    display: block;
}

/* level 2 list */
#nav ul {
    display: none;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXfpKG2043yrODuq0mv2cBD95O1u52wAieXxdTg35bQVfK7KbRJJKTH5yDhCdUiOrFpnjf4tdMXjn8Pk9BHLjiiETERSxEeCzbHsqQONUhthX8aYK4imPhEEBsmAhRMIj-G77sCsLeNOg/s1600/hb-gradient.png) repeat-x 0 0;
    border: solid 1px #b4b4b4;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    box-shadow: 0 1px 3px rgba(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;
}

/* level 3+ list */
#nav ul ul {
    left: 181px;
    top: -3px;
}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;
    -webkit-border-top-right-radius: 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-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#nav {
    display: inline-block;
}

html[xmlns] #nav {
    display: block;
}

* html #nav {
    height: 1%;
}
</style>
<ul id="nav">
  <li>
            <a href="https://escaparatedigital2019.blogspot.com/">Inicio</a>
        </li>
        <li>
            <a href="#">Menú 1</a>
            <ul>
                <li>
                    <a href="#">Sub Menú 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Menú 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Menú 2</a>
            <ul>
                <li>
                    <a href="#">Sub Menú 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Menú 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Menú 3</a>
        </li>
        <li>
            <a href="#">Menú 4</a>
            <ul>
                <li>
                    <a href="#">Sub Menú 2.1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="https://escaparatedigital2019.blogspot.com/p/contacto.html">Contacto</a>
        </li>
    </ul>

Ahora reemplace # con sus enlaces y reemplace Menú 1, Menú 2, etc. con el texto que desea que aparezca en el menú.

Personalizaciones

Nota: te recomiendo que utilices nuestro Editor HTML para realizar tus cambios. Puedes ver una vista previa en vivo de tu menú usando el Editor HTML. Copia todo el código anterior y pégalo en el editor.

Ayuda adicional?

Muchos bloggers novatos obtienen el problema al agregar enlaces y textos. Si está obteniendo el mismo problema, simplemente proporcione un menú de árbol de su menú, construiré la parte HTML para usted.

 Fecha de la Publicación; 18-01-2019

 Fuente;

 Publicado por;