In questa breve guida vi spiegherò come inserire nel vostro forum un tabbed menu per le categorie con jQuery.
Prima di tutto avete bisogno del materiale e quindi le librerie jquery adatte. Per averle potrete scaricare dal link qui sotto poi, una volta scompattata, caricatela nella cartella jscript.
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
Vediamo come implementare il tabbed menu
Per prima cosa andate nel template
ed aggiungi prima del contenuto del template questo codice:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
E dopo il contenuto del template inserite
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Una volta fatto ciò andate nel template
ed aggiungete prima del tag
quanto segue:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Andate nei CSS del vostro tema ed aggiungete in fondo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ora vediamo come personalizzare il tutto e renderlo adeguato per il vostro utilizzo.
Nel template index avete aggiunto il codice per la creazione delle celle del tabbed menu, e le celle sono queste di seguito:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Nella prima riga la classe del td è tcat at tab mentre le altre sono tcat tab. Il at sta a significare che è la classe che verrà visualizzata all’apertura della home. Il title è il nome che apparirà quando il cursore sarà sopra la cella e, per finire e più importante, il rel è la categoria che aprirà quando verrà cliccato.
Il rel è formato da cat_id della categoria. Quindi se abbiamo una categoria con ID 36 e vogliamo farla aprire con il click sopra una cella basterà mettere cat_36 al rel della cella. Per scoprire l’id di una sezione basterà andare nell’admincp, gestione dei forum e cliccare su di una categoria, nel link l’ultimo numero è l’id, semplice!
Per far si che si aprano sezioni multiple con una cella basterà mettere nel rel: cat_primoID, #cat_secondoID, #cat_terzoID e così via.
Quindi, per fare un esempio finale, mettiamo caso che abbiamo 3 categorie: alpha, beta e gamma con rispettivi id 23, 56 e 98. Vogliamo mettere 2 celle le tabbed menu e nella seconda faremo aprire 2 categorie, quindi in index metteremo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ora vediamo la parte del CSS.
Per far si che le sezioni vengano oscurate una volta che se ne seleziona una da vedere dovrete inserire delle regole CSS.
Nel CSS già inserito .at è lo stile della sezione visualizzata all’apertura dell home, mentre #-cat_1 è una regola di esempio per oscurare la categoria con id 1 nel menu.
Quindi, collegandoci all’esempio di prima, se voglio far vedere per prima la sezione Alpha nel css non aggiungo nulla, ma metterò:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ovvero gli id di tutte le altre sezioni ad eccezione della prima.
Se avrete fatto tutto come si deve, avrete il vostro tabbed menu!
Fonte: odinoizelab
Ultima modifica:
