Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    JQuery accordion menu stato attivo aiuto

    Ciao,
    sto utilizzando un accordion menu fatto in questo modo

    codice:
    
    <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]
    codice:
    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;
    }
    codice:
    
    $(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!

  2. #2
    Utente di HTML.it
    Registrato dal
    Oct 2009
    Messaggi
    636
    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.

    codice:
    $("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

    codice:
    $(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'] ?> });
    })

  3. #3
    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
    codice:
    $('#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

  4. #4
    Utente di HTML.it
    Registrato dal
    Oct 2009
    Messaggi
    636
    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.

  5. #5
    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

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.