Come fare un menu "espandibile"

C’è un mio amico che si diletta a creare siti web e poi visto che io sono più esperto di lui mi chiede spesso cosa ne penso.

L’altro giorno ha aggiunto al suo sito un menu che con javascript apriva e chiudeva i sottomenu.

Quando mi ha chiesto: “Cosa ne pensi?” gli ho risposto “Una schifezza. Di grafica è anche bello però è anti accessibile…”.

È vero che ormai tutti i browser hanno javascript sempre abilitato, però c’è chi javascript non ce l’ha ed è molto più intransigente dei normali utenti: i motori di ricerca.

Visto che spesso mi fa delle sfide ho deciso di far vedere come creerei io un menu con questo articolo.

Userò un po’ di HTML, la proprità display di CSS e Javascript, precisamente il DOM e l’evento onclick.

La struttura HTML è molto semplice, anche se deve essere per forza fatta così: ogni menu è una lista ul e i sottomenu hanno un elemento span che fa da loro titolo.

È necessario che l’ul principale abbia un id, il resto viene estrapolato col DOM. Perciò si possono fare infiniti sotto menu.

Ecco un HTML di esempio:

<ul id="miomenu">
	<li>
		<span>Guide</span>
		<ul>
			<li>
				<span>Programmazione</span>
				<ul>
					<li>C</li>
					<li>C++</li>
				</ul>
			</li>
			<li>
				<span>Web Developing</span>
				<ul>
					<li>
						<span>HTML</span>
						<ul>
							<li><a href="cominciare.html">Per cominciare</a></li>
							<li><a href="tag.html">I tag</a></li>
						</ul>
					</li>
					<li>
						<span>PHP</span>
						<ul>
							<li><a href="interprete.html">L'interprete</a></li>
							<li><a href="database.html">I database</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="forum.html">Forum</a></li>
	<li><a href="contattami.html">Contattami</a></li>
</ul>

Questo codice è stato validato con successo dal W3C e se lo mettete ora come ora in un browser non è male, basta personalizzarlo un po’ con i CSS. … [Leggi il resto]

Menu stile applicazioni con jQuery

È assai strano per me pubblicare post di questo genere.

Ho pubblicato ancora dei tutorial ma mai sulla costruzione di pagine web.

E così questo è il primo.

Avevo promesso a Lantaca di fare questo tutorial sui menu con jQuery perché lui ha fatto il suo tema di Windows.

Così lo scopo di questo tutorial è di creare… l’ambiente desktop di GNOME (l’ambiente desktop che hanno anche distribuzioni GNU Linux). Più precisamente ho usato lo sfondo standard di Debian e anche il suo logo.

Partiamo dall’HTML: ho usato un div in alto con id topmenu contenente una lista per i vari menu principali (Applicazioni, Risorse e Sistema). Degli elementi solo il primo ha una classe con l’unico fine di mettere il logo di Debian.

Dentro ogni elemento c’era uno span.menu-item contenente il nome del menu e un div.menucontent con il contenuto che è fatto sempre a liste.

Il CSS è facile.

Al div#topmenu è stato dato il posizionamento assoluto in alto, altezza di 24px, sfondo etc.

Ai li della lista principale è stato messo float: left; per tenerli ognuno a sinistra dell’altro. … [Leggi il resto]