- Home Page
- > Script DHTML
- > Script DHTML Menu
- > Toolbar Menu
Toolbar Menu
Menu similar to windows programs toolbar. Beautiful but hard to configure...
<HTML><HEAD><TITLE>Esempio 022</TITLE>
<LINK href="scripts/navbar.css" type=text/css rel=stylesheet>
</HEAD>
<BODY bgcolor="#C6DDF9"><!--msnavigation-->
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 bgcolor="#C6DDF9">
<TBODY>
<TR>
<TD>
<P align=center><!-- Associate the library with the page -->
<SCRIPT language=JavaScript src="scripts/menubar.js"></SCRIPT>
<TABLE onselectstart="return false" id=menuBar onkeydown=processKey()
onmouseover=doHighlight(event.toElement)
style="LEFT: 0px; POSITION: absolute; TOP: 0px" onclick=processClick()
onmouseout=doCheckOut()>
<TBODY>
<TR>
<TD class=root noWrap>Main
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='Return to the Home page'; return true"
onclick="location.href='http://members.tripod.com/servais/'"
onmouseout="window.status=''; return true" noWrap>Home</TD></TR>
<TR>
<TD onmouseover="window.status='Search this site'; return true"
onclick="location.href='search.htm'"
onmouseout="window.status=''; return true" noWrap>Search</TD></TR>
<TR>
<TD
onmouseover="window.status='Some books which may prove helpful'; return
true"
onclick="location.href='furtherreading.htm'"
onmouseout="window.status=''; return true" noWrap>Further
Reading</TD></TR>
<TR>
<TD
onmouseover="window.status='Apply for my award & see what awards
it has won'; return true"
onclick="location.href='awards.htm'"
onmouseout="window.status=''; return true" noWrap>Awards</TD></TR>
<TR>
<TD
onmouseover="window.status='Some instructions and graphics for linking to
this site'; return true"
onclick="location.href='linkingmethods.htm'"
onmouseout="window.status=''; return true" noWrap>Linking
Methods</TD></TR>
<TR>
<TD
onmouseover="window.status='See how this site was made'; return true"
onclick="location.href='credits.htm'"
onmouseout="window.status=''; return true"
noWrap>Credits</TD></TR></TBODY></TABLE></TD>
<TD class=root noWrap>Stationery
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='A brief introduction to Stationery'; return
true"
onclick="location.href='stationery.html'"
onmouseout="window.status=''; return true"
noWrap>Introduction</TD></TR>
<TR>
<TD noWrap><SPAN class=more>4</SPAN>FAQ
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='Stationery FAQ Contents'; return true"
onclick="location.href='statfaq.htm'"
onmouseout="window.status=''; return true" noWrap>FAQ
Contents</TD></TR>
<TR>
<TD
onmouseover="window.status='How to set up OE properly'; return true"
onclick="location.href='oesetup.htm'"
onmouseout="window.status=''; return true" noWrap>OE
Setup</TD></TR>
<TR>
<TD
onmouseover="window.status='How to load stationery properly'; return true"
onclick="location.href='loadstationery.htm'"
onmouseout="window.status=''; return true" noWrap>How do
I load Stationery</TD></TR>
<TR>
<TD
onmouseover="window.status='What programs are needed to make stationery';
return true"
onclick="location.href='requiredprogs.htm'"
onmouseout="window.status=''; return true"
noWrap>Required Programs</TD></TR>
<TR>
<TD
onmouseover="window.status='About the Arach Toolbars'; return true"
onclick="location.href='toolbars.htm'"
onmouseout="window.status=''; return true" noWrap>Arach
Toolbars</TD></TR>
<TR>
<TD
onmouseover="window.status='About the FrontPage Toolbars'; return true"
onclick="location.href='fptoolbars.htm'"
onmouseout="window.status=''; return true"
noWrap>FrontPage Toolbars</TD></TR>
<TR>
<TD
onmouseover="window.status='About the FP Express Toolbars'; return true"
onclick="location.href='fpetoolbars.htm'"
onmouseout="window.status=''; return true" noWrap>FP
Express Toolbars</TD></TR>
<TR>
<TD
onmouseover="window.status='How to save stationery in a re-usable format';
return true"
onclick="location.href='savstationery.htm'"
onmouseout="window.status=''; return true" noWrap>How do
I save</TD></TR>
<TR>
<TD
onmouseover="window.status='How to create your own stationery'; return true"
onclick="location.href='makestationery.htm'"
onmouseout="window.status=''; return true" noWrap>How do
I make Stationery</TD></TR>
<TR>
<TD noWrap><SPAN class=more>4</SPAN>All about Fonts
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='How to specify a default font for your stationery';
return true"
onclick="location.href='allaboutfonts.htm'"
onmouseout="window.status=''; return true"
noWrap>Setting the Default</TD></TR>
<TR>
<TD
onmouseover="window.status='How to Embed a Font in Outlook Express 4'; return
true"
onclick="location.href='embedfonts4.htm'"
onmouseout="window.status=''; return true"
noWrap>Embed Fonts OE4</TD></TR>
<TR>
<TD
onmouseover="window.status='How to Embed a Font in Outlook Express 5'; return
true"
onclick="location.href='embedfont5.htm'"
onmouseout="window.status=''; return true"
noWrap>Embed Fonts OE5</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD noWrap><SPAN class=more>4</SPAN>How do I use sound
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='Embedding sound in OE4'; return true"
onclick="location.href='embedsound.htm'"
onmouseout="window.status=''; return true"
noWrap>Outlook Express 4</TD></TR>
<TR>
<TD
onmouseover="window.status='Embedding sound in OE5'; return true"
onclick="location.href='soundoe5.htm'"
onmouseout="window.status=''; return true"
noWrap>Outlook Express 5</TD></TR>
<TR>
<TD
onmouseover="window.status='Switching between sounds in OE4'; return true"
onclick="location.href='changemusic.htm'"
onmouseout="window.status=''; return true"
noWrap>Changing Sounds (OE4)</TD></TR>
<TR>
<TD
onmouseover="window.status='Using time to delay sounds in OE4'; return true"
onclick="location.href='timingsounds.htm'"
onmouseout="window.status=''; return true"
noWrap>Timing Sounds (OE4)</TD></TR>
<TR>
<TD
onmouseover="window.status='Using many sounds in OE4'; return true"
onclick="location.href='multimusic.htm'"
onmouseout="window.status=''; return true"
noWrap>Multiple
Sounds(OE4)</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD
onmouseover="window.status='How to make your background move'; return true"
onclick="location.href='bgrscroll.htm'"
onmouseout="window.status=''; return true"
noWrap>Background Scroll</TD></TR>
<TR>
<TD
onmouseover="window.status='How to use Java Applets in your stationery';
return true"
onclick="location.href='javaapplets.htm'"
onmouseout="window.status=''; return true" noWrap>Java
Applets</TD></TR>
<TR>
<TD
onmouseover="window.status='The facts about top borders'; return true"
onclick="location.href='topborders.htm'"
onmouseout="window.status=''; return true" noWrap>Top
Borders</TD></TR>
<TR>
<TD
onmouseover="window.status='How to create & use a table'; return
true"
onclick="location.href='tables.htm'"
onmouseout="window.status=''; return true"
noWrap>Tables</TD></TR>
<TR>
<TD
onmouseover="window.status='How to create & use a marquee'; return
true"
onclick="location.href='marquees.htm'"
onmouseout="window.status=''; return true"
noWrap>Marquees</TD></TR>
<TR>
<TD
onmouseover="window.status='All about signatures'; return true"
onclick="location.href='mysig.htm'"
onmouseout="window.status=''; return true"
noWrap>Signatures</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD
onmouseover="window.status='Links to other stationery & related
websites'; return true"
onclick="location.href='links.htm'"
onmouseout="window.status=''; return true"
noWrap>Links</TD></TR></TBODY></TABLE></TD>
<TD class=root noWrap>Download
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='Go to the Downloads Page'; return true"
onclick="location.href='downloads.htm'"
onmouseout="window.status=''; return true" noWrap>Downloads
Page</TD></TR>
<TR>
<TD
onmouseover="window.status='Download the Arach toolbars'; return true"
onclick="location.href='files/toolbars302.zip'"
onmouseout="window.status=''; return true" noWrap>Arach
Toolbars</TD></TR>
<TR>
<TD
onmouseover="window.status='Download the FP toolbars'; return true"
onclick="location.href='files/fpadd-ons.zip'"
onmouseout="window.status=''; return true" noWrap>FP
Toolbars</TD></TR>
<TR>
<TD
onmouseover="window.status='Download the FPE toolbars'; return true"
onclick="location.href='files/fpeadd-ons.zip'"
onmouseout="window.status=''; return true" noWrap>FPE
Toolbars</TD></TR>
<TR>
<TD
onmouseover="window.status='Download the EOT files for font embedding';
return true"
onclick="location.href='files/eots.zip'"
onmouseout="window.status=''; return true" noWrap>EOT
Files</TD></TR>
<TR>
<TD noWrap><SPAN class=more>4</SPAN>Stationery (for OE 4)
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='See previews of the stationery'; return true"
onclick="location.href='downloads.htm#Stationery'"
onmouseout="window.status=''; return true"
noWrap>Previews</TD></TR>
<TR>
<TD
onmouseover="window.status='Download some stationery'; return true"
onclick="location.href='files/pwfantasy.zip'"
onmouseout="window.status=''; return true" noWrap>Pat
Walker Set 1</TD></TR>
<TR>
<TD
onmouseover="window.status='Download some stationery'; return true"
onclick="location.href='files/pwwestern.zip'"
onmouseout="window.status=''; return true" noWrap>Pat
Walker Set 2</TD></TR>
<TR>
<TD
onmouseover="window.status='Download some stationery'; return true"
onclick="location.href='files/pwother.zip'"
onmouseout="window.status=''; return true" noWrap>Pat
Walker Set 3</TD></TR>
<TR>
<TD
onmouseover="window.status='Download some stationery'; return true"
onclick="location.href='files/pwfantasy2.zip'"
onmouseout="window.status=''; return true" noWrap>Pat
Walker Set 4</TD></TR>
<TR>
<TD
onmouseover="window.status='Download some stationery'; return true"
onclick="location.href='files/memorialday.zip'"
onmouseout="window.status=''; return true" noWrap>T.E.
Brewer 1</TD></TR>
<TR>
<TD
onmouseover="window.status='Download some stationery'; return true"
onclick="location.href='files/joec1.zip'"
onmouseout="window.status=''; return true" noWrap>Joe
Cilinceon Set 1</TD></TR>
<TR>
<TD
onmouseover="window.status='Download some stationery'; return true"
onclick="location.href='files/joec2.zip'"
onmouseout="window.status=''; return true" noWrap>Joe
Cilinceon Set 2</TD></TR>
<TR>
<TD
onmouseover="window.status='Download some stationery'; return true"
onclick="location.href='files/nrbands1.zip'"
onmouseout="window.status=''; return true" noWrap>Night
Raven Set 1</TD></TR>
<TR>
<TD
onmouseover="window.status='Download some stationery'; return true"
onclick="location.href='files/nrmusic2.zip'"
onmouseout="window.status=''; return true" noWrap>Night
Raven Set 2</TD></TR>
<TR>
<TD
onmouseover="window.status='Download some stationery'; return true"
onclick="location.href='files/nrbands3.zip'"
onmouseout="window.status=''; return true" noWrap>Night
Raven Set 3</TD></TR>
<TR>
<TD
onmouseover="window.status='Download some stationery'; return true"
onclick="location.href='files/nrbands4.zip'"
onmouseout="window.status=''; return true" noWrap>Night
Raven Set 4</TD></TR>
<TR>
<TD
onmouseover="window.status='Download some stationery'; return true"
onclick="location.href='files/svenwarriors1.zip'"
onmouseout="window.status=''; return true" noWrap>Sven
Set 1</TD></TR>
<TR>
<TD
onmouseover="window.status='Download some stationery'; return true"
onclick="location.href='files/svenwarriors2.zip'"
onmouseout="window.status=''; return true" noWrap>Sven
Set 2</TD></TR>
<TR>
<TD
onmouseover="window.status='Download some stationery'; return true"
onclick="location.href='files/svendiversities.zip'"
onmouseout="window.status=''; return true" noWrap>Sven
Set 3</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD noWrap><SPAN class=more>4</SPAN>Stationery (for OE 5)
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class=disabled
onmouseover="window.status='Download some Stationery'; return true"
onmouseout="window.status=''; return true" noWrap>Coming
Soon</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD
onmouseover="window.status='Download the troubleshooter for use on your
own site'; return true"
onclick="location.href='files/troubleshooter.zip'"
onmouseout="window.status=''; return true"
noWrap>Troubleshooter</TD></TR>
<TR>
<TD
onmouseover="window.status='Download the colour previewer for use on your
own site'; return true"
onclick="location.href='files/colourchart.zip'"
onmouseout="window.status=''; return true" noWrap>Colour
Previewer</TD></TR>
<TR>
<TD
onmouseover="window.status='Download the ChaptersGLOBE.com link for easier
access'; return true"
onclick="location.href='files/chapters.zip'"
onmouseout="window.status=''; return true" noWrap>Chapters
Link</TD></TR></TBODY></TABLE></TD>
<TD class=root noWrap>Utility
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='Use the Troubleshooter'; return true"
onclick="location.href='troubleshooter.html'"
onmouseout="window.status=''; return true"
noWrap>Troubleshooter</TD></TR>
<TR>
<TD
onmouseover="window.status='Use the Colour Previewer'; return true"
onclick="location.href='colourchart.html'"
onmouseout="window.status=''; return true" noWrap>Colour
Preview</TD></TR>
<TR>
<TD
onmouseover="window.status='Use the Universal Currency Converter'; return
true"
onclick="window.open ('currency.htm','' , 'toolbar=no, location=no, directories=no,
menubar=no, width=500, height=400')"
onmouseout="window.status=''; return true" noWrap>Currency
Converter</TD></TR></TBODY></TABLE></TD>
<TD class=root noWrap>Toolbars
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD noWrap><SPAN class=more>4</SPAN>Arach
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='Introduction to the Arach toolbars'; return
true"
onclick="location.href='toolbars.htm'"
onmouseout="window.status=''; return true"
noWrap>About</TD></TR>
<TR>
<TD
onmouseover="window.status='Download the Arach toolbars'; return true"
onclick="location.href='files/toolbars302.zip'"
onmouseout="window.status=''; return true"
noWrap>Download</TD></TR>
<TR>
<TD
onmouseover="window.status='Read the Instruction Manual'; return true"
onclick="location.href='arachtoolbars/arach3instructions.htm'"
onmouseout="window.status=''; return true"
noWrap>Instructions</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD noWrap><SPAN class=more>4</SPAN>FrontPage
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='Introduction to the FP toolbars'; return true"
onclick="location.href='fptoolbars.htm'"
onmouseout="window.status=''; return true"
noWrap>About</TD></TR>
<TR>
<TD
onmouseover="window.status='Download the FP toolbars'; return true"
onclick="location.href='files/fpadd-ons.zip'"
onmouseout="window.status=''; return true"
noWrap>Download</TD></TR>
<TR>
<TD class=disabled
onmouseover="window.status='Read the Instruction Manual'; return true"
onmouseout="window.status=''; return true"
noWrap>Instructions</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD noWrap><SPAN class=more>4</SPAN>FP Express
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='Introduction to the FPE toolbars'; return true"
onclick="location.href='fpetoolbars.htm'"
onmouseout="window.status=''; return true"
noWrap>About</TD></TR>
<TR>
<TD
onmouseover="window.status='Download the FPE toolbars'; return true"
onclick="location.href='files/fpeadd-ons.zip'"
onmouseout="window.status=''; return true"
noWrap>Download</TD></TR>
<TR>
<TD class=disabled
onmouseover="window.status='Read the Instruction Manual'; return true"
onmouseout="window.status=''; return true"
noWrap>Instructions</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD onmouseover="window.status='Send me feedback'; return true"
onclick="location.href='feedback.htm'"
onmouseout="window.status=''; return true"
noWrap>Feedback</TD></TR></TBODY></TABLE></TD>
<TD class=root noWrap>Newsletter
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='An introduction to my Newsletter'; return true"
onclick="location.href='newsletter.htm'"
onmouseout="window.status=''; return true" noWrap>About</TD></TR>
<TR>
<TD
onmouseover="window.status='Browse the archive of past newsletters'; return
true"
onclick="location.href='archive.htm'"
onmouseout="window.status=''; return true"
noWrap>Archive</TD></TR></TBODY></TABLE></TD>
<TD class=root noWrap>Community
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='Participate in my forum'; return true"
onclick="location.href='http://venus.beseen.com/boardroom/b/26704/'"
onmouseout="window.status=''; return true" noWrap>Discussion
Forum</TD></TR>
<TR>
<TD noWrap><SPAN class=more>4</SPAN>Free Email
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='Get a free Web-based email account @stationery.zzn.com';
return true"
onclick="location.href='freeemail.htm'"
onmouseout="window.status=''; return true"
noWrap>About</TD></TR>
<TR>
<TD
onmouseover="window.status='Login to your free email account'; return true"
onclick="location.href='freeemail.htm#Login'"
onmouseout="window.status=''; return true"
noWrap>Login</TD></TR>
<TR>
<TD
onmouseover="window.status='Sign up for your free Email account'; return
true"
onclick="location.href='freeemail.htm#signup'"
onmouseout="window.status=''; return true" noWrap>Sign
Up</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD
onmouseover="window.status='Participate in my Survey'; return true"
onclick="location.href='survey.htm'"
onmouseout="window.status=''; return true" noWrap>Survey</TD></TR>
<TR>
<TD
onmouseover="window.status='View the Week End Theme Retrospective'; return
true"
onclick="location.href='http://members.tripod.com/servaism/retrospect.html'"
onmouseout="window.status=''; return true" WRAP
NO>Retrospect</TD></TR>
<TR>
<TD onmouseover="window.status='Sign my Guestbook'; return true"
onclick="location.href='http://Mars.guestworld.tripod.com/wgb/wgbsign.dbm?owner=servais'"
onmouseout="window.status=''; return true" noWrap>Sign the
Guestbook</TD></TR>
<TR>
<TD onmouseover="window.status='Read my Guestbook'; return true"
onclick="location.href='http://Mars.guestworld.tripod.com/wgb/wgbview.dbm?owner=servais'"
onmouseout="window.status=''; return true" noWrap>Read the
Guestbook</TD></TR>
<TR>
<TD
onmouseover="window.status='Leave me a private message'; return true"
onclick="location.href='http://members.tripod.com/bin/answering_machine?member_name=servais'"
onmouseout="window.status=''; return true" noWrap>Answering
Machine</TD></TR>
<TR>
<TD
onmouseover="window.status='An ICQ Users Group for people interested in
Stationery'; return true"
onclick="location.href='icqgroup.htm'"
onmouseout="window.status=''; return true" noWrap>ICQ
Group</TD></TR>
<TR>
<TD
onmouseover="window.status='Let me know what you think of the site'; return
true"
onclick="location.href='feedback.htm'"
onmouseout="window.status=''; return true"
noWrap>FeedBack</TD></TR>
<TR>
<TD onmouseover="window.status='Send me an email'; return true"
onclick="location.href='mailto:sven@earthling.net'"
onmouseout="window.status=''; return true" noWrap>Send Me
Mail</TD></TR></TBODY></TABLE></TD>
<TD class=root noWrap>Game
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='Play my Duck Hunt Game'; return true"
onclick="location.href='duckhunt3.htm'"
onmouseout="window.status=''; return true" noWrap>Duck
Hunt</TD></TR></TBODY></TABLE></TD>
<TD class=root noWrap>Other
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD
onmouseover="window.status='Various science & technology links';
return true"
onclick="location.href='tech.html'"
onmouseout="window.status=''; return true" noWrap>Tech</TD></TR>
<TR>
<TD
onmouseover="window.status='Various font links'; return true"
onclick="location.href='font.html'"
onmouseout="window.status=''; return true" noWrap>Fonts</TD></TR>
<TR>
<TD
onmouseover="window.status='Some space set aside for my Wife'; return true"
onclick="location.href='chelle.html'"
onmouseout="window.status=''; return true" noWrap>Chelle</TD></TR>
<TR>
<TD
onmouseover="window.status='Some games I enjoy'; return true"
onclick="location.href='games.html'"
onmouseout="window.status=''; return true"
noWrap>Games</TD></TR></TBODY></TABLE></TD><!--
The following is a special cell that is used to extend the background to the
right edge -->
<TD class=clear width="100%"> </TD></<
TR></TR></TBODY></TABLE></P></TD></TR><!--msnavigation--></TBODY></TABLE><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</BODY></HTML>
File navbar.css
#menubar {
BACKGROUND: lightgrey; FONT: menu; CURSOR: default; POSITION: relative
}
#menubar .root {
BORDER-RIGHT: lightgrey 1px solid; PADDING-RIGHT: 2pt; BORDER-TOP: lightgrey
1px solid; PADDING-LEFT: 2pt; BORDER-LEFT: lightgrey 1px solid; BORDER-BOTTOM:
lightgrey 1px solid
}
#menubar TABLE {
BORDER-RIGHT: gray 2px solid; PADDING-RIGHT: 0pt; BORDER-TOP: #eeeeee 2px solid;
DISPLAY: none; PADDING-LEFT: 0pt; BACKGROUND: lightgrey; PADDING-BOTTOM: 0pt;
MARGIN: 0pt; FONT: menu; BORDER-LEFT: #eeeeee 2px solid; PADDING-TOP: 0pt; BORDER-BOTTOM:
gray 2px solid; POSITION: absolute
}
#menubar TABLE TD {
PADDING-RIGHT: 15pt; PADDING-LEFT: 12pt; PADDING-BOTTOM: 2pt; MARGIN: 0pt; PADDING-TOP:
2pt
}
#menubar .highlight {
BACKGROUND: navy; CURSOR: hand; COLOR: white
}
#menubar .disabledhighlight {
BACKGROUND: navy; COLOR: gray
}
#menubar #break {
COLOR: gray
}
#menubar .disabled {
COLOR: gray
}
#menubar #break {
PADDING-RIGHT: 0pt; PADDING-LEFT: 0pt; PADDING-BOTTOM: 0pt; MARGIN: 0pt; PADDING-TOP:
0pt
}
#menubar .more {
PADDING-RIGHT: 0pt; PADDING-LEFT: 0pt; LEFT: 14pt; FLOAT: right; PADDING-BOTTOM:
0pt; MARGIN: 0pt; FONT: 9pt webdings; WIDTH: 0.8em; PADDING-TOP: 0pt; POSITION:
relative; TOP: -2pt; HEIGHT: 9pt
}
#menubar .left {
MARGIN-LEFT: -11pt
}
BODY {
BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(images/background.jpg); MARGIN-LEFT:
0px; MARGIN-RIGHT: 0px; BACKGROUND-REPEAT: repeat-y; BACKGROUND-COLOR: #C6DDF9
}
File menubar.js
var childActive = null
var menuActive = null
var lastHighlight = null
var active = false
function getReal(el) {
// Find a table cell element in the parent chain */
temp = el
while ((temp!=null) && (temp.tagName!="TABLE") && (temp.className!="root") && (temp.id!="menuBar"))
{
if (temp.tagName=="TD")
el = temp
temp = temp.parentElement
}
return el
}
function raiseMenu(el) {
el.style.borderLeft = "1px #EEEEEE solid"
el.style.borderTop = "1px #EEEEEE solid"
el.style.borderRight = "1px gray solid"
el.style.borderBottom = "1px gray solid"
}
function clearHighlight(el) {
if (el==null) return
el.style.borderRight = "1px lightgrey solid"
el.style.borderBottom = "1px lightgrey solid"
el.style.borderTop = "1px lightgrey solid"
el.style.borderLeft = "1px lightgrey solid"
}
function sinkMenu(el) {
el.style.borderRight = "1px #EEEEEE solid"
el.style.borderBottom = "1px #EEEEEE solid"
el.style.borderTop = "1px gray solid"
el.style.borderLeft = "1px gray solid"
}
function menuHandler(menuItem) {
// Write generic menu handlers here!
// Returning true collapses the menu. Returning false does not collapse the
menu
return true
}
function getOffsetPos(which,el,tagName) {
var pos = 0 // el["offset" + which]
while (el.tagName!=tagName) {
pos+=el["offset" + which]
el = el.offsetParent
}
return pos
}
function getRootTable(el) {
el = el.offsetParent
if (el.tagName=="TR")
el = el.offsetParent
return el
}
function getElement(el,tagName) {
while ((el!=null) && (el.tagName!=tagName) )
el = el.parentElement
return el
}
function processClick() {
var el = getReal(event.srcElement)
if ((getRootTable(el).id=="menuBar") && (active)) {
cleanupMenu(menuActive)
clearHighlight(menuActive)
active=false
lastHighlight=null
doHighlight(el)
}
else {
if ((el.className=="root") || (!menuHandler(el)))
doMenuDown(el)
else {
if (el._childItem==null)
el._childItem = getChildren(el)
if (el._childItem!=null) return;
if ((el.id!="break") && (el.className!="disabled") && (el.className!="disabledhighlight") && (el.className!="clear"))
{
if (menuHandler(el)) {
cleanupMenu(menuActive)
clearHighlight(menuActive)
active=false
lastHighlight=null
}
}
}
}
}
function getChildren(el) {
var tList = el.children.tags("TABLE")
var i = 0
while ((i<tList.length) && (tList[i].tagName!="TABLE"))
i++
if (i==tList.length)
return null
else
return tList[i]
}
function doMenuDown(el) {
if (el._childItem==null)
el._childItem = getChildren(el)
if ((el._childItem!=null) && (el.className!="disabled") && (el.className!="disabledhighlight"))
{
// Performance Optimization - Cache child element
ch = el._childItem
if (ch.style.display=="block") {
removeHighlight(ch.active)
return
}
ch.style.display = "block"
if (el.className=="root") {
ch.style.pixelTop = el.offsetHeight + el.offsetTop + 2
ch.style.pixelLeft = el.offsetLeft + 1
if (ch.style.pixelWidth==0)
ch.style.pixelWidth = ch.rows[0].offsetWidth+50
sinkMenu(el)
active = true
menuActive = el
} else {
childActive = el
ch.style.pixelTop = getOffsetPos("Top",el,"TABLE") -3
// el.offsetTop + el.offsetParent.offsetTop - 3
ch.style.pixelLeft = el.offsetLeft + el.offsetWidth
if (ch.style.pixelWidth==0)
ch.style.pixelWidth = ch.offsetWidth+50
}
}
}
function doHighlight(el) {
el = getReal(el)
if ("root"==el.className) {
if ((menuActive!=null) && (menuActive!=el)) {
clearHighlight(menuActive)
}
if (!active) {
raiseMenu(el)
}
else
sinkMenu(el)
if ((active) && (menuActive!=el)) {
cleanupMenu(menuActive)
doMenuDown(el)
}
menuActive = el
lastHighlight=null
}
else {
if (childActive!=null)
if (!childActive.contains(el))
closeMenu(childActive, el)
if (("TD"==el.tagName) && ("clear"!=el.className))
{
var ch = getRootTable(el)
if (ch.active!=null) {
if (ch.active!=el) {
if (ch.active.className=="disabledhighlight")
ch.active.className="disabled"
else
ch.active.className=""
}
}
ch.active = el
lastHighlight = el
if ((el.className=="disabled") || (el.className=="disabledhighlight")
|| (el.id=="break"))
el.className = "disabledhighlight"
else {
if (el.id!="break") {
el.className = "highlight"
if (el._childItem==null)
el._childItem = getChildren(el)
if (el._childItem!=null) {
doMenuDown(el)
}
}
}
}
}
}
function removeHighlight(el) {
if (el!=null)
if ((el.className=="disabled") || (el.className=="disabledhighlight"))
el.className="disabled"
else
el.className=""
}
function cleanupMenu(el) {
if (el==null) return
for (var i = 0; i < el.all.length; i++) {
var item = el.all[i]
if (item.tagName=="TABLE")
item.style.display = ""
removeHighlight(item.active)
item.active=null
}
}
function closeMenu(ch, el) {
var start = ch
while (ch.className!="root") {
ch = ch.parentElement
if (((!ch.contains(el)) && (ch.className!="root"))) {
start=ch
}
}
cleanupMenu(start)
}
function checkMenu() {
if (document.all.menuBar==null) return
if ((!document.all.menuBar.contains(event.srcElement)) && (menuActive!=null))
{
clearHighlight(menuActive)
closeMenu(menuActive)
active = false
menuActive=null
choiceActive = null
}
}
function doCheckOut() {
var el = event.toElement
if ((!active) && (menuActive!=null) && (!menuActive.contains(el)))
{
clearHighlight(menuActive)
menuActive=null
}
}
function processKey() {
if (active) {
switch (event.keyCode) {
case 13: lastHighlight.click(); break;
case 39: // right
if ((lastHighlight==null) || (lastHighlight._childItem==null)) {
var idx = menuActive.cellIndex
// if (idx==menuActive.offsetParent.cells.length-2)
if (idx==getElement(menuActive,"TR").cells.length-2)
idx = 0
else
idx++
newItem = getElement(menuActive,"TR").cells[idx]
} else
{
newItem = lastHighlight._childItem.rows[0].cells[0]
}
doHighlight(newItem)
break;
case 37: //left
if ((lastHighlight==null) || (getElement(getRootTable(lastHighlight),"TR").id=="menuBar"))
{
var idx = menuActive.cellIndex
if (idx==0)
idx = getElement(menuActive,"TR").cells.length-2
else
idx--
newItem = getElement(menuActive,"TR").cells[idx]
} else
{
newItem = getElement(lastHighlight,"TR")
while (newItem.tagName!="TD")
newItem = newItem.parentElement
}
doHighlight(newItem)
break;
case 40: // down
if (lastHighlight==null) {
itemCell = menuActive._childItem
curCell=0
curRow = 0
}
else {
itemCell = getRootTable(lastHighlight)
if (lastHighlight.cellIndex==getElement(lastHighlight,"TR").cells.length-1)
{
curCell = 0
curRow = getElement(lastHighlight,"TR").rowIndex+1
if (getElement(lastHighlight,"TR").rowIndex==itemCell.rows.length-1)
curRow = 0
} else {
curCell = lastHighlight.cellIndex+1
curRow = getElement(lastHighlight,"TR").rowIndex
}
}
doHighlight(itemCell.rows[curRow].cells[curCell])
break;
case 38: // up
if (lastHighlight==null) {
itemCell = menuActive._childItem
curRow = itemCell.rows.length-1
curCell= itemCell.rows[curRow].cells.length-1
}
else {
itemCell = getRootTable(lastHighlight)
if (lastHighlight.cellIndex==0) {
curRow = getElement(lastHighlight,"TR").rowIndex-1
if (curRow==-1)
curRow = itemCell.rows.length-1
curCell= itemCell.rows[curRow].cells.length-1
} else {
curCell = lastHighlight.cellIndex - 1
curRow = getElement(lastHighlight,"TR").rowIndex
}
}
doHighlight(itemCell.rows[curRow].cells[curCell])
break;
if (lastHighlight==null) {
curCell = menuActive._childItem
curRow = curCell.rows.length-1
}
else {
curCell = getRootTable(lastHighlight)
if (getElement(lastHighlight,"TR").rowIndex==0)
curRow = curCell.rows.length-1
else
curRow = getElement(lastHighlight,"TR").rowIndex-1
}
doHighlight(curCell.rows[curRow].cells[0])
break;
}
}
}
A colpo d'occhio
Be Responsive
HTML 5
HTML 5 è un linguaggio di markup utilizzato per la strutturazione e il contenuto delle pagine Web.
CSS 3
CSS 3 è l'ultima evoluzione dei fogli di stile CSS. Contiene molte novità come angoli arrotondati, ombre, sfumature, transizioni o animazioni.
jQuery
jQuery è una libreria JavaScript cross-platform progettata per semplificare lo scripting lato client.