- Home Page
- > Script DHTML
- > Script DHTML Menu
- > Slide Menu
Slide Menu
Menu a comparsa. Si trascina con il mouse da sinistra a destra.
<HTML><HEAD><TITLE>025</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE>#slidemenubar {
BORDER-RIGHT: green 1px solid; BORDER-TOP: green 1px solid; LEFT: -155px; FONT:
bold 12px/20px Verdana; BORDER-LEFT: green 1px solid; WIDTH: 160px; CURSOR: hand;
BORDER-BOTTOM: green 1px solid; POSITION: absolute; TOP: 110px; BACKGROUND-COLOR:
lightyellow; layer-background-color: lightyellow
}
#slidemenubar2 {
BORDER-RIGHT: green 1px solid; BORDER-TOP: green 1px solid; LEFT: -155px; FONT:
bold 12px/20px Verdana; BORDER-LEFT: green 1px solid; WIDTH: 160px; CURSOR: hand;
BORDER-BOTTOM: green 1px solid; POSITION: absolute; TOP: 110px; BACKGROUND-COLOR:
lightyellow; layer-background-color: lightyellow
}
</STYLE>
</HEAD>
<BODY>
<BR><BR>Trascina il menu' alla tua sinistra e apri le voci presenti.
<SCRIPT language=JavaScript1.2>
if (document.all)
document.write('<div id="slidemenubar2" style="left:-150">')
</SCRIPT>
<LAYER id=slidemenubar>
<SCRIPT language=JavaScript1.2>
var sitems=new Array()
var sitemlinks=new Array()
//extend or shorten this list
sitems[0]="LINK N°1"
sitems[1]="LINK N°2"
sitems[2]="LINK N°3"
sitems[3]="LINK N°4"
sitems[4]="LINK N°5"
sitems[5]="LINK N°6"
sitems[6]="LINK N°7"
sitems[7]="LINK N°8"
sitems[8]="LINK N°9"
sitems[9]="LINK N°10"
sitems[10]="LINK N°11"
sitems[11]="LINK N°12"
sitems[12]="LINK N°13"
//These are the links pertaining to the above text.
sitemlinks[0]="#"
sitemlinks[1]="#"
sitemlinks[2]="#"
sitemlinks[3]="#"
sitemlinks[4]="#"
sitemlinks[5]="#"
sitemlinks[6]="#"
sitemlinks[7]="#"
sitemlinks[8]="#"
sitemlinks[9]="#"
sitemlinks[10]="#"
sitemlinks[11]="#"
sitemlinks[12]="#"
for (i=0;i<=sitems.length-1;i++)
document.write('<a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>')
</SCRIPT>
</LAYER>
<SCRIPT language=JavaScript1.2>
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}
window.onload=regenerate2
if (document.all){
document.write('</div>')
themenu=document.all.slidemenubar2.style
rightboundary=0
leftboundary=-150
}
else{
themenu=document.layers.slidemenubar
rightboundary=150
leftboundary=10
}
var dragapproved=false
var x1,x2
if (document.layers)
themenu.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
function move(e){
if (document.all&&event.button==1&&dragapproved){
if(temp1+event.clientX-x1>leftboundary)
themenu.pixelLeft=Math.min(rightboundary,temp1+event.clientX-x1)
else
themenu.pixelLeft=Math.max(leftboundary,temp1+event.clientX-x1)
}
else if (document.layers){
if(themenu.left+e.x-x2>leftboundary)
themenu.left=Math.min(rightboundary+2,themenu.left+e.x-x2)
else
themenu.left=Math.max(leftboundary-2,themenu.left+e.x-x2)
}
}
function drags(e){
if (document.all){
dragapproved=true
temp1=themenu.pixelLeft
x1=event.clientX
document.onmousemove=move
}
else{
themenu.captureEvents(Event.MOUSEMOVE)
x2=e.x
}
}
function stopit(){
if (document.all){
dragapproved=false
}
if (document.layers)
themenu.releaseEvents(Event.MOUSEMOVE)
}
if (document.all){
document.all.slidemenubar2.onmousedown=drags
document.all.slidemenubar2.onmouseup=new Function("dragapproved=false")
document.onselectstart=new Function("return false")
}
else if (document.layers){
themenu.onmousedown=drags
themenu.onmousemove=move
themenu.onmouseup=stopit
}
</SCRIPT>
</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.