Bonjour.

Je souhaite faire un menu déroulant pour la version mobile d'un site web.

J'ai tout d'abord une barre fixe:

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="row" id="menu_responsive">
	<div class="col-xs-3 col-sm-2 col-md-1" id="panier_menu_responsive">
		<a href="panier.aero"><div class="glyphicon glyphicon-shopping-cart"></div></a> <span class="badge">{$QUANTITE_TOTALE|default:'0'}</span>
	</div>
 
	<div class="col-xs-3 col-sm-2 col-md-1" id="loupe_menu_responsive">	
		<a onClick="afficherBarreRecherche('barre_de_recherche')"><div class="glyphicon glyphicon-search"></div></a></span>
	</div>
 
	<div class="col-xs-offset-3 col-xs-3 col-sm-offset-6 col-sm-2 col-md-offset-9 col-md-1" id="hamburger_menu_responsive">
		<a onClick="afficherMenu('menu_deroule_responsive')"><div class="glyphicon glyphicon-menu-hamburger"></div></a>
	</div>
</div>

Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
 
	#menu_responsive {
		position: fixed;
		background-color: #222222;		
		height: 30px;
		margin: 0;
		padding-top:5px;
		z-index:7;
		width: 100%;
	}

...qui déroule mon menu:

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<div class="row" id="menu_deroule_responsive">
	<div id="content_menu_deroule_responsive">
		<div class="divider_line"></div>
		<div class="col-xs-12">
			<a href="index.aero"><div class="glyphicon glyphicon-home"></div> Accueil</a>
		</div>
		<div class="divider_line"></div>
		<div class="col-xs-12">
			<a onClick="afficher('rayons_menu_responsive')"><div class="glyphicon glyphicon-list"></div> Rayons et gammes<span class="caret"></span></a>
		</div>
                 ...
                 ...
                 ...
        </div>
</div>
 
<div class="container">    
// le contenu du site
</div>

Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
#menu_deroule_responsive {
    display: none;
    position: absolute;
    top: 30px;
    width: 100%;
    margin: 0;
    background-color: #222222;			
    z-index: 6;
    padding-left:5px;
}
 
#content_menu_deroule_responsive {
    position: relative;
    top: 0;
    left: 0;			
}

Or lorsque je déroule mon menu et que j'essaie de scroller (avec le doigt) je vois que c'est la div container en dessous qui scrolle, et non mon menu.
J'ai lu beaucoup de solution sur le net en anglais à base de -webkit-overflow-scrolling: touch; mais ça n'a jamais fonctionné. Surement car je ne l'avais pas mis au bon endroit.

J'ai donc besoin de votre aide

EDIT: j'ai oublié de spécifier que le comportement voulu fonctionne bien sous Android