Menù destro con sottomenù laterale

[gio_91]

Salve a tutti,
ho un problema riguardante la personalizzazione del menù destro.
Io vorrei fare un sottomenù che si apre se con il mouse vado sopra a una scritta del menù,tipo quello che succede con il menù base di ie quando si passa sopra a codifica.
Qualcuno sa come farlo?
Grazie in anticipo

[oscarchine]

ciao, io ho appena fatto questo script che potrebbe fare al caso tuo, con le dovute modifiche.
css

<style type="text/css">
#j_base {position: fixed;
top: 280px;
right: 5px;
background-color:#666666;
height: 20px;
width: 150px;
text-align: center;
cursor:crosshair;
border-color: #CCCCCC;
border-style: solid;
border-width: 1px;
}

#j_compare {position: fixed;
top: 288px;
right: 150px;
background-color: #666666;
width: 200px;
text-align: left;
visibility: hidden;
padding: 2px;
border-color: #CCCCCC;
border-style: solid;
border-width: 1px;
z-index: 9;
overflow: hidden;
}
</style>

javascript

<script language="javascript" type="text/javascript">


var intervallo_hide;
var intervallo_show;


function crea(id_div, alt_max) {
var test = document.getElementById(id_div).style;
var altezza = test.height;
var lungh_stringa = altezza.length;
var pos_px = eval(lungh_stringa - 2);
var altez = altezza.substring(0,pos_px);
var alt = parseInt(altez);
if(alt < alt_max) {
alt = eval(alt+10);
test.height = alt + "px";
}
if(alt > 200) {
clearInterval(intervallo_show);
alert(test.height);
}
}

function distruggi(id_div) {
var test = document.getElementById(id_div).style;
var altezza = test.height;
var lungh_stringa = altezza.length;
var pos_px = eval(lungh_stringa - 2);
var altez = altezza.substring(0,pos_px);
var alt = parseInt(altez);
if(alt > 0) {
alt = eval(alt-10);
test.height = alt + "px";
}
if(alt < 0 || alt == 0) {
test.visibility = "hidden";
test.height = "0px";
clearInterval(intervallo_hide);
}
}

function show() {
clearInterval(intervallo_hide);
document.getElementById('j_compare').style.visibil ity = "visible";
intervallo_show = setInterval("crea('j_compare', 200)", 15 );
}


function hide() {
clearInterval(intervallo_show);
intervallo_hide = setInterval("distruggi('j_compare')", 5 );
}



HTML

<div id="j_base" onmouseover="show();" onmouseout="hide();">passa qui</div>
<div id="j_compare" style="height:0px;" onmouseover="show();" onmouseout="hide();">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae </div>



Chiaramente con le tue personalizzazioni. Questo script è carino perchè il menù a tendina che ne esce si costruisce pian piano e non compare di botta.

Ciao

Piccola aggiunta: ho provato lo script solo con firefox, browser che tutti comunque dovrebbero usare. Se hai bisogno di aiuto per la compatibilità, chiedilo.

[gio_91]

Grazie mille!!!!! Ora provo a configurarlo e vedo se funzia
Grazie ancora!!!!

[gio_91]

Ok il tutto funziona ,ma cosa devo modificare per farlo comparire a destra il menù e non sotto a dove passso sopra?

[oscarchine]

basta che cambi gli stili css dei due div.

posizioni prima il div j_base, poi a seconda modifichi anche la posizione del div j_compare

ad esempio per avere il j_base in alto a sinistra con menù che compare a destra basta che modifichi in

#j_base {position: fixed;
top: 5px;
left: 5px;
background-color:#666666;
height: 20px;
width: 150px;
text-align: center;
cursor:crosshair;
border-color: #CCCCCC;
border-style: solid;
border-width: 1px;
}

#j_compare {position: fixed;
top: 5px;
left: 155px;
background-color: #666666;
width: 200px;
text-align: left;
visibility: hidden;
padding: 2px;
border-color: #CCCCCC;
border-style: solid;
border-width: 1px;
z-index: 9;
overflow: hidden;
}


inoltre se vuoi modificare la grandezza della finestra a comparsa, devi modificare sia il 200 nella funzione crea() sia il 200 nella funzione show, dove c'è il setInterval

[gio_91]

Io dei css so poco e niente,ma grazie mille del grande aiuto che mi hai dato!!!!!

[oscarchine]

nessun problema!