Aprender como crear un menú responsive en Blogger
¿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
Obrigado
ResponderEliminarbuen dia este a ese menu se le puede agregar opciones despegables?
ResponderEliminarHola,tengo una plantilla responsive pero en dispositivos móviles el menú se muestra muy pequeño ,como puedo solucionarlo?
ResponderEliminarHola, cual es la dirección URL del blog donde se encuentra insertado el Menu
EliminarHola, gracias, buen aporte, como hacerlo fixed?
ResponderEliminarHola ¿Cómo puedo ponerle link desplegable? Gracias
ResponderEliminarmenu desplegable
ResponderEliminar