elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía rápida para descarga de herramientas gratuitas de seguridad y desinfección


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Como puedo hacer que mi menu sea responsivo correctamente
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Como puedo hacer que mi menu sea responsivo correctamente  (Leído 2,240 veces)
belen89

Desconectado Desconectado

Mensajes: 1


Ver Perfil
Como puedo hacer que mi menu sea responsivo correctamente
« en: 15 Diciembre 2018, 20:43 pm »

Como puedo hacer para que mi menu sea responsivo correctamente porque cuando se visualiza en el celular se ve mal,


« Última modificación: 17 Diciembre 2018, 04:07 am por belen89 » En línea

loml666

Desconectado Desconectado

Mensajes: 24


Ver Perfil
Re: Como puedo hacer que mi menu sea responsivo correctamente
« Respuesta #1 en: 21 Diciembre 2018, 16:20 pm »

Usando un css framework como w3css se arregla facil. ::)


En línea

rub'n


Desconectado Desconectado

Mensajes: 1.217


(e -> λ("live now")); tatuar -> λ("α");


Ver Perfil WWW
Re: Como puedo hacer que mi menu sea responsivo correctamente
« Respuesta #2 en: 21 Diciembre 2018, 16:42 pm »

Aprende a usar flexbox, y adaptala al @media para ajustar el ancho

https://codepen.io/estelle/pen/brDpB
En línea

rubn0x52.com KNOWLEDGE  SHOULD BE FREE.
If you don't have time to read, you don't have the time (or the tools) to write, Simple as that. Stephen king
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: Como puedo hacer que mi menu sea responsivo correctamente
« Respuesta #3 en: 5 Enero 2019, 02:30 am »

Aprende a usar los @media, usa bootstrap 4 (opcional), y trabaja con porcentajes y no pixeles para hacerlo responsive.
En línea

febef

Desconectado Desconectado

Mensajes: 28


Ver Perfil
Re: Como puedo hacer que mi menu sea responsivo correctamente
« Respuesta #4 en: 8 Enero 2019, 18:53 pm »

Claro

Usando media Queris, fexbox y Girds podes hacer magia mira un poco la docu y listo hay miles de ejemplos  ;D
En línea

chatiel

Desconectado Desconectado

Mensajes: 19


Ver Perfil
Re: Como puedo hacer que mi menu sea responsivo correctamente
« Respuesta #5 en: 12 Enero 2019, 07:12 am »

Hola belen89

No es perfecto, pero para comenzar está perfecto.
La otra opción es boostrap pero ahí te fallo por ser muy novato.
Código:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>by chatiel</title>

<script type='text/javascript' src='whatsapp-contact.js'></script>

<style>
/* Clearfix */
.clear:before, .clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

.clear {
    *zoom: 1;
}

a#pull {
    display: none;
}
nav {
    height: 40px;
    width: 100%;
    background: #666;
    position: relative;
    border-bottom: solid 1px #DDD;
}

nav ul {
    padding: 0;
    margin: 0 auto;
    width: 600px;
    height: 40px;
}

nav li {
    display: inline;
    float: left;
}

nav a {
    color: #FFF;
    display: inline-block;
    width: 100px;
    text-align: center;
    line-height: 40px;
}

nav li a {
    border-right: 1px solid #576979;
text-decoration:none;
}

nav li:last-child a {
    border-right: 0;
}

nav a:hover, nav a:active {
    background-color: #333;
}
@media only screen and (max-width : 500px) {
    nav {
        border-bottom: 0;
        height: auto;
    }

    nav ul {
        display: none;
        height: auto;
        width: 100%;
    }

    nav li {
        width: 50%;
        float: left;
        position: relative;
    }

    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }

    nav a#pull {
        display: block;
        background-color: #666;
        width: 100%;
        position: relative;
    }

    nav a#pull:after {
        content:"";
        background: url('nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}
#panel {
  display: none;
}
.submenu{
width:100px;
height:150px;
background-color:#000;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function() {
    var pull = $('#pull');
    menu = $('nav ul');
    menuHeight = menu.height();

    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });
});

$(window).resize(function(){
    var w = $(window).width();
    if(w > 320 && menu.is(':hidden')) {
        menu.removeAttr('style');
    }
});
</script>
</head>

<body>
<script>
function Mostrar() {
  document.getElementById("panel").style.display = "block";
}
</script>
<script>
function Ocultar() {
  document.getElementById("panel").style.display = "none";
}
</script>
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="#">Descargar</a></li>
        <li><a href="#">Códigos</a></li>
        <li><a href="/shop/">SHOP</a></li>
        <li><a href="#" onmouseover="Mostrar()">Mi Cuenta</a>
<ul id="panel" class="submenu" onmouseout="Ocultar()">
<li><a href="#" onmouseover="Mostrar()">Editar datos</a></li>
<li><a href="#" onmouseover="Mostrar()">Editar datos</a></li>
<li><a href="#" onmouseover="Mostrar()">Editar datos</a></li>
</ul>
</li>
<br clear="all" />
    </ul>
    <a id="pull" href="#">Menu</a>
</nav>


</body>
</html>

con un poco de CCS3 quedará genial.

Espero que te sirva.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
No puedo hacer que funcione correctamente
Java
John Locke 5 4,402 Último mensaje 25 Abril 2011, 02:32 am
por 1mpuls0
¿Cómo puedo hacer este menú: CSS, javascript...? « 1 2 »
Desarrollo Web
Linton 10 4,955 Último mensaje 9 Diciembre 2013, 13:36 pm
por alan++
Cómo hacer un backup correctamente de una BD mysql
Bases de Datos
ccrunch 0 2,328 Último mensaje 5 Diciembre 2014, 14:39 pm
por ccrunch
no se como hacer una función correctamente con arreglos
Programación C/C++
condor7000 5 2,974 Último mensaje 6 Diciembre 2016, 23:45 pm
por jvm1994
Como hacer un Spoofing correctamente?
Análisis y Diseño de Malware
Trollwer 1 5,565 Último mensaje 29 Julio 2017, 20:34 pm
por Flamer
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines