• Compra una licencia de Windows 10/11 (10€) u Office (18€) al mejor precio u Office al mejor precio. Entra en este post con las ofertas
  • ¡Bienvenid@! Recuerda que para comentar en el foro de El Chapuzas Informático necesitas registrar tu cuenta, tardarás menos de 2 minutos y te dará valiosa información además de ayudarte en lo que necesites o pasar un rato agradable con nosotros.

AYUDA Ayuda reponsive

D

Dudasinformaticas

De profesión Chapuzas
Registrado
26 Mar 2015
Mensajes
182
Puntos
0
Buenas de nueva, tengo un menú desplegable, el caso es que en la versión móvil los menús que tienen subsecciones desplegables no me aparecen, es decir son como superpuestas por el desplegable.
Me explico tengo por ejemplo: Menú 1 (sin subsecciones) Menú 2 (con subsecciones) Subsección menú 2

Pues bien, "Menú 1" me aparece, mientras que "Menú 2" no aparece porque en su lugar aparece directamente "Subsección menú 2"

Debe de ser algo del reponsive imagino.
¿Alguien que pueda ayudarme?
gracias
 
Mírate la pagina que te he pasado y busca por internet, hay miles de ejemplos de submenus.

Piensa que el menú tiene que estar fijo y el submenu tiene que aparecer y desaparecer, para que desaparezca tiene que estar con la css "display:none", tienes que hacer que cuando pulsen la pesatña del menu que quieras pase a "display: block"

Si tienes alguna duda mete el codigo en la pagina que te di y lo miro.
https://codeshare.io/
 
arck dijo:
Mírate la pagina que te he pasado y busca por internet, hay miles de ejemplos de submenus.

Piensa que el menú tiene que estar fijo y el submenu tiene que aparecer y desaparecer, para que desaparezca tiene que estar con la css "display:none", tienes que hacer que cuando pulsen la pesatña del menu que quieras pase a "display: block"

Si tienes alguna duda mete el codigo en la pagina que te di y lo miro.
https://codeshare.io/
Hacer clic para expandir...

Lo raro es que en ordenador se ve perfecto pero al visualizarlo desde dispositivo móvil se ve mal, es lo que me tiene mosca

Pongo por aquí esa parte del CSS:

#access {
float: left;
position: relative;
margin: 0px 0px 0px 0px;
}
#access li {
float: left;
position: relative;
margin: 0 0 0 20px;
}
#access a {
color: #4E525F;
display: block;
float: left;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
padding: 25px 5px 0px 5px;
height: 41px;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
} keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#access a:hover,
#access ul li.current-menu-item a,
#access ul li.current_page_ancestor a,
#access ul li.current-menu-ancestor a,
#access ul li.current_page_item a,
#access ul li:hover > a {
background: #4E525F;
color: #FFF;
float: center;

}

/* Dropdown */
#access ul li ul,
#access ul li:hover ul ul,
#access ul ul li:hover ul ul,
#access ul ul ul li:hover ul ul,
#access ul ul ul ul li:hover ul ul {
display: none;
z-index: 9999;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}

#access ul li:hover ul,
#access ul ul li:hover ul,
#access ul ul ul li:hover ul,
#access ul ul ul ul li:hover ul,
#access ul ul ul ul ul li:hover ul {
display: block;
}

#access ul li ul {
position: absolute;
background-color: #4E525F;
top: 100px;
left: 0;
width: 100%;
-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}
#access ul li ul li {
float: none;
margin: 0;
}

#access ul li ul li a,
#access ul li.current-menu-item ul li a,
#access ul li ul li.current-menu-item a,
#access ul li.current_page_ancestor ul li a,
#access ul li.current-menu-ancestor ul li a,
#access ul li.current_page_item ul li a {
float: none;
line-height: 20px;
font-size: 13px;
font-weight: normal;
height: 100%;
padding: 6px 10px;
color: #FFF;
text-transform: capitalize;
}

#access ul li ul li a:hover,
#access ul li ul li:hover > a,
#access ul li.current-menu-item ul li a:hover {
background-color: #FFF;
color: #555;
border: 1px solid #555;
}

#access ul li ul li ul {
left: 190px;
top: 0;
border: 0 none;
-webkit-box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);

}
 
Última edición:
es raro, yo esta semana hice uno parecido para movil y pc y funcionaba genial.
 
A ver si alguien puede saber a qué es debido, no veo nada raro en principio.
Gracias
 
pasa el código y te podre ayudar.
 
arck dijo:
pasa el código y te podre ayudar.
Hacer clic para expandir...
He posteado el CSS de ese menú:
#access {
float: left;
position: relative;
margin: 0px 0px 0px 0px;
}
#access li {
float: left;
position: relative;
margin: 0 0 0 20px;
}
#access a {
color: #4E525F ;
display: block;
float: left;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
padding: 25px 5px 0px 5px;
height: 41px;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
} keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#access a:hover,
#access ul li.current-menu-item a,
#access ul li.current_page_ancestor a,
#access ul li.current-menu-ancestor a,
#access ul li.current_page_item a,
#access ul li:hover > a {
background: #4E525F ;
color: #FFF ;
float: center;

}

/* Dropdown */
#access ul li ul,
#access ul li:hover ul ul,
#access ul ul li:hover ul ul,
#access ul ul ul li:hover ul ul,
#access ul ul ul ul li:hover ul ul {
display: none;
z-index: 9999;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}

#access ul li:hover ul,
#access ul ul li:hover ul,
#access ul ul ul li:hover ul,
#access ul ul ul ul li:hover ul,
#access ul ul ul ul ul li:hover ul {
display: block;
}

#access ul li ul {
position: absolute;
background-color: #4E525F ;
top: 100px;
left: 0;
width: 100%;
-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}
#access ul li ul li {
float: none;
margin: 0;
}

#access ul li ul li a,
#access ul li.current-menu-item ul li a,
#access ul li ul li.current-menu-item a,
#access ul li.current_page_ancestor ul li a,
#access ul li.current-menu-ancestor ul li a,
#access ul li.current_page_item ul li a {
float: none;
line-height: 20px;
font-size: 13px;
font-weight: normal;
height: 100%;
padding: 6px 10px;
color: #FFF ;
text-transform: capitalize;
}

#access ul li ul li a:hover,
#access ul li ul li:hover > a,
#access ul li.current-menu-item ul li a:hover {
background-color: #FFF ;
color: #555 ;
border: 1px solid #555 ;
}

#access ul li ul li ul {
left: 190px;
top: 0;
border: 0 none;
-webkit-box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);

}
 
arck please, gracias.
 
Como te indique en el anterior post solo la css no ve vale
tienes que poner la css y el .html solo del menu.

Si me contestas, mañana por la tarde - noche te puedo enviar una menú con imagen y que funciona en el movil.
 
arck dijo:
Como te indique en el anterior post solo la css no ve vale
tienes que poner la css y el .html solo del menu.

Si me contestas, mañana por la tarde - noche te puedo enviar una menú con imagen y que funciona en el movil.
Hacer clic para expandir...

El problema es que es wordpress, con lo cual no tengo acceso al html.
 
Sí tienes acceso al HTML, mira el fichero header.php de tu plantilla, o busca dónde está generando el menú.

No sé si lo comenté antes, pero busca wp_bootstrap_navwalker en Google, para menús responsive con Bootstrap en WordPress (implantarlo puede requerir programar o retocar código).
 
Hay que estar conectado o registrado para responder aquí.
Arriba