Dostosowanie menu

[grzcyg]

Witam.
Jestem nowy w świecie Prestashop i szybko mam rzucone kłody pod nogi.

Moim zadaniem jest uzyskać efekt jak niżej:

tj. ikona po lewej od tekstu, 2 i więcej wyrazowe zakładki mają się składać po pierwszym wyrazie, gradient jak wyżej.

Proszę o pomoc.

[() Maciej ()]

Obrazki uzyskasz poprzez zastosowanie zewnętrznej czcionki z obrazkami.

Składanie wyrazu po 1 słowie.. hmm.. jedyne co mi przychodzi do głowy to formatowanie w kodzie HTMLa tagu <br>

Gradienty to nic innego jak jeden kolor dla całego przycisku. Do zrobienia w CSS poprzez utworzenie dodatkowych formatowań kolejnych przycisków, albo kodem JS, który będzie dawał kolejno jaśniejsze wersje bazowego koloru.

[vekia]

każdy z elementów menu musi mieć swoje unikalne id / klasę aby coś takiego utworzyć

jeżeli korzystasz ze standardowego blocktopmenu - niestety, tak nie jest i wymaga top rzerobienia głównego pliku modułu .php

przykład podany jest tutaj: https://www.prestashop.com/forums/topic/266048-blocktopmenu-dodatkowe-linki-po-prawej-stronie/

następnie za pomocą css możemy zdefiniować ikonę jaka będize się wyświetlać dla tych elementów za pomocą ::before

[grzcyg]

Dzięki za odpowiedź. Niestety po wklejeniu kodu z posta, którym zalinkowałeś nie dodają mi się te ID do pozycji z menu.

 

Linki do menu dodaję w ten sposób:

Edited August 12, 2016 by grzcyg (see edit history)

[grzcyg]

Dodałem unikalną klasę do każdego elementu z menu za pomocą JS.

Z podzieleniem wyrazów poradziłem sobie w ten sposób:

$(document).ready(function(){
$('#block_top_menu a').each(function(){
  var node = $(this).contents().filter(function () { return this.nodeType == 3 }).first(),
        text = node.text(),
        first = text.slice(0, text.indexOf(" "));
    
    if (!node.length)
        return;
    
    node[0].nodeValue = text.slice(first.length);
    node.before(first + '<br/>');
});
});

Edited August 13, 2016 by grzcyg (see edit history)