Costruendo il mio sito ho sperimentato una barra di navigazione nella quale ogni elemento che viene "Linkato" si sposta all'estremo lato sinistro, mentre gli altri, compreso quello che prima era linkato, si spostano a destra. Questa scelta mi da modo di identificare sempre molto bene la posizione nel sito, specialmente quando ci sono due barre di navigazione: una principale ed una secondaria. Purtroppo sono stato violentemente criticato da un sostenitore dell'ergonomia a tutti i costi che mi dice che le voci del menu non devono MAI spostarsi. La seconda critica è anche la mia domanda: per poter spostare a sinistra l'elemento linkato, la sola soluzione che ho trovato è stata di spostarlo fisicamente al primo posto dell'elenco, mentre non sono riuscito a posizionarlo utilizzando i CSS, anche perchè ad ogni diversa voce dell'elenco gli spostamenti cambiano. È anche vero che per ogni pagina bisogna comunque intervenire nel codice per indicare che quella è la pagina linkata e quindi non è una grossa fatica fare anche lo spostamento, però mi domando se esiste un modo più elegante per farlo.
Ecco quindi il codice (essenziale) di due diverse pagine, ed il relativo CSS:
Pagina Home:
<div id="navcnt">
<div class="navspace"></div>
<div class="navigation">
<ul>
<li class="activelink">Home
[*]Frutta
<li class="vuoto">Verdura
<li class="vuoto">Formaggi
<li class="vuoto">Carni
[*]Bevande
[/list]
</div>
</div>
Pagina "Frutta":
<div id="navcnt">
<div class="navspace"></div>
<div class="navigation">
<ul>
<li class="activelinkB">Frutta
[*]Home
<li class="vuoto">Verdura
<li class="vuoto">Formaggi
<li class="vuoto">Carni
[*]Bevande [/list]
</div>
<div class="navigation" style="margin-top: -1px">
<ul>
<li class="activelinkC">Pere[*]Mele[*]Ciliegie[*]Banane[*]Albicocche
[/list]
</div>
</div>
Il background-color di tutte le pagine è #333333
Questo è il CSS:
div#navcnt{width:746px; margin: auto !important; margin: -585px 0 0 0}
div.navspace {width:168px; height:22px; float:left; display: inline}
div.navigation {width:548px;height: 22px; background-color:#333333;float:right;display:inline; margin: 0;
border-color:#EAEAEA; border-style:solid; border-width: 1px 0 1px 0}
div.navigation ul{list-style-type: none; margin: 0; padding: 0; border:0}
div.navigation li{margin: 0; padding:0; display:inline; border:0}
div.navigation a, div.navigation li.vuoto{text-decoration: none; padding:6px 15px 4px 15px;
background-color:transparent;
color:#FFFFFF;
text-align: center;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size:12px;
line-height: 22px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none; border:0}
div.navigation li.vuoto{padding:0px 15px 4px 15px}
div.navigation a:visited{color:#CCFF99; border:0}
div.navigation a:hover{color:#CCCCCC; margin:0;line-height: 22px; border:0}
div.navigation li.activelink a, div.navigation li.activelink a:hover{color:#FFFF99; border:0; float:left; padding: 0 ; margin: 0 40px 0 10px; font-weight:bold }
div.navigation li.activelinkB a, div.navigation li.activelinkB a:hover{color:#FFFF99; border:0; float:left; padding:3px 0 0 0; margin: 0 40px 0 10px; font-weight:bold}
div.navigation li.activelinkC a, div.navigation li.activelinkC a:hover{color:#FFFF99; border:0; float:left; padding: 0 15px 0 10px; margin: -1px 10px 0 0; border-top: solid 1px #333333; line-height: 15px; font-weight:bold}
Provando a costruire le altre pagine della barra secondaria (come la pagina "Pere" dell'elenco, per intenderci: "Mele", "Ciliegie", ecc.), la cosa è ancora più chiara.
Aggiungo che ho provato solo su Firefox e su I.E.7; sono certo che su I.E. 6 o meno non funzioni, ma a questo si può ovviare.
Specifico meglio la mia domanda: agendo nel CSS sulle diverse regole "activelink" è possibile posizionare all'estrema sinistra della barra l'elemento "activelink" e far scorrere tutti gli altri verso destra con il loro normali padding senza spostare fisicamente l'elemento nel Codice?
Non ho ancora pubblicato queste pagine e non so come fare a linkarle; se me lo suggerite lo faccio così chi vuole le può vedere.
Sempre su questo argomento avrei altre ipotesi da fare e se quello che ho esposto è abbastanza chiaro ecco allora il resto delle domanda:
Se è possibile far scorrere a sinistra l'elemento "linkato" della barra, è anche possibile farlo andare in una posizione fissa che non sia l'etrema sinistra o l'estrema destra? (ad esempio, nel caso di una barra secondaria, esattamente al di sotto del terzo elemento della barra principale?). Questo mi permetterebbe di soddisfare almeno in parte le richieste del patito di ergonomia perchè potrei lasciare "immobile" la barra principale e fare "scorrevole" solo quella secondaria.
Sono ovviamente a disposizione per altre spiegazioni su quello che ho scritto..
Saluti e grazie in anticipo.
Rispondi quotando