Cambiare orientamento menu tendina

TheDarkElf

Nuovo Utente
15 Nov 2012
4
0
0
Ciao a tutti,
Purtroppo io e js non andiamo molto d'accordo... ed è un po' che sbatto la testa su questo script anche se è semplicissimo. Ho un menu a tendina che scorre dall'alto.

CSS:

Codice:
A.cassetto:hover {color: blue}
DIV.cassetto {font-family: verdana; font-size:11pt; font-weight:bold}

JS:

Codice:
<!--
ie=document.all?1:0
n=document.layers?1:0

// Setta in pixel la parte visibile del cassetto
lshow=30

// Di quanti pixel vuoi che si sposti il cassetto ad ogni passo?
var move=10;

// Setta la velocità
menuSpeed=40

// Vuoi che il cassetto si sposti insieme allo scroll della pagina?
var moveOnScroll=true

// Adesso non cambiare più niente
var tim;
function makeMenu(obj,nest){
    nest=(!nest) ? '':'document.'+nest+'.'
    this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')					
	this.state=1
	this.go=0
	this.height=n?this.css.document.height:eval(obj+'.offsetHeight')
	this.top=b_gettop
    this.obj = obj + "Object"; 	eval(this.obj + "=this")	
}
function b_gettop(){
	var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop);
	return gleft;
}
function moveMenu(){
	if(!oMenu.state){
		clearTimeout(tim)
		mIn()	
	}else{
		clearTimeout(tim)
		mOut()
	}
}
function mIn(){
	if(oMenu.top()>eval(scrolled)-oMenu.height+lshow){
		oMenu.go=1
		oMenu.css.top=oMenu.top()-move
		tim=setTimeout("mIn()",menuSpeed)
	}else{
		oMenu.go=0
		oMenu.state=1
	}	
}
function mOut(){
	if(oMenu.top()<eval(scrolled)){
		oMenu.go=1
		oMenu.css.top=oMenu.top()+move
		tim=setTimeout("mOut()",menuSpeed)
	}else{
		oMenu.go=0
		oMenu.state=0
	}	
}
function checkScrolled(){
	if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled)-oMenu.height+lshow
	if(n) setTimeout('checkScrolled()',30)
}
function menuInit(){
	oMenu=new makeMenu('divMenu')
	scrolled=n?"window.pageYOffset":"document.body.scrollTop"
	oMenu.css.top=eval(scrolled)-oMenu.height+lshow
	oMenu.css.visibility='visible'
	if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
}

onload=menuInit;
-->

E POI IL MENU:

HTML:
<div class="cassetto" id="divMenu" style="position:absolute; top:0; left:30; height:100; width:200; visibility:hidden; background: url('')"> <!-- mettere fra gli apici una immagine per lo sfondo-->
  <center>
    <a class="cassetto" href="#">LINK1</a> <br>
    <br>
    <a class="cassetto" href="#">LINK2</a> <br>
    <br>
    <a class="cassetto" href="#">LINK3</a> <br>
    <br>
    <a class="cassetto" href="#">LINK4</a> <br>
    <br>
    <a class="cassetto" href="#">LINK5</a> <br>
    <br>
    <a class="cassetto" href="#">LINK6</a> <br>
    <br>
  </center>
  <a href="javascript://" onClick="moveMenu()"><img src="prog.jpg" border="0" width="200" height="25"></a></div>

Inizialmente si vedono i link dal 3 al 6, ma cliccando sull'immagine scorrono verso il basso lasciando vedere anche i link 1, 2 e 3. Mi servirebbe, però, che il menu fosse al contrario; che invece di trovarsi in cima alla pagina, si trovasse in basso e che, di conseguenza, il menu scorresse verso l'alto e non verso il basso.

Grazie per l'aiuto!
 
Ultima modifica di un moderatore:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, ho provato lo script che hai postato ma si comporta in modo diverso su IE e FF
ti posto un semplice esempio che fa uso di jquery
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Cassetto</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            div#cassetto {
                position: fixed;
                bottom: 0;
                overflow: hidden;
                width: 200px;
            }
            p#maniglia {
                border:1px solid black;
                text-align: center;
                cursor:pointer;
            }
            p#maniglia span {
                display: inline-block;
                width:160px; 
            }
            div#menu {
                display: none;
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){               
                $("#maniglia").click(function(){
                    $("#menu").slideDown();
                })
            })
        </script>
    </head>
    <body>

        <div id="cassetto">
            <p id="maniglia">o<span></span>o</p>
            <div id="menu">                
                <p><a class="cassetto" href="#">LINK1</a></p>                
                <p><a class="cassetto" href="#">LINK2</a></p>
                <p><a class="cassetto" href="#">LINK3</a></p>
                <p><a class="cassetto" href="#">LINK4</a></p>
                <p><a class="cassetto" href="#">LINK5</a></p>
                <p><a class="cassetto" href="#">LINK6</a></p>
            </div>
        </div>
    </body>
</html>

edit
se usi slideToggle al posto di slideDown con un click si apre e con un altro si chiude
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
F Url dinamiche da cambiare con categoria, subcategoria e title PHP 2
D Aiuto CSS in ELEMENTOR - Cambiare un testo CMS (Content Management System) 0
M Cambiare pennello a lavoro completo Photoshop 0
R Cambiare il nome dell'immagine dopo caricamento ftp HTML e CSS 0
Y cambiare sfondo di una pagina Javascript 1
E Cambiare lingua in Elements per Mac Mac e Software 2
R Non riesco a cambiare l'immagine di sfondo PHP 4
K Cambiare font size su echo stringa variabile PHP 24
V [PHP Symphony] Cambiare da ApcCache ad OpCache PHP 4
P Cambiare visualizzazione con JS Javascript 1
Web93 CAMBIARE TAG POST TITOLO DA H2 A H1 WordPress 1
L [PHP] cambiare gli if in un url semplice PHP 1
G Cambiare colore ad un record database mysql MySQL 0
Domenico_Falco1 Cambiare url in un sito con pagine dinamiche Ajax 4
L Cambiare classi solo scroll up jQuery 2
Topografo Buon 2019 (Tutti gli altri hanno scritto "Salve a tutti", cerchiamo di cambiare) Presentati al Forum 1
joomeph Cambiare Nome Utente Supporto Mr.Webmaster 3
M [Visual Basic] Cambiare lo stato in checked delle checkbox richiamando dati dal database Visual Basic 6
Koboshi Cambiare il css di una pagina con tasto "on off" HTML e CSS 5
Licantropo [MySQL] Cambiare le date MySQL 4
B [Javascript] Cambiare classe ed aggiornare relativi eventi Javascript 3
L Cambiare nome pagina facebook Annunci servizi di Social Media Marketing 4
P [HTML] Wordpress - cambiare font di un tema WordPress 1
L APPARECCHIO VOIP DA CAMBIARE Adsl e Connettività 0
T cambiare formato in uscita timestamp Database 0
O Allo scroll cambiare colore di sfondo jQuery 0
crealatualista [Javascript] Cambiare record tabella... Javascript 4
napuleone [Javascript] cambiare i parametri di stampa con js Javascript 2
DaveCricket [WordPress] [PHP] Cambiare il colore del link di una pagina attiva WordPress 3
V javascript - cambiare immagine di sfondo di un div Javascript 3
D [Javascript] Script che consenta di cambiare un'immagine in base all'ora del giorno della settimana Javascript 11
B CAMBIARE PAGINA INIZIALE PHPMYADMIN MySQL 2
webmachine [WORDPRESS] Cambiare titolo pagina articoli WordPress 0
webmachine [WOOCOMMERCE][WORDPRESS] Cambiare testo pulsante Acquista E-Commerce 0
webmachine [PRESTASHOP] Cambiare ordine prezzo-sconto-prezzoscontato E-Commerce 1
B CAMBIARE TEMPLATES PHPMYADMIN MySQL 0
otto9due Dreamweaver CC 2017 - cambiare colorazione codice Windows e Software 5
webmachine [JQUERY] Cambiare immagine al click, toggle jQuery 1
A Cambiare Risposta onclick con Switch. Javascript 1
V Cambiare colore ad un button HTML e CSS 3
E Cambiare l'option di un select con jquery jQuery 1
ecosito CSS: è possibile cambiare font con uno non di uso comune? HTML e CSS 11
Jonn [Javascript] Cambiare colore sfondo div allo scroll del mouse Javascript 3
Shyson Cambiare color all'onclick Javascript 9
elettroweb come cambiare testo Flash 0
M Cambiare dinamicamente il contenuto di un DIV Javascript 4
M Cambiare valore ad un campo in base alla selezione fatta nel menu a tendina PHP 16
R Cambiare la variabile in modo permanente PHP 3
P Cambiare il valore di un campo tabella con un pulsante cliccabile PHP 2
B cambiare sfondo alle celle della tabella Javascript 1

Discussioni simili