drop down selezionato

**stiffa** · 27-04-2010, 12:06

Ciao a tutti

sto impazzendo per trovare un menu come quest

che rimanga selezionato in base alla pagina cliccata.

vorrei che il menu si apra gia alla pagina selezionata...
chi mi aiuta..plshttp://www.stunicholls.com/menu/jque...ina-6.html#url

Mi basta anche un link di pagine che trattano l'argomento.

Quello che cerco e' un menu con sottomenu (verticale) che quando clicco una pagina vado alla pagina scelta e nel menu la voce rimane evidenziata (ovviamente se la voce che ho cliccato e' nel sub menu , questo al caricamento della pagina deve farmi vedere la sezione riferita al link cliccato gia srotolata e con il link evidenziato)

**stiffa** · 27-04-2010, 13:58

raga...nessuno che mi sa consigliare un menu semplice a 2 livelli dove rimane selezionata la voce relativa alla pagina dove siamo???

thx

**stiffa** · 27-04-2010, 16:03

qualcuno ha qualche ideaa?

menu con sottomenu con selezione pagina corrente ...

e' cosi difficile ? per me si ...cercando trovo solo menu che non restano selezionati

**stiffa** · 28-04-2010, 08:05

aiuto... qualcuno mi consiglia qualche lettura per capire come sfruttare un menu jquery .??

panico

**stiffa** · 28-04-2010, 15:09

up

**stiffa** · 29-04-2010, 14:44

idee
?

**Tonenge** · 01-05-2010, 00:41

Ciao Stiffa,
spero di aver realizzato lo script come desideravi.
A questo link potrai vedere come funziona.

http://www.tonenge.com/xstiffa/menu.html

Ho usato 2 gif per l'evidenziazione al passaggio del mouse.
Tramite gli Array "voci" puoi definire le "linguette" e tramite l'array "subvoci"
gli elementi della tendina. La funzione "Azione(i,r)" ti permetterà di definire i comportamenti al click!

Se ti servono delucidazioni chiedi pure.

Ti incollo il codice:

Saluti.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-8859-1">
<title></title>
<style>
#linguette { position:absolute;
left:10px; top:10px; }

.ling_sx { float:left;
cursor

ointer;
background:url("images/linsx.gif") no-repeat left top;
margin:0;
padding:0 0px 0 5px; }

.ling_dx { float:left;
color:#3C6A94;
font: bold 11px Arial;
cursor

ointer;
background:url("images/lindx.gif") no-repeat right top;
margin:0px;
padding:5px 8px 4px 3px; }

</style>

<script>

voci=new Array("Home","Gallery","Contact","Various");

subvoci=new Array();
subvoci[0]=new Array("Home voce1","Home2","Home subvoce3","Home4","Home ultima voce5");
subvoci[1]=new Array("Gallery fotografica1","Gallery video2","Gallery3","Gallery fotografica4","Gallery video5","Gallery6");
subvoci[2]=new Array();
subvoci[3]=new Array("Various_1","Various sottomenu 2");

NL=voci.length;
ATTIVO=-1;
outsugiu=0;

function inizio(){
tendinaj=document.getElementById("tendina");
sceltaj=document.getElementById("scelta");
onme="onmouseover='this.style.backgroundColor=\"#d df\";' onmouseout='this.style.backgroundColor=\"#fff\";' ";
var stri="";
for(var r=0;r<NL;r++) stri+="<div id='ga"+r+"' class='ling_sx'><div class='ling_dx' id='gb"+r+"' onmouseover='outsugiu=1; evidenzia("+r+",0); listamenu("+r+");'"+
" onmouseout='evidenzia("+r+",1); outmenu0();' onmouseup='evidenzia("+r+",2); Azione("+r+",0);'>"+voci[r]+"</div></div>";
document.getElementById("linguette").innerHTML=str i;
evidenzia(0,2);
}

function listamenu(i){
var ii=subvoci[i].length; if(!ii) return;
var stri="";
for(var r=0;r<ii;r++) stri+="<div style='font:11px Arial;color:#444;z-index:12;margin:4px 8px 3px 8px;' "+onme+" onclick='Azione("+i+","+(r+1)+"); evidenzia("+i+",2);' >"+subvoci[i][r]+"</div>";
tendinaj.style.left=l = findPosX(document.getElementById("ga"+i))+"px";
tendinaj.innerHTML=stri;
tendinaj.style.visibility='visible';
}

function outmenu0(){
outsugiu=0; tt=0; outempo();
}

function outmenu1(){
outsugiu=1; tt=0; outempo();
}

function outempo(){
tt++; if(tt>1) { if(!outsugiu) chiudiout(); return; }
setTimeout("outempo();",150);
}

function chiudiout(){ outsugiu=0;
tendinaj.style.visibility='hidden';
}

function Azione(i,r){
sceltaj.innerHTML="funzione da eseguire per la scelta voce: "+i+" - subvoce: "+r+"";
chiudiout();
}

function evidenzia(q,n){ if(q==ATTIVO) return;
if(!n) sval=-42;
if(n==1) sval=0;
if(n==2) sval=-84;
idga="ga"+q; idgb="gb"+q;
document.getElementById(idga).style.backgroundPosi tion="0% "+ sval +"px";
document.getElementById(idgb).style.backgroundPosi tion="100% "+ sval +"px";

if(n==2) { if(ATTIVO>=0) {idga="ga"+ATTIVO; idgb="gb"+ATTIVO;
document.getElementById(idga).style.backgroundPosi tion="0% 0px";
document.getElementById(idgb).style.backgroundPosi tion="100% 0px"; }
ATTIVO=q; }
}

function findPosX(obj){ var curleft = 0;
if(obj.offsetParent) while(1) {curleft += obj.offsetLeft;
if(!obj.offsetParent) break;
obj = obj.offsetParent; }
else if(obj.x) curleft += obj.x;
return curleft;
}

</script>
</head>
<body onload='inizio();'>

<div style='position:absolute;left:10px;top:70px;width: 650px;height:350px;z-index:8;background-color:#444;'>
<div style='position:absolute;left:1px;top:1px;width:64 8px;height:348px;z-index:9;background-color:#fff;'></div></div>
<div id='linguette' style='position:absolute;left:40px;top:50px;z-index:10;' onmousedown='return false;' onselectstart='return false;'></div>

<div id='tendina' style='position:absolute;top:71px;border:1px solid #444;visibility:hidden;z-index:11;cursor

ointer;' onmouseover='outmenu1();' onmouseout='outmenu0();'></div>

<div id='scelta' style='position:absolute;left:50px;top:270px;width :400px;height:150px;z-index:15;font:15px Arial;'></div>
</body>
</html>

**stiffa** · 02-05-2010, 09:33

intanto ti ringrazio infinitamente. Domani guardo il codice... probabilmente avro bisogno di qualche aiutino ... ma aspettiam domani.
grazie mille per ora

Discussione: drop down selezionato

Strumenti discussione

Ricerca discussione

Visualizza

drop down selezionato

Permessi di invio