Pagina Iniziale | Preferiti Comunity: Login | Registrati | Newsletter | Forum | Concorsi Newsgroup
Canali: Hardware | Software | Files | Webmaster | Cellulari | Shop
Nel sito: News | Articoli | Files | Manuali | Consigli PC | Schede cellulari | Programmaz. | Hosting | Motori Ricerca | Glossario | Link
Servizi: Shopping | Forum | Crea un BLOG | Cartucce Compatibili | Tool News |   Sponsor: Automazione Industriale
  Articoli

Recensioni
Consigli per PC


  News e files

Software
Telefonia
Internet
Tecnologia
Files e Download


  Manualistica

Guide HW/SW
Scripts ASP
Scripts HTML
Scripts Java
Scripts Delphi
Glossario


  Shopping

Hardware
Software e Giochi
Elettronica
Cinema e Film
Console e Accessori
Prodotti Ufficio
Formazione e Corsi

Tieniti aggiornato sul mondo della tecnologia con la nostra newsletter!
La tecnologia sulla tua
casella e-mail

[Info Newsletter]


Concessionaria Pubblicitaria

<< News Precedente [Fine Pagina] News Successiva >>
Menu orizzontale dinamico in Dhtml

Un articolo di: Fonte Esterna del 25/03/2003      Letture: 22509

Autore : Luca Ruggiero

Premessa
In questo articolo analizzeremo il modo in cui è possibile realizzare un menu orizzontale dinamico, per intenderci, sullo stile delle applicazioni Windows, i famosi menu File - Modifica - Visualizza - ecc...
Premetto che lo scopo finale non è quello di fornire lo script "bello e pronto da servire in tavola", ma solo di imparare a ragionare sulla tecnica che si utilizza per realizzare una simile "applicazione". il menu in questione, infatti, è compatibile solo con Microsoft Internet Explorer 5.0 e versioni superiori (credo anche con la versione 4.0).
Tuttavia, alla fine dell'articolo mostrerò anche la funzione "tradotta" per Netscape Navigator. Non mi sono preoccupato di fornire al menù particolari stilizzazioni, è comunque sufficiente una discreta conoscenza dei Fogli di stile Css per renderlo più aggraziato ed accattivante.

Concettualizzazione del problema
La realizzazione del menu in questione prevede l'utilizzo di codice Html per creare le voci principali (sempre visibili) e le voci dei sottomenu (inizialmente nascoste, visibili solo al passaggio del mouse sulla rispettiva voce principale).
Grazie al codice Css possiamo lavorare sulla visibilità dei sottomenu e sul loro posizionamento all'interno della pagina (nonchè all'estetica dell'intero menu, cosa che conto sarà vostra cura fare). Ovviamente dinamizzeremo l'applicazione con Javascript. Per maggior chiarezza divideremo in tre distinti file i suddetti codice.

Il file menu.htm è il file di output su cui costruiremo fisicamente il menu. In questo stesso file includeremo i richiami ai file esterni (di seguito descritti nelle loro funzionalità), onde effettuare eventuali modifiche, sia stilistiche che funzionali, agendo una sola volta per trovare il menu aggiornato in tutte le pagine che lo conterranno.
Il file menu.css si preoccupa di impostare lo stile generico degli elementi Html del menu, nonchè di collaborare con Javascript per far fronte alle funzionalità pratiche.
Il file menu.js contiene il codice standard per il funzionamento del menu.

Adesso al lavoro!

Costruzione fisica del menu: il file menu.htm
Creiamo un nuovo file Html e salviamolo come menu.htm; inseriamo tra i Tag e i richiami verso i file Css e Javascript, le cui funzionalità sono state descritte nel paragrafo precedente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="it">
 
    <title>Menu orizzontale dinamico in Dhtml</title>
    <link rel="stylesheet" type="text/css" href="menu.css">
    <script language="javascript" type="text/javascript"
    src="menu.js"></script>
 </head>
...

Costruiamo adesso la struttura fisica delle voci principali del menu:


<div style="background-color: #EEEEEE;
border-bottom: Solid 1px #000000;">
   <a href="javascript:void(0)" onMouseOver="Apri(0)"
   id="principale">MENU # 1</a> |
   <a href="javascript:void(0)" onMouseOver="Apri(1)" 
   id="principale">MENU # 2</a> |
   <a href="javascript:void(0)" onMouseOver="Apri(2)" 
   id="principale">MENU # 3</a>
</div>

Impostiamo un layer di tipo

con una qualsiasi stilizzazione (potete assegnargli una classe, è lo stesso) in cui inseriamo i link rappresentanti le voci principali del menu; ad ognuno di questi assegniamo un identificativo di tipo id con valore principale: questo identificativo ci servirà in seguito quando analizzeremo lo script; all'evento mouse-over lanciamo la funzione Apri() con un incremento numerico come parametro.

E' importante sottolineare che l'esempio di menu in questione prevede necessariamente un layout di pagina posizionato staticamente sul margine sinistro della pagina. E' inoltre opportuno impostare la distanza dal margine superiore e dal margine sinistro della pagina a zero (0) pixel: in funzione di eventuali modifiche di questi valori, bisognerà modificare le distanze ed il posizionamento degli elementi Html nei codici Css e Javascript, onde rendere il tutto uniforme.

Supponiamo quindi, per praticità, che i margini di tutte le pagine che conterranno il menu siano impostati a zero (0) pixel:

...
<body topmargin="0" leftmargin="0">
...
In un qualsiasi punto della pagina dobbiamo inserire un altro layer di tipo
posizionato dinamicamente, al cui evento mouse-over deve corrispondere al funzione Chiudi() che esamineremo in seguito; ecco il codice:
<div style="position: Absolute; width: 
100%; height: 20%;" onMouseOver="Chiudi()"> </div>
Costruiamo adesso i sottomenu:
<!-- MENU # 1 -->
<div id="sottomenu" style="left: 1px;">
   <a href="pagina1.html">Pagina # 1</a><br>
   <a href="pagina2.html">Pagina # 2</a><br>
   <a href="pagina3.html">Pagina # 3</a><br>
</div>

<!-- MENU # 2 -->
<div id="sottomenu" style="left: 69px;">
   <a href="pagina4.html">Pagina # 4</a><br>
   <a href="pagina5.html">Pagina # 5</a><br>
   <a href="pagina6.html">Pagina # 6</a><br>
</div>

<!-- MENU # 3 -->
<div id="sottomenu" style="left: 138px;">
   <a href="pagina7.html">Pagina # 7</a><br>
   <a href="pagina8.html">Pagina # 8</a><br>
   <a href="pagina9.html">Pagina # 9</a><br>
</div>

La stilizzazione del Tag

è in qualche modo indipendente dal codice Css necessario per la stilizzazione dinamica del menu; tuttavia è necessario stabilire delle dimensioni ed un carattere standard, onde poter stabilire misure e distanze per l'accorpamento dei vari elementi Html del menu.

La classe ID #principale si limita a stilizzare i link del menu principale, ovvero le voci di menu al cui passaggio del mouse si attiva il relativo sottomenu.

La classe ID #sottomenu, invece, è necessaria per il posizionamento assoluto dei sottomenu e per impostarli nascosti al caricamento, quindi, le istruzioni veramente necessarie per compiere tali operazioni sono solo


#sottomenu {
   position: Absolute;
   visibility: Hidden;
   width: 120px;
   padding: 1px;
   border: Solid 1px #000000;
}

mentre il resto è del tutto personalizzabile ed ampliabile.

Dinamizzazione Javascript: il file menu.js
Come già accennato nelle prime righe di questo Articolo, andiamo ad analizzare nello specifico le istruzioni necessarie per il funzionamento del menu con Microsoft Internet Explorer; in seguito analizzeremo la "traduzione" valida per Netscape Navigator.

Il codice completo e commentato è riportato di seguito:



var quanti = 3; // Imposta il numero di menu e di sottomenu
var i;

// Il parametro "conta" serve per indicizzare i menu principali
function Apri(conta)
{
   if(document.all) // Identifichiamo
                             // Microsoft Internet Explorer
   {
      var elemento = event.toElement;
      var mostra = document.all.sottomenu[conta];      
          mostra.style.visibility = "visible";         
          mostra.style.top = 15;      
             for (i=0; i<quanti; i++)
             {
                aperto = document.all.sottomenu[i];
                menu = document.all.principale[i];             
                   if (i != conta)
                   {
                      aperto.style.visibility = "hidden";
                   }
             }
   }
}

// Con la stessa filosofia impostiamo lo stile 
//"nascosto" sul sottomenu aperto
function Chiudi()
{
   for (i=0; i<quanti; i++)
   {
      if (document.all)
      {
         document.all.sottomenu[i].style.visibility = "hidden";
         menu = document.all.principale[i];
       }
   }
}

I commenti al codice appena presentato lasciano poco spazio ad ulteriori commenti, le routine sono semplici e formattate in maniera chiara e leggibile, ma funziona solo con Microsoft Internet Explorer; come predetto, nel prossimo paragrafo integreremo le routine appena presentate con le funzioni valide per Netscape Navigator.

"Traduzione" dello script valida per Netscape Navigator
La routine di seguito presentata va integrata nella funzione Apri(), utile per l'apertura del menu


if (document.layers)
{
   mostra = document.layers[x+1];
   mostra.visibility = "show";
   mostra.top= 15;
      for (i=1; i<=quanti; i++)
      {
          aperto = document.layers[i];
             if (i != (x + 1))
             { 
                 aperto.visibility = "hide";
             }
      }
}
Di seguito, invece, presento la routine di chiusura del menu valida per Netscape Navigator

if (document.layers)
{
    document.layers[i+1].visibility = "hide";
}



[Indietro]    [Su]      [Home]      [Commenti]      [V. Stampabile]

Commento di Anonimo, scritto il 21/07/2004 alle 09:44:19
uff.....

Commento di Anonimo (ip: 82.185.52.234), scritto il 15/04/2005 alle 16:03:47
BASTA TUTTI I SITI WEB HANNO LO STESSO SCRIPT!!! AGGIORNATEVI!

Commento di Samuel Zilli, scritto il 01/05/2005 alle 02:37:02
Questo articolo proviene da un collaboratore esterno, è probabile che l'abbia pubblicato anche su altri siti.
Poichè questo servizio ti viene reso gratuitamente, se pensi che non sia adeguato alle tue aspettative puoi semplicemente evitarlo che non ti costa niente. Se invece vuoi collaborare puoi inviarci un tuo articolo aggiornato come preferisci e saremo felici di pubblicarlo a vantaggio di tutti.

Commento di Anonimo (ip: 151.46.38.236), scritto il 26/06/2005 alle 01:04:17

Salve, sto cercando di capire come costruire un "mouse over",
che dia questo risultato : Se ho una mappa di un appartamento generale,
passando con il mouse vedo il dettaglio della poltrone il colore la descrizione
del materiale oppure il costo che compare immediatamente vicino al disegno
leggermente in alto ed in diagonale... > :/ sto cercando di migliorare il mio dito
con queste procedure ..

Commento di Anonimo (ip: 213.140.22.69), scritto il 13/07/2005 alle 13:23:18
utile e semplice,l'ideale per chi e' alle prime arti.......un buon inizio;0)

Commento di Anonimo (ip: 62.101.100.5), scritto il 14/03/2006 alle 14:42:48
Uao, stupendo...non avevo mai pensato al tag div per chiudere i menu...
prima mi basavo sul mouseout del menu per chiuderlo, ma la cosa mi dava problemi in caso di multilivelli...cosi va benissimo! ^__^ GRAZIE

Commento di Anonimo (ip: 87.11.25.86), scritto il 01/08/2006 alle 20:58:23
buono

Commento di Anonimo (ip: 87.11.248.114), scritto il 18/08/2006 alle 23:07:11
scusate qualcuno mi sa dare un sito dove si copiano i codici html???

Commento di Anonimo (ip: 222.147.188.247), scritto il 25/01/2007 alle 01:53:09
Eccone uno:
http://www.azpoint.net/manuali/programmazione/4949/Menu-orizzontale-dinamico-in-Dhtml.asp

Commenta questa notizia:
Non hai ancora fatto il
Login, puoi inserire commenti solo come anonimo.
ATTENZIONE: il tuo IP verrà memorizzato e mostrato a fianco del commento; con la pressione del tasto invia commento si esprime il consenso alla pubblicazione di tale informazione personale.
A discrezione dello staff, i commenti ritenuti non adatti od offensivi potranno essere rimossi. Nel caso di utilizzo di espressioni volgari od offensive il comportamento verrà segnalato al provider interessato.
Se non ti sei ancora registrato, cosa aspetti? Registrati subito.

Da ora puoi discutere dei problemi informatici anche sul nostro FORUM

Testo del commento:


  News correlate
 Guida a Front Page 2000
 Guida al C++
 Menu orizzontale dinamico in Dhtml
 Corso C++: elementi lessicali
 Corso C++: introduzione
 Turbo Pascal
 Delphi: impariamo a programmare
 Lezioni e programmazione in Assembler
  Ultime dal Forum

bliss essay katherine mansfield
m tech thesis report pdf
essayer lunettes en ligne ray ban
ppt compare contrast essay
umd thesis online submission
should i major in creative writing
Beschreibung levitra
good topic research paper american government
essay on myself in french with english translation

Comunicazioni / Note Legali / Staff / Collabora / Pubblicità / Privacy / Contatti


Triboo Media s.r.l. (società socio unico) - Viale Sarca 336 - Edificio 16, 20126 Milano (MI) Cap. Soc. 1.250.000,00 euro i.v. - P.IVA, C.F. e CCIAA di Milano IT06933670967 - REA MI-1924178 tel. +39 02 64741470 - fax +39 02 64741494 Società sottoposta alla direzione e coordinamento di TRIBOO SPA - all rights reserved CAP. SOC. EURO 28.740.210 I.V. - P.IVA 02387250307 - COD. FISC. e numero iscrizione al registro delle imprese CCIAA MI : 02387250307 tel.+39 02 64741401 - fax + 39 02 64741491. Utenti Connessi: 179


Pagina creata in 0,27sec. Powered by JuiceADV S.r.l.

Stats v0.1 (0,016sec.)