Menù smartphone con jquery non funziona

**Andrea44** · 19-02-2015, 18:19

Ciao a tutti

Ho provato a realizzare un menù per smartphone usando jquery, ma funziona solo in parte: quando il menù deve essere visualizzato appare per un breve istante per poi scomparire, ma questo solo quando nav#menu e div.close_menu hanno come valore display:none, mentre se hanno display:inline-block funziona tutto correttamente

Posto l'allegato del codice
codice.zip

Grazie a tutti in anticipo

**cavicchiandrea** · 19-02-2015, 20:24

Posta il link alla pagina pubblica, diventa più difficile dare aiuti quando si deve ricreare tutto da uno .zip

**Andrea44** · 19-02-2015, 21:29

Giusto, scusate. Ecco il codice

codice:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="it">
    <head>
        <meta charset="utf-8">
        
        <title>Nome sito</title>
        <link rel="icon" href="IMG/Logo_link.png">
        
        <link rel="stylesheet" href="index.css">
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>


    </head>
    <body>
        
        <header>
        
            <div id="social">
                <a href="" class="open_menu"><img src="IMG/icon-menu.png" alt="Menu"/></a>
            </div>
            
            <nav id="menu">
                <ul>
                    <li>Home</li>
                    <li>Chi siamo</li>
                    <li>Servizi</li>
                    <li>Contatti</li>
                    <li>Collaboratori</li>
                    <li>Preventivi</li>
                </ul>
            </nav>
            
            <div class="close_menu"></div>
            
        </header>
    </body>
</html>

codice:


/* HEADER */
header{ 
    width:100%;
    display:block;
    margin:0;
    margin-bottom:4%;
    border:0;
    padding:0;
}


/*SOCIAL*/


div#social{
    display:inline-block;
    margin:0;
    border:0;
    width:100%;
    background-color:#3b3d3f;
}


div#social a{
    display:inline-block;
    float:right;
    margin:0;
    margin-left:1%;
    border:0;
    padding:0;
    width:12%;
    height:auto;
}


div#social a.open_menu{
    float:left;
}


div#social img{
    display:inline-block;
    margin:0;
    border:0;
    padding:0;
    width:100%;
    height:auto;
}


/* NAV */
nav#menu{
    display:none;/*inline-block;*/
    position:fixed;
    top:0;
    left:0;
    float:left;
    width:50%;
    min-height:100%;
    height:100%;
    background-color:#3b3d3f;
    z-index:1;
}


nav#menu ul{
    margin:0;
    border:0;
    padding:0;
    display:inline-block;
    list-style:none;
}
nav#menu li{
    display:inline-block;
    margin:0;
    border:0;
    padding:0;
    width:100%;
    border-bottom: 3px solid white;
}


nav#menu a{
    color: white;
    display: inline-block;
    margin:0;
    border:0;
    padding:8% 4%;
    width: 92%;    
    
    text-align: left;
    font-size: 40px;
    text-decoration:none;
}


div.close_menu{
    display:none;/*inline-block;*/
    float:right;
    position:absolute;
    top:0;
    right:0;
    width:50%;
    min-height:100%;
    height:100%;
    z-index:1;
}

codice:

$(document).ready(function(){
    $("a.open_menu").click(function(){//open menù
        $("nav#menu").css("display","inline-block");
        $("div.close_menu").css("display","inline-block");
    });
    
    $("div.close_menu").click(function(){//close menù
        $("nav#menu").css("display","none");
        $("div.close_menu").css("display","none");
    });
});

**cavicchiandrea** · 19-02-2015, 21:54

A) perché includi due librerie jquery?
B) perché non usi jquerymobile?
C) sicuro d'avere le conoscenze adeguate per sviluppare il progetto è che non sia il caso di studiare meglio jquery (soprattutto la versione per mobile)?

Discussione: Menù smartphone con jquery non funziona

Strumenti discussione

Ricerca discussione

Visualizza

Menù smartphone con jquery non funziona

Permessi di invio