Un po' di tempo fa, mi sono reso conto che all'apertura del browser ho l'esigenza di andare nei soliti siti web e quindi mi sono deciso, anche per esercitarmi col nuovo css3, di farmi una bella startpage: una specie di home che gira in locale con tutti i link che potrebbero servire all'apertura del browser . Avevo tutti i link in vista e stavo bene, ma poi ho sentito il bisogno di realizzarne un'altra (partendo dallo stesso codice) ancora più scarna e che fosse in grado di rimanere tale anche con l'aumentare del numero di link e vi voglio parlare di come ho realizzato quella nuova. L'implementazione è sicuramente migliorabile, ma a me va benissimo così :)


L'obiettivo di partenza era "visualizzare solo ciò che serve quando serve" (che è anche una buona regola di usabilità) e in mente mi è venuto questo:
Sezione #1        link #1
Sezione #2 ----   link #2
.                 .
.                 .
Sezione #n        link #n

Cioè una specie di menù dove selezionare di volta in volta la raccolta di link che mi serviva (social network, università, ecc) e visualizzare soltanto quella.

Gli ingredienti sono l'HTML (non 5), il CSS e il Javascript. L'HTML ci serve per costruire la pagina inserendo gli elementi che ne devono far parte; il CSS ci occorre per impostarne l'aspetto e per perfezionare il posizionamento degli oggetti della pagina (e per aggiungere qualche "effetto speciale"); il Javascript ci serve per implementare la visualizzazione e il nascondimento dei link.

Parliamo di come ho risolto io il problema. Partiamo dal codice HTML, proseguiamo per il CSS e finiamo con le funzioni Javascript. Ovviamente non analizziamo tutto riga per riga, ma solo le parti fondamentali e necessarie alla comprensione.


HTML

Tralasciando la testata e varie cose di contorno, la ciccia dell HTML che ci interessa è strutturata in questo modo:
- div_contenitore_principale
  -div_contenitore_secondario
    -div_contenuto_link #1
    -div_contenuto_link #2
    -div_contenuto_link #3
    .
    .
    -div_contenuto_link #n
 Dove ogni div_contenuto_link l'ho strutturato così:
- div_titolo
  - intestazione

- lista link
  - link #1
  - link #2
  .
  .
  - link #n
Riassumendo: i link sono raggruppati in blocchi (div) suddivisi in due parti in cui la prima è l'intestazione e l'altra è l'elenco dei link di quella sezione.

Per capirci meglio vediamo ora un po' di html:
   <div id="account" class="link"> <!-- div_contenuto_link  -->
    <div id="account_tit" class="titolo">
     <h2>Social Network</h2>
    </div>

    <ul id="account_ul" class="link">
     <li><a href="http://www.twitter.com">Twitter</a></li>
     <li><a href="http://plus.google.com">Google+</a></li>
    </ul>

   </div> <!-- chiusura div_contenuto_link -->

Dobbiamo mettere tanti di questi quante sono le categorie di link che vogliamo avere.

Però, noi vogliamo visualizzare inizialmente soltanto i titoli delle categorie giusto? Ecco qui entra in scena il css.


CSS

Del foglio css vediamo soltanto le proprietà inerenti gli elenchi di link e le intestazioni delle categorie.

Allora, io volevo una serie di linguette poste nel lato sinistro della pagina, quindi:
div.titolo {

color:#EFEFEF;
padding-top:1px;
cursor:pointer;

background: #545454; height: 30px;
border-top-right-radius: 25px; border-bottom-right-radius: 25px;
text-shadow: 1px 1px 1px #313131;
text-align:center; width:200px;
}


L'aspetto che avrà sarà pressapoco questo:


Tutti i parametri sono abbastanza arbitrari, però così facendo abbiamo una linguetta che con una scritta bianca sopra rimane tutto sommato elegante e per nulla fastidiosa.
Siccome non ho impostato nessun paramentro di posizione, di default queste si posizioneranno sul bordo sinistro della pagina, però possiamo aggiungere
position: absolute;
left:0;
per mettere in chiaro le cose.


Per quel che riguarda l'elenco dei link invece possiamo scrivere queste regole:
ul.link {

position:absolute;
left:250px;
top:50px;

opacity:0;
visibility:hidden;

width:250px;

-moz-transition: all .2s ease;
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
 }

Questo è assai interessante. La posizione è spostata rispetto al bordo sinistro della pagina e rispetto al bordo superiore. Notiamo che l'opacità è 0 (è quindi trasparente) e che la visibilità è impostata come "nascosta", quindi di fatto non è visibile.
Infine abbiamo impostato degli effetti di transizione): ho deciso che i link compariranno con un effetto di scorrimento dal alto verso il basso e scompariranno scorrendo nel senso opposto (wow).

L'azione di comparsa/scomparsa dei link va azionata al click sulla linguetta: è l'ora del Javascript.


Javascript

La funzione Javascript non ci serve ad altro se non a modificare i parametri Javascript delle linguette e degli elenchi di link.
La chiamata alla funzione va inserita nell'HTML di prima:
   <div id="account" class="link"> <!-- div_contenuto_link  -->
    <div id="account_tit" class="titolo" onclick='collegamenti("account_ul", "account_tit")'>
     <h2>Social Network</h2>
    </div>

    <ul id="account_ul" class="link">
     <li><a href="http://www.twitter.com">Twitter</a></li>
     <li><a href="http://plus.google.com">Google+</a></li>

     <li class="close" onclick='collegamenti("account_ul", "account_tit")'>Chiudi</li>     </ul>

   </div> <!-- chiusura div_contenuto_link -->
I due parametri passati alla funzione sono nell'ordine l'id dell'elenco dei link e l'id della linguetta. Ho aggiunto anche una voce per nascondere i link direttamente dall'elenco dei link, anziché soltanto dalla linguetta.

Ora passiamo a vedere il codice della funzione Javascript:
var flag = 0; //1 -> link non visibili | 0 -> link visibili
var flag_id; //id della lista mostrata
var tit_open;

function collegamenti(nome, titolo) //nome -> nome lista | titolo -> nome intestazione
{
    var elenco = document.getElementById(nome); //elenco: lista dei link della sezione
  
    var titoli = document.getElementById(titolo); //div intestazione

    /* se flag == 0 i link devono essere mostrati*/
    if(!flag)
        {

            apri(nome, titoli, elenco);
            tit_open = titoli;

        }
    else
        if(flag_id == nome)
            {
                chiudi(elenco, titoli);
            }
        else
            {
                var aperto = document.getElementById(flag_id);

                chiudi(aperto, titoli);

                if(tit_open.style.width)
                    tit_open.style.width = "200px"; //ridimensiona l'intestazione gia' aperta


                apri(nome, titoli, elenco);
                tit_open = titoli;

            }
}

Vediamo se riesco a spiegare cosa succede qui.

C'è una variabile, flag, che viene impostata a 0 oppure a 1: 0 se non vengono mostrati link, 1 in caso contrario.
La variabile flag_id contiene l'id dell'ultima lista di link mostrata.
La variabile tit_open contiene l'id dell'ultima linguetta su cui si è cliccato.

Ci sono due funzioni: apri e chiudi, che mostrano e nascondono i link, ma le vediamo dopo.

Vediamo come funziona la funziona soprastante.
Quando clicco su di una linguetta, viene controllato il valore della variabile flag: se vale 0 significa che non ci sono link in mostra e quindi richiama la funzione apri e setta flag a 1. Se flag invece vale 1, in base alle considerazioni fatte prima, avemo un elenco di link in mostra ed abbiamo due casi: l'utente ha cliccato sulla stessa linguetta di prima o sulla voce "Chiudi" relativa, oppure ha cliccato su un'altra linguetta perché vuole visualizzare altri link. Ecco che qui entra in scena la variabile flag_id: se l'elenco dei link richiesto è quello ancora visualizzato (quindi memorizzato nella variabile) allora va chiusa la sezione aperta e basta (chiamando la funzione chiudi); altrimenti, va nascosto l'elenco corrente e aperto quello corrente (chiama chiudi su quello aperto e apri su quello richiesto).
La variabile tit_open ha il solo scopo di consentire l'allungamento e il ridimensionamento della linguetta al click (non ne avevo accennato prima, scusate).


Ora vediamo le due banali funzioni apri e chiudi:
function apri(nome, titoli, elenco)
    {
        elenco.style.top = "80px";
        elenco.style.opacity = "1";
        elenco.style.visibility = "visible";
        titoli.style.width = "240px";

        flag_id = nome;
        flag=1;
    }

function chiudi(elenco, titoli)
    {
        elenco.style.opacity = "0";
        elenco.style.top = "50px";
        elenco.style.visibility = "hidden";
        titoli.style.width = "200px";

        flag=0;
    }
Non c'è molto da commentare. La prima funzione cambia le proprietà css degli elenchi di link in modo che siano visibili, spostandoli leggermente verso il basso. Setta inoltre due variabili che abbiamo discusso prima. La seconda funzione reimposta le proprietà css degli elenchi di link come nel foglio di stile, in modo che siano di nuovo nascosti.


Spero di essermi spiegato, se avete bisogno di chiarimenti o volete suggerire miglioramenti, qua giù c'è l'area commenti, usatela :D


Ehm...possiamo avere qualcosa di funzionante?

Certo :D
Andando su questa pagina potete provare la startpage, mentre grazie a questo link potete scaricare un archivio contenente il file HTML (depurato dai miei link) e il foglio di stile.
Ovviamente per aggiungere i link è necessario avere qualche nozione di html. So che non rende la cosa alla portata di tutti, però non è nemmeno così difficile. State attenti a come chiamate i div, le liste e quali sono i parametri che passate alle funzioni, altrimenti non funzionerà correttamente.

Questo è il mio risultato:

Ecco qua :D

È tutto! Che dire, spero vi sia utile :)