Ragazzi mi date una mano a creare un menu per mobile ?
In poche parole io sto provando a farlo con jquery e css (ovviamente), ma non sono bravissimo con Jquery.... anzi.

In pratica ho un sito drupal e voglio creare un menu che appaia solo da mobile.
Se la larghezza massima (max-width) è di tot pixel, appare l'immagine del pulsante che cliccando farà apparire il menu.

Questo piccolo menu sarà nel content che avrà larghezza di 100% ...
Questo è l'html del menu:

codice:
<div id="scorciatoia" style="width:100%;display:none">
  <div id="menuprincipale" class="voce">
    <span id="MENU"><a href="#">Menu</a></span>
  </div>
  <div id="menuprincipale" class="voce">
    <span id="LOGIN"><a href="#">Login</a></span>
  </div>
  <div id="menuprincipale" class="voce">
    <a href="#"><span id="GorHOME"></span></a>
  </div>
  <div style="clear:both"></div>
</div>
Il div padre #scociatoia è nascosto perchè deve apparire solo da mobile



questo è il css:

codice:
@media (max-width: 1025px) {

#menuprincipale, .voce{
    background: none repeat scroll 0 0 #646464;    
    box-shadow: 0 0 2px #ffdf00;
    font-size: 1.2em;
    height: 40px;
    margin: 0 0 50px;
    padding-top: 20px;
    width: 33%;
}


#menuprincipale a {
    color: #e9e9e9;
}


}
e questo il js:


codice:
$(document).ready(function(){


$('#button-mobile').toggle(
    function() {
        $('#scorciatoia').show();
         var GorHOME= document.getElementById("block-gtranslate-gtranslate");
         if (GorHOME == null) {
            document.getElementById("GorHOME").innerHTML= '<a href="http://www.mapsism.com">Home</a>';
         }
         else if (GorHOME != null) {
            document.getElementById("GorHOME").innerHTML= "Translate";
         }
            if ($('#MENU').click()){
                $('#scorciatoia').hide();
                $('#sidebar-first').css('left', '0px')
                $('#sidebar-first').css('position', 'relative')
                $('#block-user-online').hide();
                $('#block-block-3').hide();
                $('#block-block-4').hide();
                $('#block-gtranslate-gtranslate').hide();
                $('#block-user-login').hide();
            }
            else if ($('#LOGIN').click()){
                $('#scorciatoia').hide();
                $('#sidebar-first').css('left', '0px')
                $('#sidebar-first').css('position', 'relative')
                $('#block-user-online').hide();
                $('#block-block-3').hide();
                $('#block-block-4').hide();
                $('#block-gtranslate-gtranslate').hide();
                $('#block-system-main-menu').hide();
            }
            else if (($('#GorHOME').click())&&(GorHOME != null)) {
                $('#scorciatoia').hide();
                $('#sidebar-first').css('left', '0px')
                $('#sidebar-first').css('position', 'relative')
                $('#block-user-online').hide();
                $('#block-block-3').hide();
                $('#block-block-4').hide();
                $('#block-user-login').hide();
                $('#block-system-main-menu').hide();
            }
                        
    },
    function() {
        $('#sidebar-first').css('left', '-2000px')
        $('#sidebar-first').css('position', 'absolute')
    })
});


In poche parole, in linea teorica dovrebbe fare questo:

1) clicchi sul pulsante e ti MOSTRA il piccolo menu da mobile #scorciatoia
2) il menu è composto da 3 caselle:

Menu ---- Login ----- (Translate o Home)

3) se clicchi su una delle tre voci ti appare la sidebar con tutti i blocchi nascosti eccezion fatta per il blocco della voce cliccata

4) clicchi sul pulsante e scompare la sidebar




Drupal è fatto a blocchi, e il menu, google translate, il login, e i contatori delle visite sono tutti all'interno del proprio blocco.
I blocchi si trovano nella sidebar.

Per alcune pagine però ho vietato che il blocco di GOOGLE TRANSLATE venga creato, ecco perchè ad inizio codice js controllo prima se il suddetto blocco esiste. Perchè se non esiste, allora nella terza casella deve essere mostrata la scritta "Home" (dove cliccandoci si verrà indirizzati alla homepage del sito).

Ho caricato tutto sul sito ma niente... cliccando sul pulsante non appare il piccolo menu e non capisco il perchè...



Spero di non aver sbagliato sezione e che possiate darmi una mano!

Vi ringrazio in anticipo



Saluti