Allora ci sono in parte riuscito:
(per vedere il risultato momentaneo
www.simonepozzobon.com/joomla/ho creato un modulo html personalizzato con il seguente codice
<div id="menu">
<p align="center"><a id="menu1" href="#">Home</a><a id="menu2" href="#">Contatti</a><a id="menu3" href="#">Podcast</a><a id="menu4" href="#">Eventi</a><a id="menu5" href="#">Blog</a></p>
</div>poi ho modificato l'index.php del mio tema disattivando prima mootools e caption con il seguente codice:
<?php
$user =& JFactory::getUser();
if ($user->get('guest') == 1) {
$headerstuff = $this->getHeadData();
$headerstuff['scripts'] = array();
$this->setHeadData($headerstuff); }
?>
<jdoc:include type="head" />poi inserendo Jquery che avevo precedentemente salvato nella cartella templates/miotemplate/js
e lo stile personalizzato per le strisce colorate precedentemente salvato nella cartella templates/miotemplate/css
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/jquery-1.4.1.js"></script><link href="templates/<?php echo $this->template ?>/css/menu.css" rel="stylesheet" type="text/css" />e infine ho scritto direttamente lo script nel file, anche se avrei potuto richiamarlo e salvarlo nella cartella js, ma non avevo voglia
:
<script type="text/javascript">
$(document).ready(function(){
$('div#content').hide();
$('div#contatti').hide();
$('div#podcast').hide();
$('div#eventi').hide();
$('div#blog').hide();
$('a#chiudi1').hide();
$('a#chiudi2').hide();
$('a#chiudi3').hide();
$('a#chiudi4').hide();
$('a#chiudi5').hide();
$('a#menu1').click(function(){
$('p#uno').fadeTo('slow',0.2);
$('div#content').slideDown('slow');
$('a#chiudi1').fadeIn();
});
$('a#menu2').click(function(){
$('p#due').fadeTo('slow',0.2);
$('div#contatti').load('contatti/contatti.html #content', function(){
$('div#contatti').slideDown('slow')
});
$('a#chiudi2').fadeIn();
});
$('a#menu3').click(function(){
$('p#tre').fadeTo('slow',0.2);
$('div#podcast').load('podcast/2.html #content', function(){
$('div#podcast').slideDown('slow')
});
$('a#chiudi3').fadeIn();
});
$('a#menu4').click(function(){
$('p#quattro').fadeTo('slow',0.2);
$('div#eventi').load('eventi2/eventlist #content', function(){
$('div#eventi').slideDown('slow')
});
$('a#chiudi4').fadeIn();
});
$('a#menu5').click(function(){
$('p#cinque').fadeTo('slow',0.2);
$('div#blog').load('blog/3.html #content', function(){
$('div#blog').slideDown('slow')
});
$('a#chiudi4').fadeIn();
});
$('a#chiudi1').click(function(){
$('a#chiudi1').fadeOut();
$('p#uno').fadeTo('slow',1);
$('div#content').hide('slow');
});
$('a#chiudi2').click(function(){
$('a#chiudi2').fadeOut();
$('p#due').fadeTo('slow',1);
$('div#contatti').hide('slow');
});
$('a#chiudi3').click(function(){
$('a#chiudi3').fadeOut();
$('p#tre').fadeTo('slow',1);
$('div#podcast').hide('slow');
});
$('a#chiudi4').click(function(){
$('a#chiudi4').fadeOut();
$('p#quattro').fadeTo('slow',1);
$('div#eventi').hide('slow');
});
$('a#chiudi5').click(function(){
$('a#chiudi5').fadeOut();
$('p#cinque').fadeTo('slow',1);
$('div#blog').hide('slow');
});
});
</script>Il tutto inserito tra i tag <head> e </head>
Poi ho posizionato all'interno dei tag <body> e </body> le "strice colorate" con il seguente codice:
<p id="uno"></p>
<div id="content"><jdoc:include type="component" style="XHTML" /></div>
<p align="right"><a href="#" id="chiudi1">Chiudi</a></p>
<p id="due"></p>
<div id="contatti"></div>
<p align="right"><a href="#" id="chiudi2">Chiudi</a></p>
<p id="tre"></p>
<div id="podcast"></div>
<p align="right"><a href="#" id="chiudi3">Chiudi</a></p>
<p id="quattro" align="right"></p>
<div id="eventi"></div>
<p align="right"><a href="#" id="chiudi4">Chiudi</a></p>
<p id="cinque" align="right"></p>
<div id="blog"></div>
<p align="right"><a href="#" id="chiudi5">Chiudi</a></p>ora il problema che sorge è il seguente:
Quando apro una sezione per esempio blog poi ho la possibilità di cliccare sul titolo di ogni post per leggere il testo esteso..... e qui crolla tutto
.....perchè riapre la stessa pagina e ricomincia da capo!!
....come posso risolvere questo problema?!!?
