Submenú flotante para subcategorias de tercer nivel en menu horizontal superior  

Página 1 / 2
 
Enrique
 Enrique
Reputable Member

Hola de nuevo, queria continuar con el tema al respecto a este pero se ha cerrado ya que me ayudasteis estupendamente, asi que necesitaria un ultimo retoque al respecto.

Continuando con el tema:
https://www.webempresa.com/foro/44-M%C3%B3dulos-PrestaShop/148271-Cambiar-comportamiento-del-menu-superior-horizontal-al-desplegarse-en-tema-por-defecto-prestashop.html

Necesitaría por favor que se puedan mostrar las subcategorias de tercer nivel en submenus flotantes manteniendo la misma estetica de los menus desplegables que la contienen, pero que aparezcan a la derecha de la opcion que los contiene y que se metan algo encima hacia la izquierda (os lo indico en el dibujo adjunto).

Estoy reubicando mis menus intentando obviar muchas categorias de niveles inferiores, pero son tantas que en ocasiones no puedo y meterlas junto conlas de segundo nivel no hace otra cosa que sacar menus muy largos y que se salen de la pantalla hacia abajo, por eso he decidido optar por esta opcion.

Por favor habria que indicar una fechita a la derecha de la opcion que contiene los submenus flotantes que vamos a hacer.

Sigo probando con firebug y consultando en paginas de css pero no doy con la tecla para colocarlo bien.

Muchas gracias como siempre y saludos.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 26/04/2016 9:38 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Enrique.
Deberás crear algunos submenús para ver lo que comentas y revisar que modificaciones podemos realizar para lo que buscas.

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 26/04/2016 9:51 am

Cursos Gratuitos WordPress

Enrique
 Enrique
Reputable Member

Añado un par de ellos en una tienda clon http://www.compuelectro.com/cloncompu/

Los indico en la imagen adjunta.

saludos.

ResponderCitar
Respondido : 27/04/2016 12:10 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

Primero realiza una copia de seguridad del fichero que se encuentra en la siguiente ruta: /cloncompu/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css en la linea 105 prueba a cambiar el siguiente código:

.sf-menu li li ul {
  display: block !important;
  margin: 27px 0 0 26px;
  opacity: 1 !important;
  padding: 38px 73px 33px 64px;
  position: absolute;
}

Si nuestra ayuda te ha sido útil, déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 27/04/2016 1:46 am

wpdoctor-revisa-la-salud-de-tu-wordpress

Enrique
 Enrique
Reputable Member

Gracias Johnny, pero salia trasparente el fondo y los textos con el mismo problema que el tema que solucionó Jhon en el mismo enlace al que me refiero en este tema.

Asi que creo que lo tengo a falta de algunos detalles tocando con el firebug sobre lo que me has mandado, y añadiendo la solucion final de Jhon en el mismo pero en el superfish-modified.css justo al final de donde me mandas en linea 105.

Solo quedarian dos cosas importantes y es que aparezca una especie de flecha o simbolo ">" a la derecha del elemento de menu que muestra éste submenú que tratamos para que el usuario sepa por donde pasar con el raton.

La otra, que llevo tiempo buscando y no veo, es como poder acelerar la velocidad con la que se muestran los diferentes menus desplegablesuna vez seleccionados. Actualmente es muy lento esto. (si quereis abro un tema para esto ya que no hay ninguno)

Os pego a continuacion lo que tengo en firebug y una imagen de como iria quedando a falta de lo ultimo que os pido.

Muchas gracias y saludos.

linea 76
.sf-menu li li li a {
color: black;
display: inline-block;
font-size: 14px;
font-weight: normal;
line-height: 16px;
padding-bottom: 10px;
position: relative;
width: auto;

linea 105
sf-menu li li ul {
background-attachment: scroll;
background-clip: border-box;
background-color: #fff;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
box-shadow: 0 0 0 transparent;
display: block !important;
margin-bottom: 10;
margin-left: 5px;
margin-right: 0;
margin-top: 27px;
opacity: 1 !important;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 15px;
padding-top: 15px;
position: absolute;
width: 100% !important;
}

ResponderCitar
Respondido : 27/04/2016 9:02 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Actualmente no veo que salga ningún submenú de tercer nivel en la ruta de la imagen enviada (lo he probado en firefox), indicanos en donde tienes elementos de tercer nivel.

Sin embargo evalua bien si es necesario tener esta complejidad en tu menú ya que es poco accesible, es decir, sería mejor dejarlo a dos niveles clasificando los grupos más importantes y luego mostrar las sucategorías (en caso de tenerlas como parte del contenido)

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 27/04/2016 10:56 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Enrique
 Enrique
Reputable Member

Si, creo que no me he expresado bien. Quizás, tenia que haber dicho "menu" de tercer nivel, no "submenu".

Al que me refiero es el que aparece en la imagen mostrando "tablets" e "imagen y sonido". He visto este en otras muchas webs para no sobrecargar una menu grande con todas las opciones desplegadas. No pretendo mostrar otro nivel mas ni mucho menos. Puedes contestarme tranquilamente sobre esto.

Por otro lado, y aunque adelanté que lo tenia resuelto, no es cierto, ya que cuando bajo a la opcion de abajo "all in one" el menu que incluye en vez de mostrarse a su nivel, se sique mostrando como si partiese siempre de la misma linea superior que el de la opcion anterior "pc sobremesa".

Puedes comprobarlo mirando a lo que me refiero en la web clon que estamos usando: http://www.compuelectro.com/cloncompu

No olvides por favor tambien las dos cuestiones que planteo justo antes de esta: la flecha que indica que hay un submenu (en las opciones donde exista) y como acelerarlo.

Como siempre muchas gracias y saludos.

ResponderCitar
Respondido : 28/04/2016 12:13 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

Sobre el menú flotante lo veo un poco complejo ya que puede afectar a los dispositivos móviles. Quizás una alternativa seria aumentar el tamaño de la letra para los menús superiores y letras mas pequeñas para los submenus y de esta forma poder distinguirlos?

Si nuestra ayuda te ha sido útil, déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 28/04/2016 1:59 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Enrique
 Enrique
Reputable Member

Ya lo tuve, pero decidí quitarlo por que se monstraban en los moviles dos menus practicamente iguales, éste adaptado y el modulo de bloque de catagorias. Al final dedidí mosttrar solo el de categorias y va muy bien y menos recargado. En cuanto a este solo se mostrara en escritorios.

saludos y gracias.

ResponderCitar
Respondido : 28/04/2016 10:35 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Enrique.
Podemos cerrar este tema?

Un saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 28/04/2016 10:56 am

Cursos Gratuitos WordPress

Enrique
 Enrique
Reputable Member

No por favor. He tenido que responder a las observaciones de tus compañeros, pero aun sigue pendiente. Si lees mas arriba aun espero respuesta a unas cosas. Copio y pego parte a continuacion de la respuesta #242424 y resalto en regrita:

Por otro lado, y aunque adelanté que lo tenia resuelto, no es cierto, ya que cuando bajo a la opcion de abajo "all in one" el menu que incluye en vez de mostrarse a su nivel, se sique mostrando como si partiese siempre de la misma linea superior que el de la opcion anterior "pc sobremesa".

Puedes comprobarlo mirando a lo que me refiero en la web clon que estamos usando: www.compuelectro.com/cloncompu

No olvides por favor tambien las dos cuestiones que planteo justo antes de esta: la flecha que indica que hay un submenu (en las opciones donde exista) y como acelerarlo.

Como siempre muchas gracias y saludos.

ResponderCitar
Respondido : 28/04/2016 12:12 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Para el tema del la altura del submenú prueba con el siguiente código CSS

.sf-menu > li > ul > li{
position:relative;
}

ul.sf-menu li li:hover ul, 
ul.sf-menu li li.sfHover ul{
left:182px!important;
}

Puedes agretar este código al final de tu archivo :
/cloncompu/themes/default-bootstrap/css/global.css

Realiza primero esto antes de evaluar poner flechas.
Ten en cuenta que en movil no se ve correctamente ya que no funciona el hover o evento de mouse sobre el item de menú.

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 28/04/2016 6:38 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Enrique
 Enrique
Reputable Member

Jhon, de nuevo funciona y se ajusta con esto que me mandas. He retocado un poco los margenes y/o padding y no queda mal del todo. Puedes mirarlo que tal queda en el mismo clon del enlace en el mismo menu.

Como ya dije en este tema mi intencion es no mostrar este menu superior en los moviles ya que aparecen dos duplicados (este que al ser responsive queda igual que el bloque de categorias) y el bloque de categorias que para mi es el ideal para moviles a no ser que tengas un tema de pago y bueno) por eso no lo muestro en moviles (igual en tablets posiblemente). De hecho debe tener las opciones muy grandes para que funcionen bien en moviles las cuales quedan demasiado grandes para un equipo de escritorio).

Haria falta por favor pues que me dijeras como poder hacer que aparezca una flecha o simbolo de flecha a la derecha por ejemplo de solo aquellas opciones que tengan este submenu colgando y a ser posible que sea un poco mas rápido de respuesta. fijate como sigue mostrandose aun quitando el mouse sobre el y de igual forma tarda un poco en aparecer al ponerlo encima.

saludos y gracias como siempre.

ResponderCitar
Respondido : 02/05/2016 4:46 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Para tener una flecha de los items que tienen submenus en tercer nivel , el tema se complica por que no es posible hacerlo por CSS y tendrías que realizarlo a través de javascript.

Puedes revisar algunas discusiones de esto al respecto. :
http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector

Son temas de programación un poco más avanzados que implican cambiar el comportamiento de tu menú actual.

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 02/05/2016 6:42 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Enrique
 Enrique
Reputable Member

Bueno, y para acelerarlo?

He estado mirando con Transition y el firebug, pero no se por donde cogerlo. Si no es muy dificil añadiendo o quitando algo podrias indicarme?

Muchas gracias y saludos

ResponderCitar
Respondido : 02/05/2016 7:31 pm
Página 1 / 2

Por favor Iniciar Sesión o Registro