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 

Demo Clic aquí

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

TAGS: ComoMenu Responsive para Blogger

Share: