utentionline
searchengine
quicklinks
WebDesigner
Tutorials ASP
Tutorials XHTML
Tutorials Javascript
Tutorials HTML-CSS
Tutorials SQL
Tutorials PHP & MySQL
AJAX applicazioni web
Web Development
Template & Layout
Non solo Web :: Blog
Portfolio Lavori
Who is Yappy?
Benvenuto nella Newsletter
libririviste
Calendario motoGP 2007
newscorsi
FAQ & Domande
newscorsi
Web Designer gratuitoCorso Web Designer Gratuito per creare siti internet trucchi, consigli, esempi pratici e template per diventare un vero web designer.
Seo Extreme 2007
Al corso nazionale "Seo Extreme 2007" troverai le ultime tecniche e strategie di Posizionamento nei motori di ricerca. Parteciperai ad un corso di alto livello dedicato a chi vuole fare posizionamento...
libririviste
Web Design Facile"Web Design Facile" di Davide Vasta è una guida pratica che conduce il lettore, passo per passo attraverso la realizzazione di un sito Internet: dalla creazione di un prototipo da mostrare al cliente fino al suo sviluppo definitivo.
WebDesigner 22
Web Designer Magazine n.22. Flash in prima linea, conoscere l'ultima versione del programma Macromedia. Inserire video Flash nelle vostre pagine. In primo piano "diventare Designer di successo".
Web Marketing
Trucchi headlines efficaci 8Trucchi headlines efficaci 7
tagclouds
Preload in Flash Importare Rss Feed esterni un XHTML tanti stili GP BETANDWIN.com De Espana Landing Page (terza parte) Tutorials Flash Mx Statistiche del sito news n.2 - 16/01/2006 Landing Page (terza parte) Corsa ed Obiettivi Mostra/Nascondi il significato dei colori corso javascript Web Designer gratuitosyndicate
RSS 2.0Atom feed
CreativeCommons
stampa l'articolo
segnala ad un amicoMenu a tendina
[09 Mag 2004]Ecco un menu a tendina adatto a tutti i browser semplice ed efficace con un codice light. Gli elementi: un menu, un po' di css ed un file .js ed ecco il risultato.
Ecco un menu a tendina adatto a tutti i browser (Internet Explorer) semplice ed efficace con un codice light.
Sappiamo che i sostenitori di Netscape e di Mozilla sono davvero pochi rispetto agli utenti di IExplorer ma non ci sentiamo di smettere di considerarli poco importanti quando basta poco per rendere le pagine sempre visibili.
Gli elementi base da realizzare sono:
:: un file menu.css per la formattazione del menu;
:: un menu da animare, contenuto nella pagina menu.html;
:: un file menu.js con il codice javascript necessario a gestire l'animazione.
Iniziamo a creare il file menu.css in cui mettiamo tutta la formattazione base della pagina.
td {background: #990000; color:#ffffff; border: 1px solid #330000;
font: bold 8pt Verdana,Arial,Helvetica,sans serif; text-align:center;}
a {color: #ffffff; text-decoration: none;}
a:visited {color: #ffffff; text-decoration: none; }
a:hover {color: #ffffff; text-decoration: underline;}
div {font: 8pt Verdana,Arial,Helvetica,sans serif; position: absolute;}
.menu {left:-800px; width: 120px; padding:10px; border: 1px dotted #000000; background-color: #ffffff;}
.menu a {color: #990000; text-decoration: none; }
.menu a:visited {color: #990000; text-decoration: none; }
.menu a:hover {color: #990000; text-decoration: underline;}
All'interno troviamo la formattazione (td, a e div) per definire il menu principale e i livelli, mentre la classe .menu definisce la formattazione dei collegamenti interni ai sotto menu. Dopo gli stili definiamo la pagina menu.htm da elaborare...
<html>
<head>
<title>Menu Dinamico a tendina</title>
<link rel="stylesheet" type="text/css" href="menu.css">
<script language="javascript" src="menu.js"></script>
</head>
<body>
I primi elementi della pagina sono ovviamente il titolo ed i collegamenti ai file: menu.css, descritto precedentemente ed al file menu.js, necessario a effettuare l'animazione dei menu.
<div style="top:0px; left:0px; width:250; height:200;" onMouseOver="setTimeout('chiudi()',500);"> </div>
Il primo elemento che andiamo ad incontrare è il livello che permetterà? di chiudere un qualunque menu aperto al passaggio del mouse. La funzione setTimeout('chiudi()',500) permette di ritardare l'effetto della chiusura di mezzo secondo.
<div style="top:0px; left:0px; width:120;">
<table width="120" border="0" cellspacing="4">
<tr><td>:: <a href="javascript:void(0)" onMouseOver="apri(1)">servizi</a> ::</td></tr>
<tr><td>:: <a href="javascript:void(0)" onMouseOver="apri(2)">prodotti</a> ::</td></tr>
<tr><td>:: <a href="javascript:void(0)" onMouseOver="apri(3)">articoli</a> ::</td></tr>
<tr><td>:: <a href="javascript:void(0)" onMouseOver="apri(4)">contatti</a> ::</td></tr>
</table>
</div>
Il livello che andiamo a sovrapporre al precedente contiene i collegamenti che attivano al passaggio del mouse onMouseOver il corrispondente menu.
L'azione javascript:void(0) permette di disattivare il collegamento href al posto del classico cancelletto # che fa ricaricare la pagina in cui ci troviamo.
<!-- menu 1 :: servizi -->
<div id="menu1" style="top: 4px;" class="menu">
<b>::</b> <a href="#">Siti Web</a><br>
<b>::</b> <a href="#">Siti Flash</a><br>
<b>::</b> <a href="#">Hosting</a><br>
</div>
<!-- menu 2 :: prodotti -->
<div id="menu2" style="top: 25px;" class="menu">
<b>::</b> <a href="#">Sito Light</a><br>
<b>::</b> <a href="#">Sito Medium</a><br>
<b>::</b> <a href="#">Sito Large</a><br>
</div>
<!-- menu 3 :: articoli -->
<div id="menu3" style="top: 46px;" class="menu">
<b>::</b> <a href="#">Javascript</a><br>
<b>::</b> <a href="#">Flash Mx</a><br>
<b>::</b> <a href="#">ASP 3.0</a><br>
<b>::</b> <a href="#">ASP Net</a><br>
</div>
<!-- menu 4 :: contatti -->
<div id="menu4" style="top: 67px;" class="menu">
<b>::</b> <a href="#">Le sedi</a><br>
<b>::</b> <a href="#">Responsabili</a><br>
<b>::</b> <a href="#">E-mail</a><br>
</div>
I livelli appena inseriti ovviamente sono i sottomenu che andremo ad aprire al passaggio del mouse sui menu principali.
<script type="text/javascript">inizializza(4);</script>
</body>
</html>
Dopo aver copiato in menu.htm anche quest'ultimo documento, salviamo il file.
Questa ultima sezione permette di definire i vari livelli, attraverso la funzione inizializza(4). Il valore che viene passato alla funzione rappresenta il numero dei menu, in qualunque momento potete aggiungere un nuovo menu ed aggiornare solo tale valore e la vostra pagina funzionerà? perfettamente.
Le tre funzioni che quindi dovranno essere definite all'interno di menu.js devono essere:
[1] - inizializza() che permetterà? di avere una traccia dei menu inseriti nel documento;
[2] - apri(i) che permetterà? di aprire il menu indicato dal parametro;
[3] - chiudi() che permette di chiudere il sottomenu corrente aperto;
var mostra=new Array();
var corrente=0;
var ie4 = document.all;
var ns4 = document.layers;
var ns6 = document.getElementById;
La prima parte permette di inizializzare le variabili necessarie al calcolo in particolare il vettore mostra memorizza il nome dei menu a disposizione, mentre le variabili boleane ie4 ,ns4 ed ns6 (contengono solo vero o falso) permettono di riconoscere quale browser sta utilizzando l'utente.
Il vettore corrente, inizialmente impostato a "0", permette invece di conservare in memoria quale menu è attualmente aperto.
function inizializza(num_menu) {
for(i=1;i<=num_menu;i++){
if (ie4) eval("mostra["+i+"] = document.all.menu"+i+";");
if (ns4) eval("mostra["+i+"] = document.menu"+i+";");
if (ns6) eval("mostra["+i+"] = document.getElementById('menu"+i+"').style;");
}
}
La funzione inizializza(4) quindi memorizza il nome e le caratteristiche del livello, in funzione del browser nel vettore mostra.
Il ciclo for permette di velocizzare questa operazione attraverso l'indice i variabile fra 1 e il numero di menu inseriti.
function chiudi() {
if (corrente!=0) {
var oggetto;
oggetto = eval("mostra["+corrente+"]");
oggetto.left = -800;
corrente = 0;
}
}
La funzione chiudi() inizialmente controlla se un menu è aperto (corrente!=0) in tal caso modifica la posizione di questo elemento con oggetto.left = -800; ed imposta corrente uguale a zero (tutti i menu sono chiusi).
function apri(numero) {
chiudi();
var oggetto;
oggetto = eval("mostra["+numero+"]");
oggetto.left = 120;
corrente = numero;
}
La funzione apri(i) come prima cosa richiama la funzione chiudi() per il menu precedentemente aperto, e seleziona il nuovo menu e lo colloca nella pagina. Il comando corrente = numero; quindi memorizza il numero del menu attualmente in uso.
Salvate quindi anche questo documento, e aprite il fine "menu.htm" per collaudare il nuovo menu da utilizzare per il vostro sito.
