Jump to content

Problema con Top Menu


Actionchip

Recommended Posts

Buenas:

 

Estoy usando el modulo blocktopmenu que trae por defecto el Prestashop 1.5.3. Quisiera poder tener todo el rato seleccionado una categoria como muestro en la imagen. Pero no doy con el codigo para poder meter un class="selected" a esa categoria del menu horizontal superior (creo que es esto lo que tengo que hacer, pero no estoy seguro...). Dejo la imagen de como quiero que quede a ver si alguien me puede echar un cable.

 

Gracias y un saludo, Adrian

 

Esta es la imagen:

post-452621-0-53344100-1358103655_thumb.png

Edited by Actionchip (see edit history)
Link to comment
Share on other sites

Es mucho más simple que lo del class selected.... y te lo dogo yo que me estuve pegando con esto bastante tiempo porque me empeñé en hacerlo como tu.

 

1.- En la configuración del módulo blocktopmenu lo primero que ves son dos cajas con opciones que se pueden añadir o eliminar. La caja de la derecha tiene todas las opciones que te aparecen en el menú. Bórralas todas (las marcas y pinchas el botón eliminar.) cuando lo hayas hecho pincha en el botón guardar.

 

2.- Ahora vamos a crear el nuevo menú.

Justo debajo del bloque de las cajas, tienes otro bloque para añadir un enlace del menú principal.

Rellena el nombre que quieres que se muestre en el menú (campo etiqueta). Por ejemplo: Inicio

Rellena la URL a donde va a redirigir (por ejemplo la página inicio de tu tienda. en mi caso: http://www.elitecocina.com

Pincha en el botón "Añadir" y se añadirá en el cuadro superior izquierdo (en el bloque de arriba) debajo de la etiqueta "Menú de enlaces superiores". Marcalo y pincha en "añadir" para que lo mueva a la derecha.

 

Ya tienes tu primera opción del menú que te llevará siempre a tu página de inicio.

 

Para el resto, tienes que hacer lo mismo. En este caso, para saber a qué URL tienes que redirigir, lo mejor es que abras el frontoffice de tu tienda como si fueras un cliente normal, navegues hasta la categoría en cuestión y copies la URL que te aparece en el navegador... y se la pegas en el campo "enlace" de la configuración del menú.

 

Espero que te sirva.

Link to comment
Share on other sites

Es mucho más simple que lo del class selected.... y te lo dogo yo que me estuve pegando con esto bastante tiempo porque me empeñé en hacerlo como tu.

 

1.- En la configuración del módulo blocktopmenu lo primero que ves son dos cajas con opciones que se pueden añadir o eliminar. La caja de la derecha tiene todas las opciones que te aparecen en el menú. Bórralas todas (las marcas y pinchas el botón eliminar.) cuando lo hayas hecho pincha en el botón guardar.

 

2.- Ahora vamos a crear el nuevo menú.

Justo debajo del bloque de las cajas, tienes otro bloque para añadir un enlace del menú principal.

Rellena el nombre que quieres que se muestre en el menú (campo etiqueta). Por ejemplo: Inicio

Rellena la URL a donde va a redirigir (por ejemplo la página inicio de tu tienda. en mi caso: http://www.elitecocina.com

Pincha en el botón "Añadir" y se añadirá en el cuadro superior izquierdo (en el bloque de arriba) debajo de la etiqueta "Menú de enlaces superiores". Marcalo y pincha en "añadir" para que lo mueva a la derecha.

 

Ya tienes tu primera opción del menú que te llevará siempre a tu página de inicio.

 

Para el resto, tienes que hacer lo mismo. En este caso, para saber a qué URL tienes que redirigir, lo mejor es que abras el frontoffice de tu tienda como si fueras un cliente normal, navegues hasta la categoría en cuestión y copies la URL que te aparece en el navegador... y se la pegas en el campo "enlace" de la configuración del menú.

 

Espero que te sirva.

Gracias por responder pero creo que me he explicado mal, lo que me comentas no es lo que pretendo hacer. Si te fijas en la imagen que he incluido en el primer mensaje el botón de inicio se queda como gris. Lo que quiero es meterle un Class="selected" para que se quede asi, en gris todo el rato sin tener que pasar el mouse por encima (como ahora) para que se vea asi. Pero no se como meterlo ni en donde, creo que sera con php pero en esto estoy muy pez....

 

Gracias y un saludo, Adrián

 

H9b6u.png

Edited by Actionchip (see edit history)
Link to comment
Share on other sites

La primera screen es como esta siempre:

 

zM0DJ.png

 

Y la imagen de abajo es como quiero que quede, el boton inicio en gris todo el rato. Esto lo ves asi en gris porque tengo el raton encima, cuando pasas el raton por los menus de tu tienda estos cambian de color no? Pues yo quiero que uno de los botones se quede cambiado siempre de color sin tener que pasarle el raton por encima. Esto creo que se hace asi (este es el codigo que seria en html y que no se donde hay que poner, y lo que creo es que hay que ponerlo en php...):

 

<ul class="semiopaquemenu">
<li><a href="http://localhost/prestashop/" class="selected">Inicio</a></li>
<li><a href="http://localhost/prestashop/3-frutas/">Frutas</a></li>
<li><a href="http://localhost/prestashop/4-verdura/">Verduras</a></li>
<li><a href="http://localhost/prestashop/7-vinos/">Vinos</a></li>
<li><a href="http://localhost/prestashop/6-conservas/">Conservas</a></li>
<li><a href="http://localhost/prestashop/8-dulces/">Dulces</a></li>
<li><a href="http://localhost/prestashop/5-charcuteria/">Charcuteria</a></li>
</ul>

 

y en el css se pondria esto:

 

ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{
color: black;
background: -moz-linear-gradient(top,  rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%); /* fade from white (0.82 opacty) to 0.16 opacity */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959; /* CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 12px; /* large padding to get menu item to protrude upwards */
padding-bottom: 20px; /* large padding to get menu item to protrude downwards */
}

 

Y se quedaria asi (Fijaros en el boton INICIO del menu horizontal superior):

 

1CP4q.png

Edited by Actionchip (see edit history)
Link to comment
Share on other sites

Hola statictic, eso es lo que pretendo hacer. Editar el codigo del modulo para incluir el class="selected" al boton "INICIO" pero no sé como....por eso cree este hilo. Bueno, ahora creo que ha quedado algo mas claro porque por lo menos una persona lo ha entendido XD, no tengo ni idea de como se llaman muchas cosas de ahi viene todo este lio que no se me entienda, pero bueno poco a poco.

 

Un saludo y gracias, Adrián

Edited by Actionchip (see edit history)
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
×
×
  • Create New...