Benvenuto su Oceano Risorse per Webmasters
Modules
· Home
· Argomenti
· Backgrounds
· Banners
· Colorhex
· Downloads
· Fonts
· Gallery
· Gif Animate
· Javascripts
· Manuali
· Recommend Us
· Themes
· Wallpapers
· Web Links
Gallery



Partners
Hosting gratuito

Open Source software development website

HTML.it - il portale italiano sul web publishing

Gratis.it

Dynamic Drive - DHTML code library

BOORP - archivio di risorse gratuite
Shinystat
 
Javascript Fader menu
Postato da webmaster il Monday, 03 November @ 08:00:00 CET
Contributo di webmaster

Lo script di questo articolo è un bel menù con effetto dissolvenza sulle celle, compatibile con tutti i browsers. Tutto il menù verrà costruito dentro una normale tabella html a cui verranno aggiunti i richiami al codice javascript. Nulla di complicato e infinite possibilità di personalizzazione.

Per prima cosa vanno impostati i fogli di stile che gestiscono l'aspetto grafico del menù, colori di sfondo e links. Il codice va inserito fra i tags <head> della pagina:
 

 <!-- INIZIO CODICE -->  

<style>
.navbarMainHover{
background-color: #7A9EC5;
border: 1px solid #000000;
padding: 3px;
padding-left: 5px;
padding-right: 5px;
}  
.navbarMain {
background-color: #5A7EA5;
border: 1px solid #000000;
border-left: 1px solid #999999;
border-top: 1px solid #999999;
padding: 3px;
padding-left: 5px;
padding-right: 5px; 

.linkMain { 
color: white; 
font-family: Verdana, Arial, Helvetica;
font-size: 8pt; 
font-weight: bold; 

.linkSub { 
color: black; 
font-family: Verdana, Arial, Helvetica;
font-size: 8pt;
}  
.navbarSubHover { 
background-color: #D5DAE9; 
padding: 2px; 
padding-left: 5px; 
padding-right: 5px;
border: 1px solid #000000;
border-left: 1px solid #999999;
border-top: 1px solid #999999;
}  
.navbarSub { 
background-color: #ffffff;
padding: 2px;
padding-left: 5px; 
padding-right: 5px; 
border: 1px solid #ffffff;  
}  
</style> 

 <!-- FINE CODICE -->
 

L'utente può provare a modificare i parametri delle singole classi per trovare l'accostamento cromatico che più gli piace.
Poichè il codice javascript è piuttosto lungo, lo salveremo in un file js esterno che chiameremo fader.js, ecco il codice: 

 
 <!-- INIZIO CODICE -->  

mainBgColor = "#5A7EA5";
mainBgColorHover = "#7A9EC5";  
subBgColor = "#ffffff";
subBgColorHover = "#D0D7E9"; 
mainStyle = "navbarMain";
mainStyleHover = "navbarMainHover";
subStyle = "navbarSub"; 
subStyleHover = "navbarSubHover"; 
function clk(obj){
if (document.all && obj.children.tags("A").length > 0 && obj.children.tags("a")[0].href) 
obj.children.tags("A")[0].click(); 
else if (!document.all) {  
if (obj.document && obj.document.links[0]) location.href = obj.document.links[0].href; 
else if (obj.getElementsByTagName("a")){ 
var links = obj.getElementsByTagName("a"); 
if (links[0]) 
location.href = links[0].href; 


}  
function sOver(obj){  
if (obj.className){     
obj.className = subStyleHover;
if (obj.children){  
if (obj.children.tags("A").length > 0 && obj.children.tags("A")[0].href != ""){ 
obj.style.cursor = "hand";
var link = obj.children.tags("A")[0]; 
status = link.href; 
if (!obj.title) obj.title = link.href.split("/")[link.href.split("/").length - 1];

else status = obj.innerText; 

else if (obj.getElementsByTagName("a")) status = obj.getElementsByTagName("a")[0].href; 

else { 
obj.bgColor = subBgColorHover;  
if (obj.document.links[0]) status = obj.document.links[0].href; 

}  
function sOut(obj){ 
status = "";  
if (obj.className){ 
obj.className = subStyle; 

else obj.bgColor = subBgColor;  

function mOver(obj){ 
if (obj.className){ 
obj.className = mainStyleHover; 
if (obj.children){ 
if (obj.children.tags("A").length > 0 && obj.children.tags("A")[0].href != ""){ 
obj.style.cursor = "hand";  
var link = obj.children.tags("A")[0]; 
status = link.href; 
if (!obj.title) obj.title = link.href.split("/")[link.href.split("/").length - 1];

else status = obj.innerText; 

else if (obj.getElementsByTagName("a")) status = obj.getElementsByTagName("a")[0].href; 

else { 
obj.bgColor = mainBgColorHover;  
if (obj.document.links[0]) status = obj.document.links[0].href; 


function mOut(obj){ 
status = "";    
if (obj.className){ 
obj.style.cursor = ""; 
obj.className = mainStyle; 

else obj.bgColor = mainBgColor; 
}  
function cap(obj){  
if (document.layers){  
obj.captureEvents(Event.MOUSEUP); 
obj.captureEvents(Event.MOUSEOVER); 
obj.captureEvents(Event.MOUSEOUT); 
obj.onmouseup = function (e) { clk(obj); }
obj.onmouseover = function (e) { eval(obj.name.substring(0,1).toLowerCase() + "Over(obj);"); }  
obj.onmouseout = function (e) {eval(obj.name.substring(0,1).toLowerCase() + "Out(obj);"); } 



 <!-- FINE CODICE --> 

Teoricamente il codice non andrebbe modificato ma, se decidiamo di utilizzare lo script anche con Netscape, è necessario personalizzare 3 parametri:
 
mainBgColor = "#5A7EA5";
mainBgColorHover = "#7A9EC5"; 
subBgColor = "#ffffff"; 

Semplicemente i valori esadecimali di queste 3 stringhe devono essere uguali al rispettivo valore contenuto nelle classi del foglio di stile. Vediamoli nel dettaglio:

- il valore di mainBgColor = "#5A7EA5";
deve essere uguale a background-color: #5A7EA5; (nome classe nel css: .navbarMain)
- il valore di mainBgColorHover = "#7A9EC5";
deve essere uguale a background-color: #7A9EC5; (nome classe nel css: .navbarMainHover)
- il valore di subBgColor = "#ffffff";
deve essere uguale a background-color: #ffffff; (nome classe nel css: .navbarSub)

infine va detto che la stringa: subBgColorHover = "#D0D7E9"; è valida solo per Netscape e
serve per determinare il colore di sfondo (hover) delle celle di un submenù.

Fatto questo, sempre fra i tags <head> della pagina, inseriamo il richiamo html al file javascript:  

<script language="JavaScript" src="fader.js"> </script>

Non resta che inserire nel <body> il codice della tabella:  

<table cellpadding="0" cellspacing="2" border="0" width="170">
<tr>
<td class="navbarMain" onmouseover="mOver(this);" onmouseout="mOut(this);" 
onclick="clk(this)"> <ilayer><layer id="Main" width="100%" onload="cap(this)"><a 
href="http://oceano.altervista.org" class="linkMain">Oceano</a></layer></ilayer></td> 
</tr> 
<tr> 
<td class="navbarSub" onmouseover="sOver(this);" onmouseout="sOut(this);" 
onclick="clk(this)"> <ilayer><layer id="Sub" width="100%" onload="cap(this)"><a 
href="modules.php?name=Gallery" class="linkSub">Gallery</a></layer></ilayer></td>
</tr> 
</table> 

Come si può notare da un'analisi superficiale il codice è proprio quello di una comune tabella in html; la differenza viene fatta dalle classi css e dai richiami al codice javascript inseriti nelle singole celle. 
Vediamo l'esempio di una cella che contiene un livello "MAIN" del menù: 

 <td class="navbarMain" onmouseover="mOver(this);" onmouseout="mOut(this);" onclick="clk(this)">
<ilayer> <layer id="Main" width="100%" onload="cap(this)"><a href="http://oceano.altervista.org" class="linkMain">Oceano</a> 
</layer></ilayer> 
</td>

L'unica cosa da dover modificare è il link e il testo all'interno della cella stessa (in questo caso http://oceano.altervista.org e Oceano) Per inserire, invece, un livello "SUB" (con caratteristiche grafiche diverse quindi) usiamo questo codice:

<td class="navbarSub" onmouseover="sOver(this);" onmouseout="sOut(this);" onclick="clk(this)">
<ilayer><layer id="Sub" width="100%" onload="cap(this)">< a href="modules.php?name=Gallery" class="linkSub">Gallery</a>
</layer> 
</ilayer>
</td> 

Anche in questo caso modifichiamo il link e il testo all'interno della cella (modules.php?name=Gallery e Gallery).
Altre modifiche non sono necessarie.


 
Links Correlati
· Indice Javascript
· Inoltre Javascript
· News by webmaster


Articolo più letto relativo a Javascript:
Reload automatico della pagina

Valutazione Articolo
Average Score: 5
Voti: 4


Please take a second and vote for this article:

Eccellente
Molto Buono
Buono
Regolare
Cattivo

Opzioni

 Pagina Stampabile Pagina Stampabile

Associated Topics

Javascript





Questo sito è ospitato gratuitamente da Altervista
Tutti i logos e i marchi presenti in questo sito sono dei loro proprietari.
I commenti sono proprietà  di chi li ha postati, tutto il resto © 2002 by Oceano Risorse per Webmasters
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Generazione pagina: 0.07 Secondi

Theme by

© Oceanoweb