MENÚ VERTICAL DESPLEGABLE PARA BLOGGER

MENÚ VERTICAL DESPLEGABLE PARA BLOGGER .

Vuelvo de nuevo con un menú vertical desplegable y totalmente responsive con subspestañas por lo que podremos agregar enlaces a cada sección del menú.

Al ser responsive se adapta a cualquier anchura de la sidebar.




Si queréis verlo en acción podéis ir a mi Bloc de Demos lo veréis con el nombre Menú vertical

Para añadir este menú, siga los siguientes pasos:

Un clic en “Plantilla”

 Un clic en “Editar HTML”

 Ahora se te abrirá el Editor HTML de tu plantilla

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

  Busca el siguiente código

</head>

Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:

 Y antes de ello colocamos el script para desplegar con el código siguiente:

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function()
{
$("#amor p.menu-inicio").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings()
});
$("#secondpane p.menu-inicio").mouseover(function()
{
$(this).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings()
});
});
//]]>
</script>

 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 type="text/css">
.menu-inicio {color: #fff;margin: 2px 0 0 0; padding: 0;margin-top: 10px; background: #057ED5; display: block; border-radius: 4px; transition: all 0.5s ease;font-size: 14px; padding: 20px 0 10px 10px; border-radius: 4px; }
.menu-inicio a{color: #fff;}
.menu_body {width:100%;display:none;}
.menu_body a{background: #7CC6FA; display: block; padding: 10px 0 10px 10px; font-size: 14px; outline: 0; transition: all 0.5s ease; border-radius: 4px; line-height: 28px;color: #fff;}
.menu_body a:hover{
background: #057ED5; color: #fff; transition: all 0.5s ease; display: block; border-radius: 4px;}
</style>
<div class='menu-amor' id='amor'>
<p class='menu-inicio'><a href='URL del enlace'>INICIO</a></p>
<p class='menu-inicio'>Pestaña 1</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>
<p class='menu-inicio'>Pestaña 2</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>
<p class='menu-inicio'>Pestaña 3</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>
<p class='menu-inicio'>Pestaña 4</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div></div>

Ya sólo cambia el nombre de las pestañas, de las subpestañas, y agrega las URLs de los enlaces donde se indica.

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

 Fuente; amorsevillista

 Publicado por;