Menu Lateral Responsive Con RRSS

El menú, que aca te enseño es el que estoy usando el azul, si los colores no te gustan, busca la etiqueta background: y alli puedes cambiar los colores que desees.

Para cambiar el tamaño de la letra busca la etiqueta font-size, si deseas agregar otro menú con submenus solo copia el código que esta en color naranja y pégalo después de <!-- aqui abajo puedes pegar los menus con submenus -->.


Si deseas borrar un menú con submenus, borrar los que esta en colores y si quieres agregar otro copia y pega cualquiera que este en colores

Pega los siguientes códigos para que te funciones los iconos de las redes sociales y el menu movil, debes pegarlos después de la etiqueta <head>.

<script crossorigin='anonymous' integrity='sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=' src='https://code.jquery.com/jquery-3.5.1.js'/>

<script data-auto-replace-svg='nest' src='https://use.fontawesome.com/releases/v5.14.0/js/all.js'/>

También debes pegar este script, ya que es el complemento del JQuery; este código debes pegarlo en una etiqueta de HTML, desde <script> hasta </script>

<script>

$(".submenu").click(function(){

    $(this).children("ul").slideToggle();

})

$("ul").click(function(p){

    p.stopPropagation();

})

</script>


Para que el MENU te funcione tal y cual como aqui te enseño, debes ir a tema y buscar la siguiente etiqueta  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Y justo debajo de esa etiqueta pegas todo desde Menu1 hasta fin Menú1

<!-- ========================= Menu1 ======================== -->

<input id='btn-menu' type='checkbox'/>

<label for='btn-menu'><i class='fas fa-bars'/></label>

<nav class='menu'>

<center>

<h1><a href='/'>TU MARCA</a></h1>

</center>

<ul>

<li><a href='/'><i class='far fa-file-code'/> HOME</a></li>

<li class='submenu'><a href='#'><i class='fab fa-elementor'/>MENU<span><i class='fas fa-caret-down'/></span></a>

<ul>

<li><a href='#'>SubMenu_1</a></li>

<li><a href='#'>SubMenu_2</a></li>

</ul>

</li>

<li class='submenu'><a href='#'><i class='fas fa-ad'/>MENU<span><i class='fas fa-caret-down'/></span></a>

<ul>

<li><a href='#'>Sumbenu_4</a></li>

<li><a href='#'>Sumbenu_3</a></li>

<li><a href='#'>Submenu_2</a></li>

<li><a href='#'>SubMenu_1</a></li>

</ul>            

</li>

<li class='submenu'><a href='#'><i class='fas fa-thumbs-up'/>MENU<span><i class='fas fa-caret-down'/></span></a>

<ul>

<li><a href='#'>Sumbenu_3</a></li>

<li><a href='#'>Submenu_2</a></li>

<li><a href='#'>SubMenu_1</a></li>

</ul>            

</li>

<li class='submenu'><a href='#'><i class='fas fa-icons'/>MENU<span><i class='fas fa-caret-down'/></span></a>

<ul>

<li><a href='#'>Sumbenu_3</a></li>

<li><a href='#'>Submenu_2</a></li>

<li><a href='#'>SubMenu_1</a></li>

</ul>            

</li>

<!-- aquí abajo puedes pegar los menús con submenus -->


<li><a href='#'><i class='far fa-address-book'/>MENU</a></li>

</ul>

<ul class='rs'>

<li><a href='https://www.instagram.com/' target='_blank'><i class='fab fa-instagram'/></a></li>

<li><a href='https://www.facebook.com/' target='_blank'><i class='fab fa-facebook-square'/></a></li>

<li><a href='https://www.youtube.com/' target='_blank'><i class='fab fa-youtube'/></a></li>

<li><a href='https://twitter.com/' target='_blank'><i class='fab fa-twitter'/></a></li>

<li><a href='https://www.pinterest.com/' target='_blank'><i class='fab fa-pinterest'/></a></li>

</ul>

</nav>

<!-- ========================= Fin Menu1 ======================== -->

Para pegar la URL de tu red social favorita cambia lo de rosa y pega tu url.


Para pegar los estilos del menú busca la siguiente etiqueta ]]></b:skin>, también debes irte a tema y antes de los dos corchetes ]] pegas todos los estilos CSS desde CSS Menu hasta Fin CSSMenu


/* ========================== CSS Menu =============================== */

.menu{

    width: 25%; /*Tamaño que ocupara desde la izquierda */

    position: fixed;  /*para mantenerlo fijo "no mover" */ 

    height: 100vh; /*alto de la hoja */

    font-size: 17px; /*Tamaño de las letras */

    background: #004e7a; /*color del menu principal */

    z-index: 10; /*no mover */

    overflow: scroll;  /*hace scroll si el menu es muy grande*/

    transform: translateX(-120%); /*oculat el menu */

    transition: all 0.5s ease-in;  /*Tiempo que tarda el menu en salir */

}

.menu ul ul {

    display: none;  /*oculta el submenu al no usarse */

}

.menu::-webkit-scrollbar{

    width: 5px;  /*Ancho de la barra del scroll */

}

#btn-menu:checked ~ .menu {

    transform: translateX(-15%);  /*mover si el menu sale mas de lo normal */

}

#btn-menu{

    display: none;  /*Oculta el checkbox, no mover */

}

label {

    margin: 10px;  /*distacia desde arriba de las barras del menu*/

    padding: 9px;  /*ancho del fondo de las barras del menu*/

    border-radius: 10px; /*quita los bordes cuadrados */

    background: -webkit-linear-gradient(#1877f2, black);  /*color del fondo de las barras del menu*/

    right: 9px;  /*distancia desde la derecha */

    font-size: 25px;  /*Tamaño de las barras del menu */

    cursor: pointer; /*hace parece un enlace */

    color: white; /*Color de las barras del menu*/

    position: fixed;  /*Mantendra la posicion fija las barras del menu*/

    z-index: 100;  /*No mover */

}

.menu .rs {

    display: flex; /*No mover */

    position: relative; /*No mover */

}

 .menu .rs li a {

    display: block; /*Muestra los botones de las redes sociales */

}

.menu ul {

    margin-top: -10px; /*Ubicacion del menu */

    display: block; /*No mover */

    list-style: none; /*No mover */

    margin-left: -30px; /*distacia que salen las letras del menu */

}

.menu a {

    margin-left: 10px; /* */

    display: block; /*No mover */

    padding: 10px 17.7px;

    color: white;

    text-decoration: none; /*No mover */

    margin-top: 10px;

    transition: all 0.1s;

}

.menu a span {

    position: absolute; /*No mover */

    right: 10px;

}

.menu a:hover {

    color: white;

    background: -webkit-linear-gradient(#004e7a, black);

}

.rs a{

    padding: 3px 7px;

    margin-left: 15px;

    font-size: 28px;

    color: white;

    border-radius: 9px;

    transition: all 0.5s ease-in;

    border-bottom: solid 1.5px white;

}

.rs a:hover{

    color: white;

    background: -webkit-linear-gradient(#1877f2, black);

    transform: rotate(-9deg);

    transition: all 0.1s ease-in;

}

.submenu ul{

    background: -webkit-linear-gradient(#004e7a, black);

    margin-top: -10px;

    margin-left: -40px;

}

.submenu ul a:hover {

    background: -webkit-linear-gradient(#004e7a, black); /*Color del submenu al pasar el mouse */

    font-size: 17.1px;  /*crea un efecto de agrandamiento en las letras del submenu */

}


h1 {

    width: 100%;

    align-items: center;

    margin-left: 10px;  /*distancia desde el lado izquierdo */

    padding: 5px;

    font-size: 30px;  /*Tamaño de la letra del titulo del blog */

    text-decoration: none;

    color: white; /*color de la letra del titulo */

    background: -webkit-linear-gradient(#004e7a, black);  /*color fondo del titulo */

    border-bottom: solid 1.5px white;

    letter-spacing: 0.8px;

}

/*  ======== Estilos para el menú móvil =========== */

@media(max-width: 780px){  

label {

    margin: 3px;

    right: 9px;

}

.menu a{

    left: -5px;

}

.rs a{

    padding: 5px 6px;

    font-size: 30px;

}

.menu{

    left: -8.5px;

    margin-top: 8px;

    width: 70%;

    height: 100vh;

    z-index: 1000;

    transform: translateX(-100%);

    transition: all 0.5s ease-in;

}

.menu ul {

    left: -5px;

}

#btn-menu:checked ~ .menu {

    transform: translateX(0%);

}

}

/* ========================== Fin CSS Menu =============================== */

Entradas populares