¿Por qué desarrollar para móviles?
Con el auge de los smartphones y tablets hoy en día, los sitios no están optimizados para estos dispositivos lo que causa una mala experiencia de usabilidad a los usuarios, por eso es nuestra misión cambiar ese panorama desarrollando para móviles.
En esta ocasión les traigo un pequeño tip para sus desarrollos móviles, un navbar que cambia dependiendo de la resolución de pantalla.
Así se verá en resoluciones mayores a 450px:
Y así en resoluciones menores a 450px:
Estructura HTML5
Código :
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Navbar adaptable</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Navbar adaptable</h1>
</header>
<nav>
<a onclick="muestra_oculta('mostrar')"><!-- Al dar click aquí se mostrará u oculltará la lista -->
<img src="imgs/menu.png">
</a>
<ul id="mostrar">
<li>Inicio</li>
<li>Blog</li>
<li>Portafolio</li>
<li>Contacto</li>
<li>Redes Sociales</li>
</ul>
</nav>
<script src="js/mostrarOcultar.js"></script>
</body>Función "mostrarOcultar" Javascript
Código :
function mostrarOcultar(id) {
if (document.getElementById) {
var menu = document.getElementById(id);
menu.style.display = (menu.style.display == 'none') ? 'block' : 'none';
}
}
window.onload = function(){
mostrarOcultar('mostrar');
}
// Con esto haremos que al dar click en la imagen "menu.png" muestre u oculte el contenido.
Maquetación CSS3
Código :
@charset ("utf-8");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800"); /* Open Sans de Google Fonts */
a {
padding: 8px 0;
}
body {
font-family: Open Sans, Helvetica, Arial;
font-size: 14px;
margin: 0;
}
h1 {
color: #fff;
font-size: 18px;
margin: 0;
text-align: center;
text-transform: uppercase;
}
header {
background: #222;
padding: 10px 0;
width: 100%;
}
li {
color: #fff;
list-style: none;
padding: 12px;
}
li:hover {
background: rgba(0,0,0,.25);
}
nav {
background: #08c;
text-align: center;
width: 100%;
}
ul {
margin: 0;
padding: 0;
}
/* Aquí viene la magia */
/* En resoluciones mayores a 450px */
@media screen and (min-width: 450px) {
a {
display: none;
}
li {
display: inline-block;
}
ul {
display: block !important;
}
}
/* En resoluciones menores a 450px */
@media screen and (max-width: 449px){
a {
display: block;
}
li {
display: block;
}
}Con esto tendríamos nuestro navbar completamente adaptable dependiendo de la resolución de pantalla.
Archivos del tutorial:
Descargar
Demo
El código ha sido adaptado en base a los consejos de @the_fricky comentados en este hilo
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
La primera es mostrar el menú usando "!important", que tiene preferencia sobre los estilos inline:
Código :
@media screen and (min-width: 450px) { nav{display:block !important} }Otra opción, más recomendable, es usar una clase que maneje la visibilidad de los elementos y agregarla o quitarla con el botón. De esa manera puedes hacer que los elementos estén visibles cuando el ancho es mayor a 450px, independientemente de si está aplicada la clase o no.
En ambos casos se hace innecesario duplicar el etiquetado.
Estructura HTML5
agregado en el tutorial.mx
Maquetación CSS3
agregado en el tutorial.mx
Kinduff :
Eso hice o si no el código sería más largo.
Por Zarfar el 13 de Abril de 2012
function mostrarOcultar(id) {
cambiar por
function muestra_oculta(id) {
y
window.onload = function(){
mostrarOcultar('mostrar');
}
por
window.onload = function(){
muestra_oculta('mostrar');
}
coregidme si m equivoco
Por ikichpan el 24 de Mayo de 2012
Aquí está: Link
Por Anis_Web el 25 de Julio de 2012
Por roberto el 03 de Agosto de 2012
Por coke el 28 de Septiembre de 2012
saludos
Por anibal el 14 de Septiembre de 2013
Por Victor el 10 de Enero de 2014
Por Dita el 28 de Septiembre de 2014
Por Dita el 01 de Octubre de 2014
Por Will el 10 de Noviembre de 2014