Cambiare orientamento menu tendina

TheDarkElf · 11 Mar 2013

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!

criric · 14 Mar 2013

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

Cerca

Cerca

Cambiare orientamento menu tendina

TheDarkElf

Nuovo Utente

criric

Super Moderatore

Discussioni simili