Visualizzazione risultati 1 fino 4 di 4

Discussione: Menù ad albero con jQuery

  1. #1
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,226

    Predefinito Menù ad albero con jQuery

    Buongiorno,
    ho questo menù:

    Codice HTML:
    <ul class="tree dynamized" style="display: block;">
    									
    <li class="category_50">
    	<a href="http://www.apeprocidana.it/index.php?id_category=50&amp;controller=category" title="">Cornici in legno</a>
    	</li>
    
    												
    <li class="category_48">
    	<span class="grower OPEN"> </span><a href="http://www.apeprocidana.it/index.php?id_category=48&amp;controller=category" class="selected" title="">Foto Gadget</a>
    			<ul style="display: block;">
    									
    <li class="category_51">
    	<a href="http://www.apeprocidana.it/index.php?id_category=51&amp;controller=category" title="">Abbigliamento</a>
    	</li>
    
    												
    <li class="category_53">
    	<a href="http://www.apeprocidana.it/index.php?id_category=53&amp;controller=category" title="">Accessori</a>
    	</li>
    
    												
    <li class="category_54">
    	<a href="http://www.apeprocidana.it/index.php?id_category=54&amp;controller=category" title="">Borse ed Accessori</a>
    	</li>
    
    												
    <li class="category_55">
    	<a href="http://www.apeprocidana.it/index.php?id_category=55&amp;controller=category" title="">Calamite</a>
    	</li>
    
    												
    <li class="category_56">
    	<a href="http://www.apeprocidana.it/index.php?id_category=56&amp;controller=category" title="">Ceramica</a>
    	</li>
    
    												
    <li class="category_57">
    	<a href="http://www.apeprocidana.it/index.php?id_category=57&amp;controller=category" title="">Cornici</a>
    	</li>
    
    												
    <li class="category_161">
    	<a href="http://www.apeprocidana.it/index.php?id_category=161&amp;controller=category" title="">Cover Cellulari e Tablets</a>
    	</li>
    
    												
    <li class="category_58">
    	<a href="http://www.apeprocidana.it/index.php?id_category=58&amp;controller=category" title="">Crystal</a>
    	</li>
    
    												
    <li class="category_59">
    	<span class="grower CLOSE"> </span><a href="http://www.apeprocidana.it/index.php?id_category=59&amp;controller=category" title="">Cuscini</a>
    			<ul style="display: none;">
    									
    <li class="category_87">
    	<a href="http://www.apeprocidana.it/index.php?id_category=87&amp;controller=category" title="">Accessori ed Extra</a>
    	</li>
    
    												
    <li class="category_72">
    	<a href="http://www.apeprocidana.it/index.php?id_category=72&amp;controller=category" title="Cuscini Bicolore">Bicolori</a>
    	</li>
    
    												
    <li class="category_113">
    	<a href="http://www.apeprocidana.it/index.php?id_category=113&amp;controller=category" title="">Doppio Full Print</a>
    	</li>
    
    												
    <li class="category_112">
    	<a href="http://www.apeprocidana.it/index.php?id_category=112&amp;controller=category" title="">Full Print</a>
    	</li>
    
    												
    <li class="category_115">
    	<a href="http://www.apeprocidana.it/index.php?id_category=115&amp;controller=category" title="">iPhone</a>
    	</li>
    
    												
    <li class="category_111">
    	<a href="http://www.apeprocidana.it/index.php?id_category=111&amp;controller=category" title="">Jeans</a>
    	</li>
    
    												
    <li class="category_116">
    	<a href="http://www.apeprocidana.it/index.php?id_category=116&amp;controller=category" title="">Mini</a>
    	</li>
    
    												
    <li class="category_114 last">
    	<a href="http://www.apeprocidana.it/index.php?id_category=114&amp;controller=category" title="">Squadre Calcio</a>
    	</li>
    
    							</ul>
    	</li>
    
    												
    <li class="category_60">
    	<a href="http://www.apeprocidana.it/index.php?id_category=60&amp;controller=category" title="">Elettronica, cellulari e informatica</a>
    	</li>
    
    												
    <li class="category_85">
    	<span class="grower CLOSE"> </span><a href="http://www.apeprocidana.it/index.php?id_category=85&amp;controller=category" title="">Festività</a>
    			<ul style="display: none;">
    												
    <li class="category_151 last">
    	<a href="http://www.apeprocidana.it/index.php?id_category=151&amp;controller=category" title="">Touch Screen</a>
    	</li>
    
    							</ul>
    	</li>
    
    												
    <li class="category_117 last">
    	<span class="grower CLOSE"> </span><a href="http://www.apeprocidana.it/index.php?id_category=117&amp;controller=category" title="">Ufficio e Lavoro</a>
    			<ul style="display: none;">
    									
    <li class="category_123">
    	<a href="http://www.apeprocidana.it/index.php?id_category=123&amp;controller=category" title="">Archiviazione</a>
    	</li>
    
    												
    <li class="category_121">
    	<a href="http://www.apeprocidana.it/index.php?id_category=121&amp;controller=category" title="">Articoli da Scrivania</a>
    	</li>
    
    												
    <li class="category_118">
    	<a href="http://www.apeprocidana.it/index.php?id_category=118&amp;controller=category" title="">Borsa Porta Pc</a>
    	</li>
    
    												
    <li class="category_119">
    	<a href="http://www.apeprocidana.it/index.php?id_category=119&amp;controller=category" title="">Calcolatrici da Tavolo</a>
    	</li>
    
    												
    <li class="category_125">
    	<a href="http://www.apeprocidana.it/index.php?id_category=125&amp;controller=category" title="">Memo Stick e Porta Memo</a>
    	</li>
    
    												
    <li class="category_120">
    	<a href="http://www.apeprocidana.it/index.php?id_category=120&amp;controller=category" title="">Porte USB e Mouse Ottici</a>
    	</li>
    
    												
    <li class="category_122">
    	<a href="http://www.apeprocidana.it/index.php?id_category=122&amp;controller=category" title="">Righelli e Stilofori</a>
    	</li>
    
    												
    <li class="category_124">
    	<a href="http://www.apeprocidana.it/index.php?id_category=124&amp;controller=category" title="">Tagliacarta e Fermacarta</a>
    	</li>
    
    												
    <li class="category_126 last">
    	<a href="http://www.apeprocidana.it/index.php?id_category=126&amp;controller=category" title="">Tappetini Mouse</a>
    	</li>
    
    							</ul>
    	</li>
    
    							</ul>
    	</li>
    
    												
    <li class="category_128">
    	<span class="grower CLOSE"> </span><a href="http://www.apeprocidana.it/index.php?id_category=128&amp;controller=category" title="">Premiazioni</a>
    			<ul style="display: none;">
    									
    <li class="category_129">
    	<a href="http://www.apeprocidana.it/index.php?id_category=129&amp;controller=category" title="">Astucci</a>
    	</li>
    
    												
    <li class="category_130">
    	<a href="http://www.apeprocidana.it/index.php?id_category=130&amp;controller=category" title="">Coppe</a>
    	</li>
    
    												
    <li class="category_131">
    	<a href="http://www.apeprocidana.it/index.php?id_category=131&amp;controller=category" title="">Cornici</a>
    	</li>
    
    												
    <li class="category_132">
    	<a href="http://www.apeprocidana.it/index.php?id_category=132&amp;controller=category" title="">Linee Special</a>
    	</li>
    
    												
    <li class="category_133">
    	<a href="http://www.apeprocidana.it/index.php?id_category=133&amp;controller=category" title="">Medaglie</a>
    	</li>
    
    												
    <li class="category_134">
    	<a href="http://www.apeprocidana.it/index.php?id_category=134&amp;controller=category" title="">Orologi</a>
    	</li>
    
    												
    <li class="category_135">
    	<a href="http://www.apeprocidana.it/index.php?id_category=135&amp;controller=category" title="">Outlet</a>
    	</li>
    
    												
    <li class="category_136">
    	<a href="http://www.apeprocidana.it/index.php?id_category=136&amp;controller=category" title="">Portachiavi</a>
    	</li>
    
    												
    <li class="category_139">
    	<a href="http://www.apeprocidana.it/index.php?id_category=139&amp;controller=category" title="">Supporti in Vetro</a>
    	</li>
    
    												
    <li class="category_140 last">
    	<a href="http://www.apeprocidana.it/index.php?id_category=140&amp;controller=category" title="">Targhe</a>
    	</li>
    
    							</ul>
    	</li>
    
    												
    <li class="category_76">
    	<span class="grower CLOSE"> </span><a href="http://www.apeprocidana.it/index.php?id_category=76&amp;controller=category" title="Pagina ufficiale dell'Official Store dell'Isola di Procida Calcio">Procida Calcio</a>
    			<ul style="display: none;">
    									
    <li class="category_78">
    	<a href="http://www.apeprocidana.it/index.php?id_category=78&amp;controller=category" title="Tappetino per mouse con la foto del tuo Campione">MousePad</a>
    	</li>
    
    												
    <li class="category_77 last">
    	<a href="http://www.apeprocidana.it/index.php?id_category=77&amp;controller=category" title="Tazza con Immagine Personalizzata del tuo Campione">Tazza</a>
    	</li>
    
    							</ul>
    	</li>
    
    												
    <li class="category_83">
    	<a href="http://www.apeprocidana.it/index.php?id_category=83&amp;controller=category" title="">ProcidaMania</a>
    	</li>
    
    												
    
    							</ul>
    	</li>
    
    							</ul>
    E vorrei che al click dell'utente su una voce madre si aprissero i figli... il classico menù ad albero/comparsa.

    Il codice jQuery che uso è:

    Codice:
    <script>var MenuTree = {
        collapse: function(element) {
    
            element.slideToggle(600);
    
        },
    
        walk: function() {
    
            $('a', '.tree').each(function() {
    
                var $a = $(this);
                var $li = $a.parent();
    
                if ($a.next().is('ul')) {
    
                    var $ul = $a.next();
    
                    $a.click(function(e) {
    
                        e.preventDefault();
                        MenuTree.collapse($ul);
    
                        $a.toggleClass('active');
    
                    });
    
                }
    
    
    
            });
    
    
        }
    };
    
    MenuTree.walk();</script>
    Tuttavia non accade nulla. Qualcuno sa aiutarmi?
    Apprezzi l'aiuto? Offrimi un caffè!

  2. #2
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    Ti posso suggerire questo codice jQuery per gestire il menu ad albero ... DEMO

    spero ti possa aiutare : )

    Codice HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    
    $("li").addClass("voce"); // ad ogni LI assegno la classe VOCE (di menu)
    
    $("li").has("ul").removeClass("voce"); // se il LI ha un UL (quindi un sottomenu) rimuovo la classe VOCE
    $("li").has("ul").addClass("sottomenu"); // e gli assegno la classe SOTTOMENU
    
    $(".sottomenu ul").addClass("nascondi"); // a tutti i UL dei SOTTOMENU assegno la classe NASCONDI
    $(".sottomenu ul").hide(); // e li nascondo
    
    $(".sottomenu").click(function(evento){  // all'evento CLICK su SOTTOMENU definisco una funzione con evento
     var figlio = $(this).find("ul").slice(0,1); // creo la variabile FIGLIO che definisce il primo UL del SOTTOMENU
     
     var vero = figlio.is(function(){ // verifico la classe di FIGLIO (MOSTRA o NASCONDI)
      var classe = figlio.attr('class');
      if(classe==="mostra"){
       return true;
      }else{
       return false;
      }
     });
    
     if ( vero ) { // se la classe è MOSTRA (visibile), cambio la classe in NASCONDI (invisibile)
      figlio.removeClass("mostra");  
      figlio.addClass("nascondi");
      figlio.hide();
     }else{ // se la classe è NASCONDI (invisibile), cambio la classe in MOSTRA (visibile)
      figlio.removeClass("nascondi");  
      figlio.addClass("mostra");
      figlio.show();
     }
     
     evento.stopPropagation(); // fermo la propagazione dell'evento CLICK su SOTTOMENU ad altri elementi del MENU
     
    });
    
    
    });
    </script>
    <style>
    /* definite l'aspetto grafico come volete */
    
    .voce{
     color:blue;
    }
    .sottomenu{
     color:red;
    }
    .mostra{
    
    }
    .nascondi{
    
    }
    </style>
    </head>
    <body>
    
    <!-- la struttura HTML è una semplice lista UL LI -->
    
    <ul>
    <li><p>VOCE1</p></li>
    <li><p>VOCE2</p>
    
    
    <ul>
    <li><p>SVOCE1</p></li>
    <li><p>SVOCE2</p></li>
    <li><p>SVOCE3</p>
    
    
    <ul>
    <li><p>SSVOCE1</p></li>
    <li><p>SSVOCE2</p></li>
    <li><p>SSVOCE3</p></li>
    <li><p>SSVOCE4</p></li>
    </ul>
    
    </li>
    <li><p>SVOCE4</p></li>
    </ul>
    
    </li>
    <li><p>VOCE3</p></li>
    <li><p>VOCE4</p>
    
    
    <ul>
    <li><p>SVOCE1</p></li>
    <li><p>SVOCE2</p></li>
    <li><p>SVOCE3</p></li>
    <li><p>SVOCE4</p>
    
    
    <ul>
    <li><p>SSVOCE1</p></li>
    <li><p>SSVOCE2</p></li>
    <li><p>SSVOCE3</p></li>
    <li><p>SSVOCE4</p></li>
    </ul>
    
    </li>
    </ul>
    
    </li>
    </ul>
    
    </body>
    </html>

  3. #3
    L'avatar di miki92
    miki92 non è connesso AlterGuru 2500
    Data registrazione
    21-04-2007
    Residenza
    Procida (NA)
    Messaggi
    4,226

    Predefinito

    Tralasciando il codice HTML che non è del tutto corretto, il codice, a prima vista, sembra che assegni a tutti gli elementi li della pagina la classe voce e non solo ad un menù distinto da un ID.
    Apprezzi l'aiuto? Offrimi un caffè!

  4. #4
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    In questo esempio Sì è come dici tu...

    ma basta inserire la lista in un div con id menu e nel codice jQuery specificarlo

    DEMO

    ..scusa nel HTML quali sono gli errori ?

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •