Joomla.it Forum
Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => I Template di Joomla 1.5.x => : Nuvola6 06 May 2011, 17:18:19
-
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:
<a href="#......">
<em></em>
<span>la mia voce menu</span>
<b></b>
</a>
e il mio css sarebbe:
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!
-
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:
<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
-
Wow. magari riuscissi col modulo. Ora provo subito e ti faccio sapere.
Grazie!
-
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...
-
Io userei imagemenu:
http://www.joomla.it/articoli-della-community/931-menu-con-immagini-rollover.html
;)
-
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?
-
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
:)
-
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 :-)
-
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ì.
-
Te ne sarei molto grata, kuvier. Ti aspetto. Buon weekend
-
Ciao Kuvier. Ci sei? Che dici? Adotto lo stratagemma per aggirare il problema o seguo la tua strada?
-
Non ne so molto di php, anzi, quasi niente :)
Tuttavia puoi creare un override del mod_mainmenu di default come spiegato qui (http://www.fatica.net/blog/69-overriding-joomla-default-modmainmenu-output.html).
E' un argomento che interessa anche me :)
-
Non ne so molto di php, anzi, quasi niente :)
Tuttavia puoi creare un override del mod_mainmenu di default come spiegato qui (http://www.fatica.net/blog/69-overriding-joomla-default-modmainmenu-output.html).
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:
// 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 :)
-
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:
<?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');
-
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
-
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:
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;
}
-
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:
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.
-
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 :-)
-
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!!!
-
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) ?
-
Solo un'ultima cosa per chiudere brillantemente il post grazie al tuo contributo...
L'ultima cosa è questa. Siccome il titolo del post è "pulsante rollover", manca un'ultimissima cosa.
Per fare in modo che il pulsante sia richiamato dal modulo solo se passo sulla voce,
il codice diventerà:
#top-menu a:hover em {
display: block;
float: left;
background: url(../images/left_menu.png) no-repeat;
width: 14px;
height: 21px;
}
Ora posso chiedere ai joomliani di ringraziarti con me in coro per la bellissima modifica che credo ritornerà utile a tantissimi.
Grazie di cuore!
-
Grazie anche a te maegras per il tuo intervento.
-
Mi unisco alle congratulazioni di Nuvola6 :)
Si potrebbe farci un piccolo tutorial :)
-
Si potrebbe farci un piccolo tutorial :)
Perchè no, pensavo da tempo di dare un contributo più "sostanzioso" a questa bella comunità. Il problema è trovare il tempo di farlo ::)
Nel caso chi dovrei contattare?
-
Se scrivi nel wiki per esempio un a FAQ
http://wiki.joomla.it/index.php?title=Categoria:Domande_e_Risposte_FAQ
basta solo che ti registri.
Se scrivi un articolo allora leggi qui:
http://www.joomla.it/invia-articolo.html
e annunciati qui:
http://forum.joomla.it/index.php/topic,55998.0/topicseen.html
:)
-
risolto anche io grazie al tuo ottimo contributo.. :) :)