Aprender como crear un menú responsive en Blogger

En este tutorial aprenderá a crear un menú de navegación superior responsive con estilos CSS y JavaScript de una forma fácil y segura con unos simples pasos.

¿Cómo funciona?

Básicamente lo que hace el menú es mostrarse de forma diferente, la primera se muestra en modo desktop y al abrir el blog desde un teléfono inteligente cambiara la barra de navegación:
Ejemplo

En modo desktop 


En modo móvil 





Video tutorial

Tutorial


1.- Ir a Blogger.com

2.- Un clic en Diseño

3.- Un clic en Agregar un gadget

4.- Un clic en el gadget HTML/Javascript



5.- Ingrese las siguientes líneas código en su interior

<div class="clase-navegador" id="menuresponsive">
  <a href="/" class="active">Inicio</a>
  <a href="#">Temas</a>
  <a href="#">Deportes</a>
  <a href="#">Información</a>
  <a href="#">Video</a>
  <a href="#">Mapa</a>
  <a href="#">Autor</a>
  <a href="#">Contactos</a>
  <a href="javascript:void(0);" class="icon" onclick="miproyecto()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<style>
.clase-navegador {
  overflow: hidden;
  background-color: #333;
}

.clase-navegador a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.clase-navegador a:hover {
  background-color: #ddd;
  color: black;
}

.clase-navegador a.active {
  background-color: #DF013A;
  color: white;
}

.clase-navegador .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .clase-navegador a:not(:first-child) {display: none;}
  .clase-navegador a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .clase-navegador.responsive {position: relative;}
  .clase-navegador.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .clase-navegador.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
  
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
function miproyecto() {
  var x = document.getElementById("menuresponsive");
  if (x.className === "clase-navegador") {
    x.className += " responsive";
  } else {
    x.className = "clase-navegador";
  }
}
</script> 
6.- Realice sus respectivos cambios

7.- Un clic en Guardar

Eso es todo

Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dude en escribir



Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

7 comentarios:

  1. buen dia este a ese menu se le puede agregar opciones despegables?

    ResponderEliminar
  2. Hola,tengo una plantilla responsive pero en dispositivos móviles el menú se muestra muy pequeño ,como puedo solucionarlo?

    ResponderEliminar
    Respuestas
    1. Hola, cual es la dirección URL del blog donde se encuentra insertado el Menu

      Eliminar
  3. Hola, gracias, buen aporte, como hacerlo fixed?

    ResponderEliminar
  4. Hola ¿Cómo puedo ponerle link desplegable? Gracias

    ResponderEliminar