Holà di nuovo salve, :-)
di seguito è riportata la soluzione che io ho adottato per realizzare il "famoso" :-) pannelo a (s)comparsa. Il pannello in questione è uno dei tanti che si possono trovare "in giro" nel web e realizzato con le jQuery o le MooTools, questo vuol dire che gli (o lo) script js li si possono "riciclare" dai sorgenti così come il "foglio di stile", i css, per i quali, poi, ognuno li può personalizzare come meglio crede. Il risultato che ho ottenuto è visibile qui:
http://bcc.elettrolinux.com/ (...è una locazione temporanea! Verrà spostato sul dominio di appartenenza appena possibile)
Cliccando su "Open Panel" il pannello scorrerà, unitamente a tutto il sito, verso il basso. In questo caso sono state utilizzate le jQuery (versione 1.3.2 caricate, dopo avergliele appositamente aggiunte nella cartella dedicata, dal plugin jQuery Easy ->
http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327 ).
Il template utilizzato è il Gantry e ho inserito il codice nel file index.php, vediamo come iniziando dai "fogli di stile". Ogni template presenta una chiamata, nei file php, ai file css, nel caso di Gantry il codice che possiamo trovare file index.php, tra i tag "<head> ... </head>", all'interno di /template/rt_gantry/ è il seguente:
<?php $gantry->addStyle ('stile1.css');>Oppure, nel caso di più di un css utilizzato:
<?php $gantry->addStyle(array('stile1.css', 'stile2.css');>(Notare la chiamata "array"). Se questa riga non esiste possiamo sempre aggiungerla mentre, se esistente, per aggiungere un foglio di stile da utilizzare è sufficiente riportarlo così come indicato nel seguito:
<?php $gantry->addStyle(array('stile1.css', 'stile2.css', 'mio_stile.css');>Il file (o i file) css da utilizzare lo si può personalizzare a seconda delle proprie esigenze e andrà copiato nella cartella css presente in /template/rt_gantry/.
Lo stesso ragionamento si può attuare per i js, la riga nel file index.php, eventualmente da creare sempre tra i tag "<head> ... </head>" qualora non fosse presente, è la seguente
<?php $gantry->addScript('script.js');>Nel caso di script in numero maggiori di uno dovremo ricordare di aggiungere la direttiva "array", come segue:
<?php $gantry->addScript(array('script.js', 'mioscript1.js', 'mioscript2.js'));>I nuovi file js dovranno essere copiati nella omonima cartella presente in /template/rt_gantry/.
In realtà è anche possibile aggiungere il codice js direttamente nel file index.php all'interno dei tag "<head> ... </head>" così come illustrato nel seguito (opzione che ho preferito visto il numero esiguo di righe in questo caso):
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j("#open").click(function(){
$j("div#panel").slideDown("slow");
});
$j("#close").click(function(){
$j("div#panel").slideUp("slow");
});
$j("#toggle a").click(function () {
$j("#toggle a").toggle();
});
});
</script>
L'uso della riga "var $j = jQuery.noConflict();" è stato, per certi versi, obbligato dalla presenza del tipo di slideshow scelto il quale fa uso delle MooTools che confliggevano con le jQuery.
Tutta la rimanente parte di codice, div, class etc per costruire il contenuto del pannello, ovvero ciò che ci mostrerà una volta che viene fatto scorrere (o "aperto"), può essere inserito subito dopo l'apertura del tag <body> così come riportato nel seguito per il mio caso, ma anche questo può essere pesantemente personalizzato a seconda di ciò che vogliamo inserire nel pannello:
<body <?php echo $gantry->displayBodyTag(); ?>>
<!-- Pannello -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<!-- User Side -->
<h1>User Side</h1>
<h2>Navigation</h2>
<ul>
<li><a href="http://bcc.elettrolinux.com" title="Beating Cancer Center Home">Home</a></li>
<li><a title="English Forum">Forum (English Language)</a></li>
<li><a title="Italian Forum">Forum (Italian Language)</a></li>
<li><a href="http://www.dibella.org/home.do" target="_blank" title="DiBellaInsieme Italian Blog">Blog (Italian Language)</a></li>
<li><a title="Useful links">Useful links</a></li>
<li><a title="Contacts">Contacts</a></li>
</ul>
</div>
<!-- Web Side -->
<div class="left">
<h1>Web Side</h1>
<h2>Navigation</h2>
<ul>
<li><a title="Site Map">Site map</a></li>
</ul>
<div class="clear"></div>
<input type="submit" name="submit" value="Test" class="bt_login" />
</div>
<!-- Donate/Register Form -->
<div class="left right">
<h1>Not a member yet? Sign Up!</h1>
<h2>Navigation</h2>
<input type="submit" name="submit" value="Test" class="bt_register" />
</div>
</div>
</div>
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Top Panel</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Open Panel</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
</div> <!-- Pannello -->
La soluzione del pannello se utilizzata con l'opzione "absolute" nel css presenta necessariamente un problema nel qual caso avessimo "livelli" sovrapposti al template (nel mio caso MenùCK e lo Slideshow): in sostanza il pannello scorrendo verrà coperto dai "livelli superiori" poiché esso scorre al livello di template. Per questo motivo, al momento, fino a quando non saprò la reale dimensione verticale del pannello, opterò per lo scorrimento del sito verso il basso ("relative" nel css). L'effetto di sovrapposizione potrebbe essere interessante per creare un pannello che scorrendo verso il basso vada a realizzare un effetto ad "incastro" (...un esercizio di CSS non indifferente!) con il livello superiore (MenùCK nel mio caso), ma in questo caso, vista la tematica, lo considero assolutamente fuori luogo ancorché inutile.
Thanks & Bye 8-)
