PDA

Visualizza la versione completa : JQuery accordion menu stato attivo aiuto


 
mandrake_01
12-12-2011, 15:56
Ciao,
sto utilizzando un accordion menu fatto in questo modo





<ul class="nav">
Item 1 (#)

Item 2 (#)

Item 3 (#)
<ul>
Sub-Item 3 a (#)
Sub-Item 3 b (#)
Sub-Item 3 c (#)
Sub-Item 3 d (#)
[/list]

Item 4 (#)
<ul>
Sub-Item 4 a (#)
Sub-Item 4 b (#)
Sub-Item 4 c (#)
[/list]

[/list]





ul.nav {
float: left;
width: 280px;
background: #fff;
list-style: none;
text-align: right;
font-family: Arial, Verdana;
font-size: 45px;
text-transform:uppercase;
}

ul.nav li a {
display: block;
padding: 5px 5px;
text-decoration: none;
color: #000;
}

ul.nav li ul {
list-style: none;
font-family: Arial, Verdana;
font-size: 15px;
display: none;
}

ul.nav li a:hover, ul.nav li a.active {
background: #ff9933;
color: #fff;
}

ul.nav li ul li a:hover, ul.nav li ul li a.active {
background: none;
color: #ff9933;
}






$(document).ready(function () {
$('.nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('.nav li ul').slideUp();
$(this).next().slideToggle();
$('.nav li a').removeClass('active');
$(this).addClass('active');
}
});
});


Il menu viene incluso in ogni pagina del mio sito che scorro attraverso la classe page1, page2, ecc..
Vorrei mantenere lo stato del menu quando cambio pagina, ho provato a fare qualche modifica ma non ci sono riuscito, qualcuno mi da qualche suggerimento su come farlo?

Grazie 1000!

longilineo
12-12-2011, 23:51
gestisci il click sugli elementi che ti permettono di cambiare pagina, magari fai in modo che gli elementi che ti permettono di cambiare pagina abbiano anche la classe 'cambiapagina'. Si possono usare più classi per lo stesso elemento semplicemente separando i nomi delle classi con uno spazio.



$("a.cambiapagina").click(function(){
var active = $( ".nav" ).accordion( "option", "active" );
location.href = $(this).attr("href") + "?active=" + active;
})


Quindi per selezionare il giusto tab attivo, supposto che utilizzi php come linguaggio lato server potresti fare



$(document).ready(function(){
//codice che ti server a rendere .nav un accordion che già sai e non ti scrivo

//codice che ti serve a rendere attivo il giusto tab
$( ".nav" ).accordion({ active: <?php echo $_GET['active'] ?> });
})

mandrake_01
13-12-2011, 08:22
Ti ringrazio per il suggerimento, ma io ho omesso di dire (pensavo non ce ne fosse bisogno) che in realtà le pagine del sito sono div che scorrono attraverso il plugin cycle e che io gestisco in questo modo


$('#slide-box').cycle({
fx: 'scrollLeft',
timeout: 0,
speed: 1200
});

$('.page1').click(function() {
$('#slide-box').cycle(0);
return false;
});


Quindi la tua soluzione mi viene difficile applicarla.
Poi mi sarebbe piaciuto gestire tutto senza utilizzare php se possibile.

Grazie
Ciao

longilineo
13-12-2011, 12:13
Quello che non capisco io, visto che fai tutto lato client, perchè ricarichi la pagina ogni volta?

Almeno mi pare di capire che ricarichi la pagina, visto che se così non fosse l'accordion non si resetterebbe.

mandrake_01
13-12-2011, 13:46
Io utilizzo il plugin Cycle per fare un slide dei div content. Solitamente si usa un menu univoco che si posiziona all'esterno dei div content che vengono interessati del plugin cycle. Per ottenere l'effetto che volevo però io ho inserito lo stesso menu in ogni content div, in pratica oltre al contenuto viene "scrollato" anche il menu.
Questo immagino sia il motivo per il quale il menu viene "resettato".

Ciao

Loading