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

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

Saludos.

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

Los indico en la imagen adjunta.

saludos.

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;
}

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;
}

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, 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.

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?

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.

Hola Enrique.
Podemos cerrar este tema?

Un saludo

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.

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.

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.

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.

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