Menu di navigazione

[simone.marchese]

Ciao a tutti girando su internet ho trovato il seguente sito, ero interessato alla creazione di un menu simile a questo.

Qualcuno di voi ha idea di come si possa creare? o ha un tutorial da seguire?

Grazie

[Mich_]

Prova vedere tra i "link utili" del forum.

Ci sono i riferimenti di varie raccolte di menu. In particolare a me piacciono quelli di CSSplay

[simone.marchese]

Grazie per la risposta..
Sto guardando un pò ma per ora non ho trovato quello che mi serve

[Mich_]

Se ho capito giusto, quello che stai cercando e` un menu orizzontale ad un livello (fisso).

Mi pare che tutte le voci abbiano larghezza uguale, ed ogni voce e` visualizzata su due righe.

[simone.marchese]

Si... il mio problema è nel creare la voce nella seconda riga..

[pr0v4]

A volte basta dare un'occhiata al sorgente HTML per avere la risposta che si desidera:

<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page"> 
  <a href="http://www.vecchi-besso.it/?page_id=5"> 
    <cufon class="cufon cufon-canvas" alt="Portfolio" style="width: 64px; height: 18px;">   
      <canvas width="77" height="22" style="width: 77px; height: 22px; top: -2px; left: -2px;"></canvas> 
      <cufontext>Portfolio</cufontext> 
    </cufon> 
  </a> 
  <span class="descmenu"> i nostri lavori</span>

A parte l'utilizzo di cufon per cambiare i caratteri, fossi in te utilizzerei la proprietà @font-face che è supportata su quasi tt i browser odierni (fatta eccezione di Opera Mobile), si nota benissimo che per la prima voce è stato untilizzato un link mentre per la voce sottostante un semplice span con un text-transform impostato a lowercase.

se vuoi una versione più semplice ecco il codice semplificato:

[*] 
  <a href="#"> 
    Portfolio
  </a> 
  <span class="piccolo"> i nostri lavori</span>

Spero di esserti stato d'aiuto, per qualsiasi cosa contattami pure!

[simone.marchese]

Dopo qualche tentativo sono arrivato alla soluzione, per chi fosse interessato ecco il codice da poter utilizzare.

ul{
			list-style-type: none;
		}
		ul li{
			
			position: relative;	
			display:inline;			
			float: left;
			z-index:100;
			float:left;
			border-right:1px solid #cbcbcb;
			padding-right: 10px;
			margin-right: 20px;
		}
		ul li a{
			display:block;
			width:100px;
			padding:4px 20px 4px 0px;
			text-decoration: none;
			line-height: 14px;
			outline: none;
			text-align:left;
			font-size: 19px;
			color: #666666;
			font-family: 'NillandRegular';

		}
		span.descmenu{
			font-size: 11px;
			color: #666;
			padding: 0px;
			font-family: Verdana;
			text-transform: lowercase;
		}

HTML

<ul>
	[*]About<span class="descmenu">Chi sono</span>
	[*]News<span class="descmenu">Tieniti aggiornato</span>[/list]

Grazie a tutti ..

[pr0v4]

Complimenti Simone!

Soltanto sperimentando si può veramente apprendere qualcosa di nuovo!

[simone.marchese]

Beh altrimenti non farei il web master come lavoro