Menú Responsive para Tu Blog de Blogger

MENÚ RESPONSIVE PARA TU BLOG DE BLOGGER
BUSCAMOS:
<head>
Y DEBAJO PONEMOS:
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'
rel='stylesheet'/>
BUSCAR:
</b:skin> (es lo mismo que esto: ]]></b:skin>
DEBAJO PONEMOS:
<style>
nav {
display: block;
background: #E95546;
.menu { display: block; }
.menu li {
display: inline-block;
position: relative;
z-index: 100;
.menu li:first-child { margin-left: 0; }
.menu li a {
font-weight: 600;
text-decoration: none;
padding: 20px 15px;
display: block;
color: #fff;
transition: all 0.2s ease-in-out 0s;
.menu li a:hover,
.menu li:hover>a {
color: #fff;
background: #FC6D58;
.menu ul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 170px;
position: absolute;
left: 0px;
background: #fff;
z-index: 99;
transform: translate(0, 20px);
transition: all 0.2s ease-out;
.menu ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
.menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
.menu ul li a {
font-size: 12px;
font-weight: normal;
display: block;
color: #797979;
background: #fff;
.menu ul li a:hover,
.menu ul li:hover>a {
color: #fff;
.menu li:hover>ul {
visibility: visible;
opacity: 1;
transform: translate(0, 0);
.menu ul ul {
left: 169px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px, 20px);
transition: all 0.2s ease-out;
.menu ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
.menu li>ul ul:hover {
opacity: 1;
transform: translate(0, 0);
.responsive-menu {
display: none;
width: 100%;
padding: 20px 15px;
color: #fff;
text-transform: uppercase;
font-weight: 600;
.responsive-menu:hover {
color: #fff;
text-decoration: none;
a.homer { background: #FC6D58; }
@media (min-width: 768px) and (max-width: 979px) {
.mainWrap { width: 768px; }
.menu ul { top: 37px; }
.menu li a { font-size: 12px; }

a.homer { background: #E95546; }
@media (max-width: 767px) {
.mainWrap {
width: auto;
padding: 50px 20px;
.menu { display: none; }
.responsive-menu { display: block; }
nav {
margin: 0;
background: none;
.menu li {
display: block;
margin: 0;
.menu li a {
background: #fff;
color: #797979;
.menu li a:hover,
.menu li:hover>a {
color: #fff;
.menu ul {
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
width: 100%;
transform: initial;
.menu li:hover>ul {
opacity: 1;
position: relative;
transform: initial;
.menu ul ul {
left: 0;
transform: initial;
.menu li>ul ul:hover { transform: initial; }
</style>
BUSCAMOS :
</head>
ENCIMA PONEMOS ESTO:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
BUSCAMOS:
<body>
SI NO LO ENCUENTRAN, BUSCAR ESTO:

<body expr:class='"loading" + data:blog.mobileClass'>
DEBAJO PEGA ESTO:

<nav>
<a class='responsive-menu' href='#' id='resp-menu'>
<i class='fa fa-reorder'/> Menu</a>
<ul class='menu'>
<li><a class='homer' href='/'><i class='fa fa-home'/> En Portada</a>
</li>
<li><a href='#'><i class='fa fa-tags'/> Tutorias</a>
<ul class='sub-menu'>
<li><a href='#'>Sub-Menu 1</a></li>
</ul>
</li>
<li><a href='#'><i class='fa fa-tags'/> Familias</a>

</ul>
</li>
<li><a href='#'><i class='fa fa-tags'/> Lengua</a>
</ul>
</li>
<li><a href='#'><i class='fa fa-tags'/> Mates</a>
</ul>
</li>
<li><a href='#'><i class='fa fa-tags'/> English</a>

</ul>
</li>
<li><a href='#'><i class='fa fa-envelope'/> Contactos</a></li>
</ul>
</nav>
PARA PONER MÁS PESTAÑAS CON SUBMENUS, COPIA EL CODIGO

SIGUIENTE ENCIMA DEL ESTILO QUE ESTÁ EN VERDE.
<li><a href='#'><i class='fa fa-tags'/> Nueva categoría</a>
</ul>
</li>
BUSCAMOS:
</body>
Y ENCIMA PONEMOS:
<script>
$(document).ready(function(){
var touch = $('#resp-menu');

var menu = $('.menu');
$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
// breakpoint
if(w > 767 && menu.is(':hidden')) {
menu.removeAttr('style');
});
});
</script>
GUARDAR CAMBIOS Y LISTO!!

Menú Responsive para Tu Blog de Blogger

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Menú Responsive para Tu Blog de Blogger

Caricato da

Copyright:

Formati disponibili

MENÚ RESPONSIVE PARA TU BLOG DE BLOGGER

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

.menu { display: block; }

.menu li:first-child { margin-left: 0; }

padding: 20px 15px;

transition: all 0.2s ease-in-out 0s;

transform: translate(0, 20px);

transition: all 0.2s ease-out;

content: &quot; &quot;;

border-color: rgba(255, 255, 255, 0);

transform: translate(0, 0);

transform: translate(20px, 20px);

transition: all 0.2s ease-out;

border: solid transparent;

content: &quot; &quot;;

border-color: rgba(255, 255, 255, 0);

.menu li&gt;ul ul:hover {

transform: translate(0, 0);

padding: 20px 15px;

a.homer { background: #FC6D58; }

@media (min-width: 768px) and (max-width: 979px) {

.mainWrap { width: 768px; }

.menu ul { top: 37px; }

.menu li a { font-size: 12px; }

@media (max-width: 767px) {

padding: 50px 20px;

.menu { display: none; }

.responsive-menu { display: block; }

.menu li&gt;ul ul:hover { transform: initial; }

ENCIMA PONEMOS ESTO:

SI NO LO ENCUENTRAN, BUSCAR ESTO:

DEBAJO PEGA ESTO:

<a class='responsive-menu' href='#' id='resp-menu'>

<i class='fa fa-reorder'/> Menu</a>

<li><a class='homer' href='/'><i class='fa fa-home'/> En Portada</a>

<li><a href='#'><i class='fa fa-tags'/> Tutorias</a>

<li><a href='#'>Sub-Menu 1</a></li>

<li><a href='#'>Sub-Menu 2</a></li>

<li><a href='#'>Sub-Menu 3</a></li>

<li><a href='#'>Sub-Menu 4</a></li>

<li><a href='#'>Sub-Menu 5</a></li>

<li><a href='#'><i class='fa fa-tags'/> Familias</a>

<li><a href='#'>Sub-Menu 1</a></li>

<li><a href='#'>Sub-Menu 2</a></li>

<li><a href='#'>Sub-Menu 3</a></li>

<li><a href='#'>Sub-Menu 4</a></li>

<li><a href='#'>Sub-Menu 5</a></li>

<li><a href='#'><i class='fa fa-tags'/> Lengua</a>

<li><a href='#'>Sub-Menu 1</a></li>

<li><a href='#'>Sub-Menu 2</a></li>

<li><a href='#'>Sub-Menu 3</a></li>

<li><a href='#'>Sub-Menu 4</a></li>

<li><a href='#'>Sub-Menu 5</a></li>

<li><a href='#'><i class='fa fa-tags'/> Mates</a>

<li><a href='#'>Sub-Menu 1</a></li>

<li><a href='#'>Sub-Menu 2</a></li>

<li><a href='#'>Sub-Menu 3</a></li>

<li><a href='#'>Sub-Menu 4</a></li>

<li><a href='#'>Sub-Menu 5</a></li>

<li><a href='#'><i class='fa fa-tags'/> English</a>

<li><a href='#'>Sub-Menu 1</a></li>

<li><a href='#'>Sub-Menu 2</a></li>

content: " ";

content: " ";

.menu li>ul ul:hover {

.menu li>ul ul:hover { transform: initial; }

var touch = $('#resp-menu');

if(w > 767 && menu.is(':hidden')) {