Menù con link stondanti che si sovrappongono

[FISICO]

Forse è più facile da mostrare che da spiegare a parole, guardando l'immagine penso sia più chiaro.

Il codice html sarà qualcosa del tipo:

<ul>[*]Link #1[*]Link #2[*]Link #3[/list]

In pratica avrei l'esigenza di creare una navigazione orizzontale con gli angoli arrotondati che si sovrappongono. Se gli angoli non fossero stondati utilizzando una normale tecnica di sprite sarebbe tutto facile.

Come posso sovrapporre parte dell'immagine in caso di hover anche al bottone affianco ? Vi è mai capitato qualcosa di simile ? Avete suggerimenti in merito ?


Grazie in anticipo a tutti!

[FISICO]

...l'immagine...

[Mich_]

Non e` un problema.

Occorre partire dalla constatazione che il colore di tutti i bottoni e` chiaro, salvo eventualmente uno che diventa scuro al passaggio del mouse.
Quindi la suddivisione delle tue immagini dovrebbe rispecchiare (circa) quanto riportato nell'immagine allegata.

Pero` i bottoni si devono sovrapporre per un pezzetto: credo che per questo hai necessita` di usare i posizionamenti. Questo comporta qualche problema in piu` (i posizionamenti di solito hanno effetti collaterali), ma si deve poter risolvere.
E forse qualche immagine dovra` avere parti trasparenti (possibili con alcuni standard grafici, ad esempio PNG).
Chiaramente la cosa e` piu` semplice se tutti i pezzi hanno larghezza uguale, ma si puo` realizzare anche con larghezze diverse e anche con larghezze espresse in em (chiaramente ogni richiesta in piu` comporta lavoro in piu` sia dal punto di vista grafico che del CSS corrispondente)

Secondo me se guardi tra le raccolte di menu (*), trovi anche la tua situazione.

(*) alcune sono citate tra i "link utili", altre le puoi trovare in rete

[FISICO]

Ciao Mich,
grazie per la tua risposta

Sicuramente andranno usate delle PNG per mantenere la trasparenza nelle sovrapposizioni. Ho fatto qualcosa di simile per un menù verticale con degli angoli stondati che si sovrapponevano, ma questo è un pò diverso e mi chiedevo se ci fosse una soluzione professionale o un tutorial già pronto.

Al momento non ho trovato nulla in rete che si adatti alla mia situazione, ma la ricerca continua...

Ci vorrebbe un pò di tecnica di sliding-door con posizionamento per la sovrapposizione. Se ti viene in mente qualcosa o un link utile fammi sapere !


Grazie

[vdesigns]

forse una cosa simile l'ho fatta un poì di tempo fa senza utilizzare png
http://www.vdesigns.it/blog/grafica/...a-psd-allhtml/

[FISICO]

Ottimo lavoro!

In realtà questo sistema prevede larghezza fissa e un numero di link già preassegnati, io avrei voluto creare qualcosa di più flessibile (larghezza che si adatta alla lunghezza del testo e numero di link variabile).

Cmq grazie per lo spunto, proverò intanto a sviluppare qualcosa seguendo questa logica!