Ragazzi ho creato un menù leggermente dimanico, volevo sapere cosa ne pensate, il codice è un pò rozzo ma l'idea..Dato che non sono bravissimo con javascript l'animazione è poca =)

Se volete vederlo lo trovate qui http://loveessence.altervista.org/prove/index.php#

codice:


<html>
    <head>
        <script type="text/javascript">
 //inizio menu
        //eseguita al caricamento della pagina
        function inizio(){
            //spostamento di esci() ogni 1 millisecondi
           z = setInterval("esci()", 1);
        }
        //spostamento del menu iniziale
        function esci(){
            //inserisco in x la larghezza
            x = parseInt(document.getElementById('home').style.width);
            //se è arrivato a 400px
            if (x == 280){
                //fermo l'allargamento
                clearInterval(z);
                //attivo il secondo div
                document.getElementById('menu').style.display="block";
                //inizio lo spostamento di menu()
                i = setInterval("menu()", 14);

            }
            //altrimenti se non è ancora arrivato a 400px
            else{
            //lo sposto di 3 px
            document.getElementById('home').style.width= (x+3)+"px";
            }

        }
        //spostamento menu normale
        function menu() {
            y = parseInt(document.getElementById('menu').style.top);
            //se è arrivato a 382px
            if (y == 31){
                //lo fermo
                clearInterval(i);
            }
            //altrimenti
            else {
                //continuo lo spostamento
                document.getElementById('menu').style.top= (y+1)+"px";
            }
            
        }
 //entrata menu
        function inizio2(){
            //inserisco dentro home il testo Home normale
            document.getElementById('home').innerHTML="Home";
            //imposto l'intervallo
            a = setInterval("entra()", 14);
        }
        //entrata menu
        function entra(){
            y = parseInt(document.getElementById('menu').style.top);
            if (y == 10){
                //lo fermo
                clearInterval(a);
                //gli metto il menu vecchio
                document.getElementById('menu').innerHTML="<a id=\"pro\" href=\"#\" onClick=\"del();\">Profilo</a> | <a id=\"cont\" href=\"#\" onClick=\"del2();\">Contatti</a> | <a id=\"chi\" href=\"#\" onClick=\"del3();\">Chi siamo</a> | <a id=\"contatt\" href=\"#\" onClick=\"del4();\">Contattaci</a> | <a id=\"new\" href=\"#\" onClick=\"del5();\">News</a>";
                //imposto l'uscita del menu vecchio
                i = setInterval("menu2()", 14);



            }
            //altrimenti
            else {
                //continuo lo spostamento
                document.getElementById('menu').style.top= (y-1)+"px";
            }
        }
        //uscita
        function menu2(){
            y = parseInt(document.getElementById('menu').style.top);
            //se è arrivato a 421px
            if (y == 31){
                //lo fermo
                clearInterval(i);
            }
            //altrimenti
            else {
                //continuo lo spostamento
                document.getElementById('menu').style.top= (y+1)+"px";
            }
        }
//fine menu
//inizio profilo
        function del(){
            document.getElementById('menu').innerHTML="| Profilo |";
            document.getElementById('home').innerHTML="<a id=\"homea\" href=\"#\" onClick=\"inizio2()\"> Home </a>";
        }
//fine profilo
//inizio contatti
        function del2(){
            document.getElementById('menu').innerHTML="| Contatti |";
            document.getElementById('home').innerHTML="<a id=\"homea\" href=\"#\" onClick=\"inizio2()\"> Home </a>";
        }
//fine contatti
//inizio chi siamo
        function del3(){
            document.getElementById('menu').innerHTML="| Chi Siamo |";
            document.getElementById('home').innerHTML="<a id=\"homea\" href=\"#\" onClick=\"inizio2()\"> Home </a>";
        }
//fine chisiamo
//inizio contattaci
        function del4(){
            document.getElementById('menu').innerHTML="| Contattaci |";
            document.getElementById('home').innerHTML="<a id=\"homea\" href=\"#\" onClick=\"inizio2()\"> Home </a>";
        }
//fine contattaci
//inizio news
        function del5(){
            document.getElementById('menu').innerHTML="| News |";
            document.getElementById('home').innerHTML="<a id=\"homea\" href=\"#\" onClick=\"inizio2()\"> Home </a>";
        }
// fine news

    </script>

        <style type="text/css">
            #pro{
                text-decoration: none;
                color:black;
            }
            #pro:hover{
                color:white;
            }
            #cont{
                text-decoration: none;
                color:black;
            }
            #cont:hover{
                color:white;
            }
            #chi{
                text-decoration: none;
                color:black;
            }
            #chi:hover{
                color:white;
            }
            #contatt{
                text-decoration: none;
                color:black;
            }
            #contatt:hover{
                color:white;
            }
            #new{
                text-decoration: none;
                color:black;
            }
            #new:hover{
                color:white;
            }
            #homea{
                text-decoration: none;
                color:black;
                padding-left: 0px;
                padding-top: 1px;
            }
            #homea:hover{
                color:white;
                text-decoration: underline;
            }
 

        </style>


        </head>


    <body onload="inizio();">

        

        <div id="home" style="padding-left: 2px; padding-top: 1px; background:gray; color:white; font-size:14px; font-family: comic-sans; width:70px; text-align: left; height:20px; position:absolute; top:10px; left:10px; z-index: 2;">Home</div>

        <div id="menu" style=" background: darkgray;  position:absolute; vertical-align: bottom; top:10px; left:10px; height:20px; font-size:14px; width:282px; display: none; z-index: 1;">
            Profilo | 
            Contatti |
            Chi siamo |
            Contattaci |
            News
        </div>


    </body>
</html>