Discussion :

[ickyknox]

bonjour à tous.

J'ai dans mon site : site

un bouton en haut à gauche (uniquement visible lorsque le site est réduit au max, comme pour les iphones).

j'aimerai en cliquant sur ce bouton, que mon menu s'affiche juste en dessous (pas qu'il soit apparent dès le départ)
Or je ne sais pas comment faire, si vous avez un tuto s'il vous plait ?

voici mon code html :

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
21
22
23
<div id="logo-phone">
<div id ="menu-phone"><img src="menu.png" alt="menu" /></div>
<a>Zazen en Provence</a>
</div>
 
 
<!-- DEBUT Menu -->
<div id="menu">
 	<ul>
		<li><a href=".html"class="active">ACCUEIL</a></li>	
		<li><a href=".html">PRESTATIONS</a></li>
		<li><a href=".html">SITUATION</a></li>
		<li><a href=".html">ACTIVITÉS</a></li>
        <li><a href=".html">TARIS</a></li>
        <li><a href=".html">CONTACT</a></li>
        <li><a href=".html">PHOTOS</a></li>
        <li><a href=".html">NOTRE ARBORETUM</a></li>
        <li><a href=".html">LIVRE D'OR</a></li>
        <li><a href=".html">NOS AMIS</a></li>
        <li><a href=".html">BLOG</a></li>
	</ul>
</div>
<!-- FIN Menu -->

[rodolphebrd]

Il faut utiliser la requète : menu responive sur Google.
En voici un par exemple.

[ickyknox]

merci rodolphe. Une fois de plus ton aide a été précieuse.

J'ai copié tout le code source.
Je suis actuellement en train de le traiter, mais je bloque sur passage (pour encore t'embeter ^^)

Code :

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
21
22
23
24
25
@media only screen and (max-width : 480px) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: #283744;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
}

sur mon site,
en cliquant sur le bouton MENU, j'ai donc un menu qui se déroule.
Mais le problème c'est que ce menu est entièrement blanc, et rien n'est écrit à l'intérieur

Pourtant lorsque je reviens en arrière, l'affichage du menu est correct

Code :

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
21
22
23
24
25
/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
	nav { 
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #576979;
		border-right: 1px solid #576979;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
}

qu'est ce qui pourrait clocher ?

[rodolphebrd]

Le problème vient de ---nav a#pull--- qui comble tout l'espace de la balise NAV.

il y a des interactions avec vos dimensions prédéfinies (@media).
Je vous conseille:

- de définir des dimensions (@media) comme dans le tuto (2 au plus) pour commencer puis aller pas à pas
- de bien respecter les dimensions des éléments (pixel ou pas, etc)
- de placer votre nav sans logo qui se superpose et qu'il faut faire disparaitre
- puis par la suite de personnaliser petit à petit