Menú responsive con subcategorías en el blog


Este menú son subcategorías e iconos sociales responsive para el blog es muy útil ya que no solo tienes organizado para el visitante las secciones del blog, sino que también los sitios para ponerse en contacto o seguirte en las redes sociales, ademas esta adaptado para que se vea en el móvil.



Pasos para la instalación:

Ir a Diseño ► Edición HTML ► Presionar Ctrl + F → en el buscador pegar

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Debajo se esta linea pegar el siguiente código:

<!-- Menu responsive con subcategorías-->
<nav id='menu'>
    <div class='barra'>
        <input type='checkbox'/>
            <label>&#8801;<span>Menu</span></label>
            <ul class='principal'>
            <li><a href='/'>Inicio</a></li>
            <li><a href='#'>Sobre mi</a></li>
            <li><a href='#'>Categorías <i class='fa fa-caret-down'/></a>
                <ul class='menus'>
                <li><a href='#'>SubCategoría 1</a></li>
                <li><a href='#'>SubCategoría 2</a></li>
                <li><a href='#'>SubCategoría 3</a></li>
                </ul>
               </li>
            <li><a href='#'>Contacto</a></li>
            </ul>
        <div class='iconos'>
            <a href='#'><i area-hidden='true' class='fa fa-twitter'/></a>
            <a href='#'><i area-hidden='true' class='fa fa-facebook'/></a>
            <a href='#'><i area-hidden='true' class='fa fa-instagram'/></a>
            <a href='#'><i area-hidden='true' class='fa fa-pinterest-p'/></a>
          </div>
    </div>
</nav> <!-- Fin Menú responsive con subcategorías-->


►Buscar   </head>  arriba pegar el siguiente código:

<style>/*-----Menú responsive con subcategorías----*/
body {margin: 0px;padding-right: 0px;padding-left: 0px;}
.barra{width:930px;/*ancho del blog*/
margin:0 auto;}
#menu{background: #cccccc;/* color de la barra*/
color: #333;/*color texto de la barra*/
height: 45px;
border-bottom: 1px solid #e9e9e9;/* borde inferior de la barra*/
box-shadow: 0px 2px 7px #dadada;/* sombra inferior de la barra*/
width:100%;z-index:101;
}
#menu ul,#menu li{margin: 0px auto;padding:0 0;list-style:none;}
#menu .iconos{float:right;}
#menu li{float:left;display:inline;position:relative;
font-family: Oswald, sans-serif;/*fuente del texto */
font-size:12px;
}
#menu ul a{display: block;line-height: 45px;padding: 0 14px;text-decoration: uppercase;
color: #333333;/*color del texto*/
text-transform: uppercase;/*letras mayúsculas*/
letter-spacing: 1.5px;/*espacio entre letras*/
}
#menu li a:hover{color: #000000;/*color del texto */
text-decoration: none;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #e9e9e9;/*color del fondo de la categoría */}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{
font-family: Oswald, sans-serif;/*fuente del texto */
font-size:25px;
font-weight: bold;
display:none;width:35px;height:35px;line-height:45px;text-align:center;}
#menu label span{
font-family: Oswald, sans-serif;/*fuente del texto */
font-size:12px;
position:absolute;left:35px;text-transform:uppercase;font-weight: bold;line-height: 45px;letter-spacing:0.5px;}
#menu ul.menus{height: auto;overflow: hidden;width: 170px;
background: #dddddd;/*color del fondo del subcategorías */
position: absolute;z-index: 99;display: none;border: 1px solid #e9e9e9;}
#menu ul.menus li{display: block;width: 100%;
font-family: Oswald, sans-serif;/*fuente del texto */
font-size:12px;
text-transform: uppercase;border-bottom: 1px solid #e9e9e9;}
#menu ul.menus li:last-child{border-bottom:none;}
#menu ul.menus a{color: #333333;/*color del  texto del subcategorías */
line-height: 35px;}
#menu li:hover ul.menus{display:block;}
#menu ul.menus a:hover{background: #e9e9e9;/*color del  fondo del subcategorías */
color: #000000;/*color del  texto del subcategorías */
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;}
.iconos a{padding: 0 15px;height: 45px;display: inline-block;}
.iconos a:hover{
background: #e9e9e9;/*color del fondo de la categoría*/
color: #000000;/*color del icono*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menu .fa{font-size:14px;line-height: 45px;color: #333333;/*color del icono*/}
@media screen and (max-width: 960px){
#menu{z-index:101;}
#menu ul{
background:#dddddd;/*color del desplegable del menú móvil*/
position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto;
font-family: Oswald, sans-serif;/*fuente del texto */
font-size:12px; }
#menu ul a{ display: block; line-height: 40px; padding: 0 14px;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block;}
#menu input{z-index:4}
#menu input:checked + label{color:#333333;/*color de las barras*/
}
#menu input:checked ~ ul{display:block;top: 40px;}
.barra{width:95%!important;}
}
header{padding-top:45px;}
/*-----fin menú responsive-----*/</style>


Se puede personalizar y/o cambiar todo lo que tiene explicación.


►Buscar <head> debajo pegar lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>


Nota
  • Si ya tiene instalado en la plantilla Jquery no poner esa linea.
  • Si ya tiene en su plantilla Font-Awesome instala no ponerlo.
  • Si desea utilizar otra fuente instalarla y no poner font-family: Oswald.





Así tendrás en tu blog de Blogger un Menú responsive con subcategorías.



Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top