Menu desplegable posicionado

[jpalbox]

Estoy realizando un menu con el tema por defecto de prestashop, lo que quiero conseguir que no se si es posible es algo como lo que adjunto en una imagen. El menu desplegable se muestre justo debajo de la categoria a la que pertenece, no en el margen izquierdo.( Puedes ver como lo tengo en la actualidad en www.sumicarn.com). Llevo muy poco tiempo  con prestashop, me parece que tiene grandes posibilidades pero complicado. A  ver si

[Luis C]

#_desktop_top_menu > ul[data-depth="0"] > li {position:relative;}

Añade eso a tu custom.css en el template de prestashop 1.7 o global.css en prestashop 1.6. Eso hará que el submenú  (posicionado en absoluto) tome como referencia el posicionamiento del parent. Luego añade código CSS al child para maquetar el ancho. P.E.

------------------

Add that line of code to your custom.css in your current template on PS 1.7, or global.css on PS 1.6. That will make your sub-menu (absolute positioned) take its parent's position as reference. Then just style your child to match your layout.

#_desktop_top_menu .top-menu[data-depth="0"] li .sub-menu {width:300px}

 

 

Please, since this is the intl. forum, it'd be appreciated if you'd compose your post in english

 

 

Edited June 16, 2020 by Luis C (see edit history)

[jpalbox]

muchas gracias se posiciona correctamente. No me aparece la imagen de la categoria pero creo que es porque el tema classic que trae prestasoh por defecto no lo permite.

[Luis C]

2 minutes ago, jpalbox said:

muchas gracias se posiciona correctamente. No me aparece la imagen de la categoria pero creo que es porque el tema classic que trae prestasoh por defecto no lo permite.

Es posible mostrar la imagen de la categoría padre, solo tienes que modificar el archivo template correspondiente. En este caso, si no me equivoco, debería estar en /themes/classic/modules/ps_mainmenu/.

-----------------

It is possible to show parent category image, you just need to modify the template file. In this case, if I'm not mistaken, it should be under /themes/classic/moduleS/ps_mainmenu/

 

Localiza la línea donde el módulo genera los submenús. La función {menu}:

--------------

Locate the line where the module generates subcategory menus. The {menu} function:

{menu nodes=$node.children depth=$node.depth parent=$node}

Antes, o después de esa línea añade el siguiente código:

----------

Right before (or after) that line add the following code:

{$node.image_urls|count}
{foreach from=$node.image_urls item=image_url}
<img src="{$image_url}" class="parent_image">
{/foreach}
{/if}

 

El código itera el array $node.image_urls e imprime un <img> por cada imagen. Ahora sólamente tendrás que aplicar CSS a la clase .parent_image que se acaba de declarar. Con el CSS maquetarás la posición y apariencia de la imagen dentro del div contendor del submenú.

--------------------------------

The code iterates through $node.image_urls and prints an <img> for each image. Now you'll just have to apply CSS to the cass we just declared (.parent_image). 

[jpalbox]

a ver si entiendo seria añadir esto en el custom.css???

#_desktop_top_menu .top-menu[data-depth="0"] li .sub-menu {width:300px}.parent_image{width:100px;float: right}

Gracias

[Luis C]

Bueno, eso depende de como quieras maquetar la imagen. Si la pones en posicionamiento absoluto puedes situarla donde quieras. Con un right:0 y bottom:0 la pondrías en la esquina inferior derecha del contenedor, y puedes hacer que la lista (ul) tenga un ancho concreto para que no se solape.

[jpalbox]

y para cabiar esa imagen cada vez que se pasa por encima del enlace habria que poner esta linea en un evento ?

#_desktop_top_menu .top-menu[data-depth="0"] li .sub-menu {width:300px}.parent_image{width:100px; right:0; bottom:0;}

[jpalbox]

Ahora sale otro problema, el menu cuando no esta maximizado el explorador sino a media pantalla, el menu se convierte  en dos simbolos raros al izquierda del logotipo, tengo habilitada la compatibilidad con moviles en el modulo, sabeis que puede ser?

 

Gracias

[Luis C]

Hola. Vale, por partes: 

Lo de las imágenes. Yo te he puesto código para sacar únicamente la imagen de la categoría raiz (es decir, la del menú superior) Si quieres que sea de otra manera, el código sería diferente. Tienes que buscar la imagen desde el código que forma el elemento LIST.

{if $depth == 1}{* IN NON TOP LEVEL CATEGORIES SHOW CATEGORY IMAGE *}
	{assign var=mainmenuCatId value="-"|explode:$node.page_identifier}{assign var=imagenname value="`$mainmenuCatId[1]`.jpg"}
	{assign var=imagencat value="{$smarty.const._PS_CAT_IMG_DIR_}{$imagenname}"}
	{if $imagencat|file_exists}
		<img border="0" class="imagen_categoria" src="{$urls.img_cat_url}{$mainmenuCatId[1]}.jpg">
	{/if}
{/if}

Inserta ese código justo después de donde se cierra el enlace. (Localiza este código alrededor de la línea 30 e inserta el nuevo después)

                {$node.label}
                </a>

 

Solo falta estilar la imagen. Por defecto la situaremos de forma absoluta en el UL, y la ocultaremos. Después la mostraremos en un hover/focus. (Hazlo en custom.css)

.imagen_categoria {
	display:none;
	position:absolute;
	right:5px;
	top:50%;
	transform:translateY(-50%);-webkit-transform:translateY(-50%);
}
#_desktop_top_menu .top-menu[data-depth="1"] li a:hover + .img_categoria {
	display:block;
}

En cuanto al menú cambiando en la visualización móvil es normal, la visualización móvil MUEVE físicamente el menú a otro contenedor (#_mobile_top_menu) y por lo tanto nada de lo que hemos hecho en CSS aplica aquí. Te recomiendo que cualquier cosa que modifiques en el css con respecto a todos estos efectos, lo realices únicamente dentro de un media query 

@media (max-width:767px) {
.imagen_categoria {display:none}
}
@media (min-width:768px) {
	Tu código para maquetar las imágenes
}

 

Edited June 19, 2020 by Luis C (see edit history)