Buscador


En todo Internet
En Uterra.Com

Contenidos


Probablemente uno de los mayores problemas que se presentan a la hora de adaptar una Web para dispositivos móviles sea el típico menú de navegación.

Cuando estamos ante una pantalla de grande, como la de un PC portátil, no tenemos problemas para poner los 4 o 5 casi indispensables enlaces a las diferentes secciones. Pero cuando estamos accediendo a la Web desde un dispositivo móvil como un teléfono, esos cuatro o cinco enlaces pueden ocupar demasiado espacio en esa minúscula pantalla.

He visto muchos menús de navegación responsive que incorporan, además de CSS, javascript, jquery o incluso todos al mismo tiempo. Estos menús, si bien pueden resultar espectaculares y muy atractivos visualmente, para sitios Web que no sean de gran envergadura, pueden resultar muy complejos de modificar y adaptar a las necesidades concretas. Con esta idea en la cabeza, me puse manos a la obra para diseñar un menú sencillo, solo usa CSS, que fácilmente lo podemos implementar en nuestra Web.

Aunque lo lógico seria poner el código CSS en un archivo externo, con la idea de que sea fácilmente analizable y se contemple su simplicidad, todo está presentado en el mismo archivo.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="iso-8859-1" />
    <title>Menú responsive solo con CSS.</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no" />

<style>

body { 
    font-family:Arial, Verdana, Helvetica, sans-serif; 
    font-size: 1.2rem; 
    background-color: #FFCC66; 


header{
    margin: -1.6rem 0rem 0rem 0rem;
    padding: 0.2rem;
    box-sizing:border-box;
    border-radius: 0px 0px 15px 15px;
    background-color: rgba(255,69,0,0.6);
}

.elivi{
    list-style-type: none;    /* Elimina viñetas, sangrias, etc */
}

.fac{
    display: inline;     /* Comvierte lista vertical en fila */
    padding: 0rem 0.7rem 0rem 0.7rem;    /* Separa los elementos de la fila */
    line-height: 1.8rem;
}

nav{
    margin: 0rem 0rem 0rem 0rem;
}

        nav a{
            border-radius: 5px; padding: 2px 5px 5px 5px;  
            text-decoration: none; color: #000000;    /* No visitado */
            background: #FFFFFF;
        }
        nav a.visited{
            text-decoration: none; color: #696969;    /* Visitado */
        }
        nav a.active{
            text-decoration: none; color: #800000;    /* Ultimo visitado */
        }
        nav a:hover{
            text-decoration: none; color: #FFFFFF;    /* Color paso raton */
            background: #FF0000;
        }
        
#menuA {   
    position: absolute; 
    margin: 2.5rem 0.5rem 0.5rem -0.4rem; 
    float: left; 
    font-weight: 900;
    font-family:verdana,arial; /*tipo de letra*/  
    width: 23%; 
    min-width: 200px; 
    line-height: 20pt; /*separación entre lineas*/ 
    z-index: 4; 
}  
    
.showme{                 /* Capa emergente */ 
    position: absolute; 
    margin: -1rem 0rem 0rem 1rem;
    padding: 0.5rem 1.5rem 0.5rem 0.3rem; 
    width: 12rem; 
    background-color: #000; 
    display: none; 
    text-align: left; 
    line-height: 2.5rem;
    border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

.showhim:hover .showme{ 
    display: block; 
}

.menumov {
    position: absolute;
    text-align: center;
    margin: -3rem 0rem 0rem 0.5rem;
    padding: 0.3rem 1rem 0.3rem 1rem;
    text-decoration: none; 
    color: #FFF; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    background: #FF0000;
}

section {
    padding: 1rem;
    
}

footer{
    position: relative;
    float:left;
    bottom: 0; 
    text-align: center;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    padding: 1.4em 1em;
    width: 100%;
    height: 4em;
    background-color: rgba(255,69,0,0.6);
    box-sizing:border-box;
    border-radius: 15px 15px 0px 0px;
}
/* ---------------------------------------------------------- */
@media screen and (min-width: 1000px){
   
    #menuA{
        display:none;
    }

}

@media screen and (max-width: 1000px){
    
    #menuA{
    display:none;
    }

}

@media screen and (max-width: 750px){
    
    .elivi {
        display:none;
    }
    
    #menuA{
        display:block;
    }
    
}

@media screen and (max-width: 550px){
    
    #menuA{
        display:block;
    }
    
}

</style>

</head>

<body>
    <header>
        <h1>Mi página web responsive.</h1>
    <nav>

        <div id="menuA"> 
        <div href="#" class="showhim"><span class="menumov">MENÚ &#8803;</span> 
            <div class="showme"> 
                <li><a href="#" title="">Inicio</a></li> 
                <li><a href="#" title="">Fotos</a></li> 
                <li><a href="#" title="">Vídeos</a></li>
                <li><a href="#" title="">Contacto</a></li>
            </div> 
        </div> 
        </div> 
    
        <ul class="elivi">
            <li class="fac"><a href="#" title="">Inicio</a></li>
            <li class="fac"><a href="#" title="">Fotos</a></li>
            <li class="fac"><a href="#" title="">Vídeos</a></li>
            <li class="fac"><a href="#" title="">Contacto</a></li>
        </ul>
        
    </nav>
    
    </header>
    
    <section>
    
        <H1>Menú responsive solo con CSS.</H1>
        
        <P>Cuando el tamaño de la pantalla alcanza los 750 pixeles o menos, aparece un nuevo menú y desaparece el menú que 
        aparece en resoluciones mayores. Si estás en un PC, reduce la anchura de la ventana para ver el efecto.</P>
    
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, 
        nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris. Cras elit nisl, rhoncus nec iaculis ultricies, 
        feugiat eget sapien. Pellentesque ac felis tellus.</p>

        <p>Aenean sollicitudin imperdiet arcu, vitae dignissim est posuere id. Duis placerat justo eu nunc interdum 
        ultrices. Phasellus elit dolor, porttitor id consectetur sit amet, posuere id magna. Lorem ipsum dolor sit 
        amet, consectetur adipiscing elit.</p>

        <p>Suspendisse pharetra auctor pharetra. Nunc a sollicitudin est. Curabitur ullamcorper gravida felis, sit amet 
        scelerisque lorem iaculis sed. Donec vel neque in neque porta venenatis sed sit amet lectus. Fusce ornare 
        elit nisl, feugiat bibendum lorem. Vivamus pretium dictum sem vel laoreet. In fringilla pharetra purus, 
        semper vulputate ligula cursus in. Donec at nunc nec dui laoreet porta eu eu ipsum. Sed eget lacus sit 
        amet risus elementum dictum.</p>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, 
        nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris. Cras elit nisl, rhoncus nec iaculis ultricies, 
        feugiat eget sapien. Pellentesque ac felis tellus.</p>

        <p>Aenean sollicitudin imperdiet arcu, vitae dignissim est posuere id. Duis placerat justo eu nunc interdum 
        ultrices. Phasellus elit dolor, porttitor id consectetur sit amet, posuere id magna. Lorem ipsum dolor sit 
        amet, consectetur adipiscing elit.</p>

        <p>Suspendisse pharetra auctor pharetra. Nunc a sollicitudin est. Curabitur ullamcorper gravida felis, sit amet 
        scelerisque lorem iaculis sed. Donec vel neque in neque porta venenatis sed sit amet lectus. Fusce ornare 
        elit nisl, feugiat bibendum lorem. Vivamus pretium dictum sem vel laoreet. In fringilla pharetra purus, 
        semper vulputate ligula cursus in. Donec at nunc nec dui laoreet porta eu eu ipsum. Sed eget lacus sit 
        amet risus elementum dictum.</p>
        
    </section>

    <footer>
        Pie de pagina
    </footer>
    
</body>

</html>