Back to top

Autore Topic: [RISOLTO]Come si fa a creare un pulsante rollover estendibile per menu  (Letto 10071 volte)

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Come si fa a creare un pulsante rollover estendibile per menu in ambiente joomla?
Lo so che alcuni mi diranno: usa il modulo imagemenu per creare pulsanti rollover.
Ma questa soluzione non mi è possibile, nè è adatta al mio scopo, in quanto in futuro il cliente potrebbe cambiare le voci del menu e quindi dovrebbe rifare le immagini per il relativo rollover. A meno che.... non esiste un'estensione che permetta questo.

Allora vorrei usare la soluzione per la quale opterei se non stessi lavorando in joomla e cioè questa:

usare 3 immagini di sfondo, perchè il pulsante prenda in questo modo la larghezza del suo contenuto testuale.

Ovvero:
    un’immagine per creare la parte sinistra (em)
    un’immagine per creare lo sfondo che si ripete (span)
    un’immagine per creare la parte destra (b)

il codice diventerebbe questo se stessi lavorando solo con i css e l'html:
Codice: [Seleziona]
<a href="#......">
<em></em>
<span>la mia voce menu</span>
<b></b>
</a>

e il mio css sarebbe:

Codice: [Seleziona]
a em{
display: block;
float: left;
background: url(em_bg.jpg) no-repeat;
width: 25px;
height: 35px;
}

a span{
display: block;
float: left;
background: url(span_bg.jpg) repeat-x;
height: 35px;
}

a b{
display: block;
float: left;
background: url(b_bg.jpg) no-repeat;
width: 25px;
height: 35px;
}

E' proprio impossibile da realizzare con joomla?

Sono disposta, ovviamente, anche ad altre soluzioni purchè il risultato sia lo stesso. Anche ad usare estensioni (tranne imagemenu che non mi darebbe il risultato sperato)

Grazie



Siccome il post è stato risolto blillantemente da kuvier, voglio ringraziarlo di cuore e invitarvi tutti ad unirvi ai miei ringraziamenti per una modifica così geniale e che tornerà utile a tanti di voi.
Grazie di cuore kuvier!
« Ultima modifica: 10 Mag 2011, 17:59:42 da Nuvola6 »

Offline kuvier00

  • Appassionato
  • ***
  • Post: 440
    • Mostra profilo
Puoi provare usando un normale modulo di menu, per esempio Superfish Dropdown Menu, e poi personalizzare la visualizzazione come vuoi.
Di base quel modulo crea menu del tipo:

Codice: [Seleziona]
<li>
    <a href=""....>
        <span>Voce di menu</span>
    </a>
</li>

Quindi potresti fare un override dell'html generato inserendo i tag mancanti e poi gestendoli da css come hai scritto. Oppure se conosci bene javascript puoi lasciare l'html così com'è e fare tutto da javascript, ma la prima soluzione è sicuramente più semplice

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Wow. magari riuscissi col modulo. Ora provo subito e ti faccio sapere.
Grazie!

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Ciao Kuvier. Sto modificando il modulo superfish menu facendolo sovrascivere dal mio file template.css.
Però con quale file del modulo posso fare l'override? Non trovo la struttura che indicavi tu nel codice...

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Ciao Tonicopi. L'avevo scritto come seconda riga del post che qualcuno avrebbe consigliato imagemenu. Con tutta la stima che ho per questo modulo, più volte usato e più volte apprezzato, devo dire che non si adatta al mio scopo.
Almeno, è quanto ho verificato. Poi posso pure sbagliarmi.
Imagemenu mi fa creare un'immagine per la voce del menu ed una per il suo rollover. Questo vuol dire che il cliente non potrà decidere di cambiare il nome di una voce di menu senza venire a bussare alla mia porta (non sarebbe capace di prepararsi le immagini e sostituirle).
Quindi non posso usarlo. Questo è quanto so.
O mi inviti ad usarlo anche tu come kuvier? cioè per fargli l'override?

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Ma con il metodo che stai usando tu il cliente riuscirebbe a cambiarsi le immagini?


Altra soluzione potrebbe essere quella di usare un normale modulo html personalizzato dove si  potrebbe inserire uno pseudo menu...  ;D
 :)
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Con il metodo che sto usando io, tonicopi, il cliente deve solo modificare la voce dal pannello di joomla nella gestione menu. Perchè le immagini che uso sono fisse 8una per la parte destra, una per la parte centrale che si ripete a seconda della lunghezza del testo, e una per la parte sinistra).

La soluzione del modulo html per inserire uno pseudo menu mi sembra una genialata per aggirare l'ostacolo. Mi sa che....... sarà quella che adotto.
Se poi kuvier, ha un po' di tempo per spiegarmi meglio la sua soluzione, tento prima quella strada.

Grazie Toni. Le trovi tutte tu :-)

Offline kuvier00

  • Appassionato
  • ***
  • Post: 440
    • Mostra profilo
Ciao nuvola, purtroppo non mi ricordo il file da modificare e non sono sul mio pc, sono fuori per il week-end, se puoi aspettare do un'occhiata lunedì.

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Te ne sarei molto grata, kuvier. Ti aspetto. Buon weekend

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Ciao Kuvier. Ci sei? Che dici? Adotto lo stratagemma per aggirare il problema o seguo la tua strada?

Offline maegras

  • Esploratore
  • **
  • Post: 114
  • Sesso: Maschio
    • Mostra profilo
Non ne so molto di php, anzi, quasi niente :)

Tuttavia puoi creare un override del mod_mainmenu di default come spiegato qui.
E' un argomento che interessa anche me :)

Offline kuvier00

  • Appassionato
  • ***
  • Post: 440
    • Mostra profilo
Non ne so molto di php, anzi, quasi niente :)

Tuttavia puoi creare un override del mod_mainmenu di default come spiegato qui.
E' un argomento che interessa anche me :)

Era proprio da quel link che ero partito per la personalizzazione di superfish menu :)
I primi passi sono gli stessi, bisogna creare una cartella mod_superfishmenu in "nostro_template/html" in modo da fare l'override del modulo, dentro tale cartella va messo il file default.php così modificato:

Codice: [Seleziona]
// no direct access
defined('_JEXEC') or die('Restricted access');


if ( ! defined('modSuperfishMenuXMLCallbackDefined') )
{

function modPatch($result,$tag) {
/** Metti dentro l'if il codice di sotto se vuoi abilitare questa visualizzazione
    solo per un tipo di menu
if($tag == "topmenu") {
}
***/

//Prima dello span
$top = '<em></em><span>';

// Dopo lo span
$bottom = '</span><b></b>';

// Sostituisco il testo
$result = str_replace("<span>", $top, $result);
$result = str_replace("</span>", $bottom, $result);

return $result;
}



function modSuperfishMenuXMLCallback(&$node, $args)
{
$user = &JFactory::getUser();
$menu = &JSite::getMenu();
$active = $menu->getActive();
$path = isset($active) ? array_reverse($active->tree) : null;

if (($args['end']) && ($node->attributes('level') >= $args['end']))
{
$children = $node->children();
foreach ($node->children() as $child)
{
if ($child->name() == 'ul') {
$node->removeChild($child);
}
}
}

if ($node->name() == 'ul') {
foreach ($node->children() as $child)
{
if ($child->attributes('access') > $user->get('aid', 0)) {
$node->removeChild($child);
}
}
if(count($node->children()) > 0) {
// first child
$node->_children[0]->addAttribute('class', 'first-child' . ($node->_children[0]->attributes('class') ? ' ':'') . $node->_children[0]->attributes('class') );
// last child
$node->_children[count($node->_children)-1]->addAttribute('class', 'last-child' . ($node->_children[count($node->_children)-1]->attributes('class') ? ' ':'') . $node->_children[count($node->_children)-1]->attributes('class') );
}
}

if (($node->name() == 'li') && isset($node->ul)) {
$node->addAttribute('class', 'parent');
}

if (isset($path) && (in_array($node->attributes('id'), $path) || in_array($node->attributes('rel'), $path)))
{
if ($node->attributes('class')) {
$node->addAttribute('class', $node->attributes('class').' active');
} else {
$node->addAttribute('class', 'active');
}
}
else
{
if (isset($args['children']) && !$args['children'])
{
$children = $node->children();
foreach ($node->children() as $child)
{
if ($child->name() == 'ul') {
$node->removeChild($child);
}
}
}
}

if (($node->name() == 'li') && ($id = $node->attributes('id'))) {
if ($node->attributes('class')) {
$node->addAttribute('class', $node->attributes('class').' item'.$id);
} else {
$node->addAttribute('class', 'item'.$id);
}
}

if (isset($path) && $node->attributes('id') == $path[0]) {
$node->addAttribute('id', 'current');
} else {
$node->removeAttribute('id');
}
$node->removeAttribute('rel');
$node->removeAttribute('level');
$node->removeAttribute('access');
}
define('modSuperfishMenuXMLCallbackDefined', true);
}

ob_start();//render the menu, and capture the output using output buffering

modSuperfishMenuHelper::render($params, 'modSuperfishMenuXMLCallback');
$menu_html = ob_get_contents();
ob_end_clean();

$tag = $params->get('menutype');
echo modPatch($menu_html,$tag);

Non ho usato la questione dei tag, serve se si devono avere in una pagina più istanze di superfish menu diverse, cmq ho lasciato un if dentro la prima funzione nel caso servisse. Il codice è più o meno simile a quello dell'articolo, se qualcosa vi è oscuro chiedete pure comunque :)

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Ciao Kuvier!! Che piacere sentirti! Mi sei di aiuto non sai quanto!
Volevo solo chiederti una cosa... Ma naturalmente questo codice cambia a seconda della versione del modulo no? Tu che versione hai?
Stavo per provarlo quando mi sono accorta che ho questo codice nel mio default.php:

Codice: [Seleziona]
<?php

// no direct access
defined('_JEXEC') or die('Restricted access');


if ( ! 
defined('modSuperfishMenuXMLCallbackDefined') )
{
function 
modSuperfishMenuXMLCallback(&$node$args)
{
$user = &JFactory::getUser();
$menu = &JSite::getMenu();
$active $menu->getActive();
$path = isset($active) ? array_reverse($active->tree) : null;

if (($args['end']) && ($node->attributes('level') >= $args['end']))
{
$children $node->children();
foreach ($node->children() as $child)
{
if ($child->name() == 'ul') {
$node->removeChild($child);
}
}
}

if ($node->name() == 'ul') {
foreach ($node->children() as $child)
{
if ($child->attributes('access') > $user->get('aid'0)) {
$node->removeChild($child);
}
}
if(count($node->children()) > 0) {
// first child
$node->_children[0]->addAttribute('class''first-child' . ($node->_children[0]->attributes('class') ? ' ':'') . $node->_children[0]->attributes('class') );
// last child
$node->_children[count($node->_children)-1]->addAttribute('class''last-child' . ($node->_children[count($node->_children)-1]->attributes('class') ? ' ':'') . $node->_children[count($node->_children)-1]->attributes('class') );
}
}

if (($node->name() == 'li') && isset($node->ul)) {
$node->addAttribute('class''parent');
}

if (isset($path) && (in_array($node->attributes('id'), $path) || in_array($node->attributes('rel'), $path)))
{
if ($node->attributes('class')) {
$node->addAttribute('class'$node->attributes('class').' active');
} else {
$node->addAttribute('class''active');
}
}
else
{
if (isset($args['children']) && !$args['children'])
{
$children $node->children();
foreach ($node->children() as $child)
{
if ($child->name() == 'ul') {
$node->removeChild($child);
}
}
}
}

if (($node->name() == 'li') && ($id $node->attributes('id'))) {
if ($node->attributes('class')) {
$node->addAttribute('class'$node->attributes('class').' item'.$id);
} else {
$node->addAttribute('class''item'.$id);
}
}

if (isset($path) && $node->attributes('id') == $path[0]) {
$node->addAttribute('id''current');
} else {
$node->removeAttribute('id');
}
$node->removeAttribute('rel');
$node->removeAttribute('level');
$node->removeAttribute('access');
}
define('modSuperfishMenuXMLCallbackDefined'true);
}

modSuperfishMenuHelper::render($params'modSuperfishMenuXMLCallback');

Offline kuvier00

  • Appassionato
  • ***
  • Post: 440
    • Mostra profilo
E' normale, quello è il codice standard del modulo, a TUTTO quel codice devi sostituire il codice che ti ho scritto prima, non c'entra la versione. Ricordati però di fare l'override

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Sisi. Ok. Quindi sostituisco in toto. Una sola cosa... non ho capito quando commenti dicendo:
Metti dentro l'if il codice di sotto se vuoi abilitare questa visualizzazione solo per un tipo di menu.
Come diventa il mio if se voglio applicare solo al top-menu?

ho provato così ma non lo prende:
Codice: [Seleziona]
if ( ! defined('modSuperfishMenuXMLCallbackDefined') )
{

function modPatch($result,$tag) {

if($tag == "top-menu") {
}


//Prima dello span
$top = '<em></em><span>';

// Dopo lo span
$bottom = '</span><b></b>';

// Sostituisco il testo
$result = str_replace("<span>", $top, $result);
$result = str_replace("</span>", $bottom, $result);

return $result;
}
« Ultima modifica: 10 Mag 2011, 17:35:22 da Nuvola6 »

Offline kuvier00

  • Appassionato
  • ***
  • Post: 440
    • Mostra profilo
Quell'if serve nel caso tu abbia più moduli superfish menu in una pagina; cioè se per uno vuoi mantenere la configurazione standart e per l'altro quella modificata, devi usare quell'if.
Per esempio imposto un topmenu con quella modificata, e un mainmenu standard, la prima funzione diventa:

Codice: [Seleziona]
function modPatch($result,$tag) {
if($tag == "topmenu")  {    // Se il menu è di tipo topmenu 
                    //Prima dello span
    $top = '<em></em><span>';

    // Dopo lo span
    $bottom = '</span><b></b>';

    // Sostituisco il testo
    $result = str_replace("<span>", $top, $result);
    $result = str_replace("</span>", $bottom, $result);

    return $result;
}


}


Cmq se visualizzi un solo superfish menu per pagina (oppure più di uno ma tutti modificati), non hai bisogno dell'if.

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Sto provando...

Se non specifico top-menu, me lo applica anche al modulo menu presente nella colonna left.
Se specifico top-menu, non mi visualizza più il top-menu.

Mi sa che esco matta :-)
« Ultima modifica: 10 Mag 2011, 17:54:08 da Nuvola6 »

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Aspetta, aspetta... ho risolto senza specificare l'if.
Ho aggiunto nel css:
#top-menu a em {
display: block;
float: left;
background: url(../images/left_menu.png) no-repeat;
width: 14px;
height: 21px;
}

cioè aggiungendo prima il div
Grande!!!

Offline kuvier00

  • Appassionato
  • ***
  • Post: 440
    • Mostra profilo
Devi guardare di che tipo è il menu che hai in cima. Vai in Menu-->Gestione voci di menu, noterai una colonna Tipo, copia quella stringa (corrispondente al menu che hai in cima) e incollala nella condizione dell'if.

PS: hai provato topmenu (e non top-menu) ?

 



Web Design Bolzano Kreatif