- Home Page
- > Script DHTML
- > Script DHTML Menu
- > Menu a Riquadri
Menu a Riquadri
Un menu particolare, con una barra a sinistra ed un riquadro a destra con del testo che cambia. Carino, ad esempio, per dei tour guidati.
<HTML><HEAD><TITLE>Titolo</TITLE>
<!----------------- NOTA ----------------
Questo e' il foglio di stile che permette di definire
il colore dello sfondo e del testo
------------------------------------------------------->
<STYLE type=text/css>A {
FONT-SIZE: 10pt; COLOR: #000000; LINE-HEIGHT: 20pt; FONT-FAMILY: 'Arial'
}
STRONG {
FONT-WEIGHT: bold; FONT-SIZE: 15pt; LINE-HEIGHT: 25pt; FONT-FAMILY: 'Arial'
}
P {
FONT-SIZE: 10pt; LINE-HEIGHT: 13pt; FONT-FAMILY: 'Arial'
}
#pulloutInterface {
LEFT: 50px; VISIBILITY: visible; WIDTH: 400px; CLIP: rect(0px 400px 250px 0px);
POSITION: absolute; TOP: 50px; HEIGHT: 250px; BACKGROUND-COLOR: #000000; layer-background-color:
#000000
}
#pulloutSidebar1 {
LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute;
TOP: 5px; HEIGHT: 30px; BACKGROUND-COLOR: #dedede; layer-background-color: #DEDEDE
}
#pulloutSidebar2 {
LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute;
TOP: 40px; HEIGHT: 30px; BACKGROUND-COLOR: #c5c5c5; layer-background-color: #C5C5C5
}
#pulloutSidebar3 {
LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute;
TOP: 75px; HEIGHT: 30px; BACKGROUND-COLOR: #a2a2a2; layer-background-color: #A2A2A2
}
#pulloutSidebar4 {
LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute;
TOP: 110px; HEIGHT: 30px; BACKGROUND-COLOR: #7e7e7e; layer-background-color:
#7E7E7E
}
#pulloutContent {
LEFT: 110px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute;
TOP: 5px; HEIGHT: 240px; BACKGROUND-COLOR: #000000; layer-background-color: #000000
}
#pulloutContent1 {
LEFT: 0px; VISIBILITY: visible; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px);
POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #dedede; layer-background-color:
#DEDEDE
}
#pulloutContent2 {
LEFT: -285px; VISIBILITY: hidden; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px);
POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #c5c5c5; layer-background-color:
#C5C5C5
}
#pulloutContent3 {
LEFT: -285px; VISIBILITY: hidden; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px);
POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #a2a2a2; layer-background-color:
#A2A2A2
}
#pulloutContent4 {
LEFT: -285px; VISIBILITY: hidden; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px);
POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #7e7e7e; layer-background-color:
#7E7E7E
}
</STYLE>
<SCRIPT language=JavaScript>
<!--
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0
function init() {
pulloutActive = 0
if (n) {
pullout1 = document.pulloutInterface.document.pulloutContent.document.pulloutContent1
pullout2 = document.pulloutInterface.document.pulloutContent.document.pulloutContent2
pullout3 = document.pulloutInterface.document.pulloutContent.document.pulloutContent3
pullout4 = document.pulloutInterface.document.pulloutContent.document.pulloutContent4
}
if (ie) {
pullout1 = pulloutContent1.style
pullout2 = pulloutContent2.style
pullout3 = pulloutContent3.style
pullout4 = pulloutContent4.style
}
pulloutShown = pullout1 // the layer that is currently shown
pulloutShown.xpos = 0
pulloutNew = "none" // the layer that we will be shown next
pulloutNew.xpos = -285
}
// Pullout Function, starts the sequence
function pullout(which) {
if (!pulloutActive && pulloutShown != which) {
pulloutActive = 1 // this makes it so you can't start it again until it's finished
pulloutNew = which
pulloutNew.xpos = -285
pulloutLeft()
}
}
// Slide the old layer out of view
function pulloutLeft() {
if (pulloutShown.xpos > -285) {
pulloutShown.xpos -= 15
pulloutShown.left = pulloutShown.xpos
setTimeout("pulloutLeft()",30)
}
else {
hide(pulloutShown)
show(pulloutNew)
setTimeout("pulloutRight()",50)
}
}
// Slide the new layer into view
function pulloutRight() {
if (pulloutNew.xpos < 0) {
pulloutNew.xpos += 15
pulloutNew.left = pulloutNew.xpos
setTimeout("pulloutRight()",30)
}
else {
pulloutShown = pulloutNew
pulloutActive = 0 // stops the sequence
}
}
// Show/Hide Functions
function show(showobj) {
if (n) showobj.visibility = "show"
if (ie) showobj.visibility = "visible"
}
function hide(hideobj) {
if (n) hideobj.visibility = "hide"
if (ie) hideobj.visibility = "hidden"
}
//-->
</SCRIPT>
<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY text=#000000 bgColor=#ffffff
onload=init()>
<!----------------- NOTA ----------------
Questi sono i nomi dei menu di sinistra
------------------------------------------------------->
<DIV id=pulloutInterface>
<DIV id=pulloutSidebar1>
<P align=center><A href="javascript:pullout(pullout1)">Primo
gruppo</A></P></DIV>
<DIV id=pulloutSidebar2>
<P align=center><A href="javascript:pullout(pullout2)">Secondo
gruppo</A></P></DIV>
<DIV id=pulloutSidebar3>
<P align=center><A href="javascript:pullout(pullout3)">Terzo
gruppo</A></P></DIV>
<DIV id=pulloutSidebar4>
<P align=center><A href="javascript:pullout(pullout4)">Quarto
gruppo</A></P></DIV>
<!------------------ NOTA ---------------
Ognuno dei gruppi che segue e' il testo che appare
quando si clicca su una delle voci di menu si sinistra
------------------------------------------------------->
<DIV id=pulloutContent>
<DIV id=pulloutContent1>
<P align=center><STRONG>Primo gruppo</STRONG>
<TABLE width=275 border=0>
<TBODY>
<TR>
<TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra
(primo gruppo).<BR><BR><A
href="#">Link1</A>
</P></TD></TR></TBODY></TABLE></P></DIV>
<DIV id=pulloutContent2>
<P align=center><STRONG>Secondo gruppo</STRONG>
<TABLE width=275 border=0>
<TBODY>
<TR>
<TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra
(secondo gruppo). All'interno del codice puoi trovare dei commenti che
aiutano a capire come personalizzare lo script!
</P></TD></TR></TBODY></TABLE></P></DIV>
<DIV id=pulloutContent3>
<P align=center><STRONG>Terzo gruppo</STRONG>
<TABLE width=275 border=0>
<TBODY>
<TR>
<TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra
(Terzo gruppo). Visita Risorse.net! Tutto per il tuo Web
site!</P></TD></TR></TBODY></TABLE></P></DIV>
<DIV id=pulloutContent4>
<P align=center><STRONG>Quarto gruppo</STRONG>
<TABLE width=275 border=0>
<TBODY>
<TR>
<TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra
(quarto
gruppo).</P></TD></TR></TBODY></TABLE></P></DIV></DIV></DIV></BODY></HTML>
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.