menù a scomparsa ..

**JANUS70** · 22-02-2011, 01:44

Ciao ..
premessa: io di JS non ne so assolutamente niente !

mi sono scaricato dal sito uno script di un menù a scomparsa (un pulsante che fà scorrere, 'entrare' nella pagina dal bordo esterno, un menù)

postandovi codice e script ..
mi piacerebbe capire come dovrei fare per inserirne 2 all'interno della stessa pagina (immagino cambiando id .. e forse raddoppiando lo script)

grazie mille

CODICE:

codice:

#menuShow{
          border: 1px solid #ff0000; /*bordo del menu*/    
          background-color: #c6c6c6; /*sfondo del menu*/   
          padding: 12px; /*distanza dal bordo*/            
          font-size: 13px; /*grsnsezza testo*/             
          font-family: tahoma, Arial;                      
          position: absolute;                              
          width: auto;                                     
          height: auto;                                    
         }

#menuSelect{
            border: 1px solid #ff0000;         
            background-color: #c6c6c6;         
            padding: 13px;                     
            font-size: 13px;                   
            font-family: Verdana, Arial;       
           // position: absolute;                
           // width: auto;                       
           // height: auto; 
            text-align: right;                     
           }

#menu_container{                               
                border: 1px solid #999;     
                padding: 13px;                 
                width: 300px;                 
                height: 500px;                
               }                               
</style>
</head>

<body >



<div id="container" align="center">
  <div id="menuSelect">                                            
    <a href="#" onClick="moveOnMenu();moveOffSelector()">            
    [img]icon.gif[/img]</a>       
  </div>                                                           
  
  <div id="menuShow">  
  	<div id="menu_container">                                            
       <a href="#" onClick="moveOffMenu();moveOnSelector()">              
       [img]icon.gif[/img]</a>         
       
                                                               
       
                                                               
       Html.it
                       
       Linux
         
       Programmazione
     
       
                                                               
       Download
                 
       Free
                         
    </div>
  </div>
</div>

SCRIPT:

codice:

Show ="no";

// Set OffX in pixels to a negative number 
// somewhat larger than the width of the menu.

var OffX = -350;

// Set the PosX and PosY variables
// to the location on the screen where the
// menu should position (in pixels) when stopped.

var PosX =  50; //orizzontale
var PosY =  50;//verticale

// Usually, use the settings shown; but you can
// change the speed and the increment of motion
// across the screen, below.

var speed        = 1;
var increment    = 2;
var incrementNS4 = 5; // for slower NS4 browsers

// do not edit below this line
// ===========================

var is_NS = navigator.appName=="Netscape";
var is_Ver = parseInt(navigator.appVersion);
var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
var is_NS5up = is_NS&&is_Ver>=5;

var MenuX=OffX;
var SelX=PosX;
var sPosX=PosX;
var sOffX=OffX;

if (Show=="yes"){
sPosX=OffX;
sOffX=PosX;
MenuX=sOffX;
SelX=sPosX;
}

if (is_NS4){
increment=incrementNS4;
Lq="document.layers.";
Sq="";
eval(Lq+'menuSelect'+Sq+'.left=sPosX');
eval(Lq+'menuShow'+Sq+'.left=sOffX');
eval(Lq+'menuSelect'+Sq+'.top=PosY');
eval(Lq+'menuShow'+Sq+'.top=PosY');
}else{
Lq="document.all.";
Sq=".style";
document.getElementById('menuSelect').style.left=sPosX+"px";
document.getElementById('menuShow').style.left=sOffX+"px";
document.getElementById('menuSelect').style.top=PosY+"px";
document.getElementById('menuShow').style.top=PosY+"px";
}  

function moveOnMenu(){
if (MenuX<PosX){ 
MenuX=MenuX+increment;
if (is_NS5up){
document.getElementById('menuShow').style.left=MenuX+"px";
}else{
eval(Lq+'menuShow'+Sq+'.left=MenuX');
}
setTimeout('moveOnMenu()',speed);
}
}

function moveOffMenu(){
if (MenuX>OffX){ 
MenuX=MenuX-increment;
if (is_NS5up){
document.getElementById('menuShow').style.left=MenuX+"px";
}else{
eval(Lq+'menuShow'+Sq+'.left=MenuX');
}
setTimeout('moveOffMenu()',speed);
}
}

function moveOffSelector(){
if (SelX>OffX){ 
SelX=SelX-increment;
if (is_NS5up){
document.getElementById('menuSelect').style.left=SelX+"px";
}else{
eval(Lq+'menuSelect'+Sq+'.left=SelX');
}
setTimeout('moveOffSelector()',speed);
}
}

function moveOnSelector(){
if (SelX<PosX){ 
SelX=SelX+increment;
if (is_NS5up){
document.getElementById('menuSelect').style.left=SelX+"px";
}else{
eval(Lq+'menuSelect'+Sq+'.left=SelX');
}
setTimeout('moveOnSelector()',speed);
}
}

**JANUS70** · 24-02-2011, 01:11

nessuno !?

Discussione: menù a scomparsa ..

Strumenti discussione

Ricerca discussione

Visualizza

menù a scomparsa ..

Permessi di invio