...Personalizza la tua HomePage...

Questa Sezione è Dedicata a Tutti i Webmaster Nofiti e Non

Versione Stampabile Versione PDF Versione .DOC Versione .ZIP Scrivimi i tuoi Commenti

Menù Windows in Dhtml
Autore :  Eagleyes Linguaggio :  DHTML - Dynamic HTML
Data :  20/05/2004 14:32:54 Accessi :  30
Quest'oggi vedremo come inserire un menù realizzato interamente in dhtml; graficamente assomiglia moltissimo ai menù di windows, e per il funzionamento utilizza una finestra PopUp.
Lo script non è difficile da installare, basta solo fare attenzione quando lo si adatta alla pagina in cui lo vogliamo inserire.
Per prima cosa dobbiamo inserire degli stili(CSS); il codice è il seguente:

<STYLE TYPE="text/css">
<!--
#text {
POSITION: absolute;
Z-INDEX: 1;
LEFT: 10px;
TOP: 5px;}

#iDL {
POSITION: absolute;
Z-INDEX: 1;
LEFT: 10px;
TOP: 150px;}
-->

</style>

In seguito, inseriamo questo codice all'interno del tag body
<DIV ID="iDL" CLASS="iconNav">
Apri menù
</DIV>

<div id="text">
Menù popup
</div>
<OBJECT ID="Menu1" WIDTH=0 HEIGHT=0
CLASSID="CLSID:F5131C24-E56D-11CF-B78A-444553540000"
CODEBASE="#version=1,0,0,9">
<PARAM NAME="_Version" VALUE="65536">
<PARAM NAME="_ExtentX" VALUE="2646">
<PARAM NAME="_ExtentY" VALUE="1323">
<PARAM NAME="_StockProps" VALUE="0">
</OBJECT>

<SCRIPT LANGUAGE="VBScript">
<!--
dim Site, Imgdir
Site = "http://" & location.host
Imgdir = Site + "/ie/images/topnav/"

dim menu1Ready
menu1Ready = false

sub document_onMouseover()
dim srcElement
set srcElement = window.event.srcElement
if srcElement.classname = "iconNav" then
srcElement.style.color = "#00A8FF"
window.event.cancelBubble = true
end if
end sub

sub document_onMouseout()
dim srcElement
set srcElement = window.event.srcElement
if srcElement.classname = "iconNav" then
srcElement.style.color = "black"
window.event.cancelBubble = true
end if
end sub

sub document_onClick()
if (document.all.Menu1.readyState = 4) Or (document.all.Menu1.readyState = "complete") then menu1Ready = true
dim srcElement
set srcElement = window.event.srcElement
select case srcElement.id
case "iHome"
top.location.href= Site + "/ie/default.asp"
case "iProd"
if menu1Ready then
Prod_Menu
else
productInfo()
end if
case "iDL"
if menu1Ready then
Down_Menu()
else
download()
end if
end select
end sub

sub Menu1_Onclick(id)
url = menu1.GetItemValue(id)
top.location.href=url
end sub

Sub window_onbeforeunload()
if menu1Ready then call Menu1.RemoveAllItems()
end sub

sub Ad (cde,lbl,menuitem,par)
dim temp
temp = lbl
' if lcase(cde)=MarkMenu then
' temp = ">" & temp
' else
temp = " " & temp
' end if
Menu1.AddItem cde,temp,menuitem,par
end sub

Sub Down_Menu()
Menu1.RemoveAllItems
Ad "ieDL_Over","DHTML Demos Home Page","http://www.ruleweb.com/dhtml/",""
Ad "ieDL_IE4","Internet Explorer 4.0 Demos","http://www.ruleweb.com/dhtml/",""
Ad "ieDL4_W32","Pop Out Menu","../popoutnetscape/popout.html","ieDL_IE4"
Ad "ieDL4_W16","Preview Presentation","../preview/preview.html","ieDL_IE4"
Ad "ieDL4_Mac","Sequencer JS","../sequence/sequence.html","ieDL_IE4"
Ad "ieDL4_Unix","Sequencer Active X","../Sequence/jeffsequencex.html","ieDL_IE4"
Ad "ieDL_IE4c","Internet Explorer 4.0 Components","http://www.microsoft.com/ie/ie40/download/?/ie/ie40/download/addon.htm",""
Ad "ieDL_IE3c","Netscape 4.0 Demos","",""
Ad "ieDL_citx","Drag and Drop","http://developer.netscape.com/library/examples/dynhtml/dragable/index.html","ieDL_IE3c"
Ad "ieDL_html","Horizontal Wipe","../netscape/horizontalwipe.html","ieDL_IE3c"
Ad "ieDL_shock","Animation","../netscape/animation.html","ieDL_IE3c"
Ad "ieDL_mls","Skeleton Game","../Skeleton/skeletonheadworksx.html","ieDL_IE3c"
call Menu1.Popup (100,104)
end sub

-->
</SCRIPT>

Tutte le voci del menù sono configurabili tramite il codice che abbiamo inserito nel tag body.

Ritorna


 NEWS 
12/09/2007 13:08:14
PAURA
Marco Travaglio con Gomez e Crozza ed Elio

11/09/2007 14:44:48
IL V-DAY: un evento NUOVO !!!!!
Aria fresca in Parlamento articolo del Sole24ore: http://www.ilsole24ore.com/art/SoleOnLine4/At...


28/06/2007 14:20:55
LEOPARDI SALUTI i 500
Certo ragazzi, anche noi nel nostro piccolo cresciamo, e Leopardi è il cinquecentesimo saggio nella ...


12/04/2007 11:31:15
ATTENZIONE A CheckMessenger.NET! , è una TRUFFA
Ennesito sito truffaldino: si chiama CheckMessenger e vi promette di mostrarvi se i vostri contatti ...


26/01/2007 11:58:34
AGGIORNATE TUTTE LE SEZIONI
AGGIORNATE TUTTE LE SEZIONI Sì, cari amici. Ho provveduto ad aggiornare le principali sazioni de...


:: ELENCO NEWS ::

  
Valid XHTML 1.0! Valid CSS!