MENÚ HORIZONTAL CON UN SOLO WIDGET

julio 27, 2019

MENÚ HORIZONTAL CON UN SOLO WIDGET.

Si te hace falta un menu para tu blog, aqui tienes este tan chulo que tiene hasta submenus.
Tiene todos los bordes redondeados, desde el fondo hasta los enlaces. Si quieres ponerlo, copia el codigo y añadelo donde lo quieras mostrar.

Puedes poner los estilos aparte si quieres, pero si tienes Blogger, lo puedes poner todo el codigo en un gadget HTML/Javascript.

Modifica lo que esta en rojo para poner los nombres y los enlaces que desees.

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

<ul id="nav1">
<li class="current"><a href="ENLACE">Un enlace</a>

<ul>
<li><a href="ENLACE">Enlace 1</a></li>
<li><a href="ENLACE">Enlace 2</a></li>
<li><a href="ENLACE">Enlace 3</a></li>
<li><a href="ENLACE">Enlace 4</a></li>
</ul>
</li>
<li><a href="ENLACE">TEXTO</a>

<ul>
<li><a href="ENLACE">TEXTO</a></li>
<li><a href="ENLACE">TEXTO</a></li>
<li><a href="ENLACE">TEXTO</a></li>
<li><a href="ENLACE">TEXTO</a></li>
</ul>
</li>
<li><a href="ENLACE">TEXTO</a></li>
<li><a href="ENLACE">TEXTO</a></li>
</ul>


<style>
#nav1 {
margin: 0;
padding: 6px 7px 0;
height:37px;
background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhph7iOtAEVis8jk6EQHTZk3lQuzXYR0rTkNeXXO4BDFPTyJrJHpfal227k4JNUOx_a7AAcNFAftv7h0ZYez_R_0bcvi_iulDdgjHedFDgNC6kat37pk61-E9c1lKj_IhkoiCEdI8nbyyQk/s320/image1.png) repeat-x 0 -110px;
line-height: 100%;

border-radius: 3em;
-webkit-border-radius: 3em;
-moz-border-radius: 3em;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav1 li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}

/* main level link */
#nav1 a {
font-weight: bold;
color: #000000 !important;
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);
}
#nav1 a:hover {
background: #000;
color: #fff !important;
}

/* main level link hover */
#nav1 .current a, #nav1 li:hover > a {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVxD4S6UJo23hKr6wp7pE_CFp-S1jZazYSgWE-akrzlMFffNyGcMjB25FGzjWKT4c78xYwASgKzHuhiPQSK0st8BN6B_-vIo12uEfvIRLng9Xruk8KBTDZqKzIO7820OSceg26zdDWzgNz/s320/image1.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 */
#nav1 ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;

-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav1 ul a:hover {
background: #0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVxD4S6UJo23hKr6wp7pE_CFp-S1jZazYSgWE-akrzlMFffNyGcMjB25FGzjWKT4c78xYwASgKzHuhiPQSK0st8BN6B_-vIo12uEfvIRLng9Xruk8KBTDZqKzIO7820OSceg26zdDWzgNz/s320/image1.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 */
#nav1 li:hover > ul {
display: block;
}

/* level 2 list */
#nav1 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/AVvXsEhph7iOtAEVis8jk6EQHTZk3lQuzXYR0rTkNeXXO4BDFPTyJrJHpfal227k4JNUOx_a7AAcNFAftv7h0ZYez_R_0bcvi_iulDdgjHedFDgNC6kat37pk61-E9c1lKj_IhkoiCEdI8nbyyQk/s320/image1.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);
}
#nav1 ul li {
float: none;
margin: 0;
padding: 0;
}

#nav1 ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
font-weight: bold;
color: #000000 !important;
}

#nav1 ul ul {
left: 181px;
top: -3px;
}

#nav1 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;
}
#nav1 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 */
#nav1:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav1 {
display: inline-block;
}
</style>

Despues de haber insertado el código, un clic en "Guardar"