Mettre menu responsive

bobibob -  
Bonjour,

alors voilà je vous présente mon menu réalisé en html avec bootstrap et j'aimerai qu'il soit responsive et étant jeune débutant je ne sais pas trop comment faire pour le rendre responsive :/ 

<nav>
		<ul>
			<li><a href="index.php">Accueil</a></li>
			<li class="deroulant"><a href="commerceVentes.php">Commerce | Ventes</a>
				<ul class="sous">
					<li><a href="commerceVentes.php">Commerce | Ventes</a></li>
					<li><a href="autresVentes.php">Autres ventes</a></li>			
				</ul>
			</li>
			<li class="deroulant"><a href="produitsCollectes.php">Collecte | Achats</a>
				<ul class="sous">
					<li><a href="produitsCollectes.php">Produits collectés</a></li>
					<li><a href="bidulesCapsules.php">Activité bidules capsules</a></li>	
				</ul>
			</li>
			<li class="deroulant"><a href="broyage.php">Autres prestations</a>
				<ul class="sous">
					<li><a href="broyage.php">Broyage</a></li>
					<li><a href="triMagnetique.php">Tri magnétique</a></li>	
					<li><a href="criblage.php">Criblage</a></li>	
					<li><a href="triDensimetrique.php">Tri densimétrique</a></li>	
					<li><a href="triElectrostatique.php">Tri électrostatique</a></li>	
				</ul>
			</li>
			<li><a href="contact.php">Contact</a></li>
		</ul>
	</nav>

3 réponses

  2.  diablo13800
    Envoyé alors ce que vous essayé pour pouvoir vous guider dans la démarche.

    Car là avec le code que vous avez envoyé il n'y a aucune utilisation de boostrap.

    Et vous utilisez actuellement des classes dont je ne connais pas les définitions.

    Poster votre CSS.

    En théorie, si dans vos classes vous utilisez des % au lieu de px pour width et height le menu sera un peu plus responsible.
    1. bobibob
      J'en ai oublié de poster le CSS ahah, voilà le CSS de mon menu : 

      *{
	margin: 0px;
	padding: 0px;
	font-family: Avenir, sans-serif;
}

nav{
	width: 60%;
	margin: 0 auto;
	position: sticky;
	top: 0px;
	z-index: 1001;
}

nav ul{
	list-style-type: none;
}

nav ul li{
	float: left;
	width: 25%;
	text-align: center;
}

nav ul::after{
	content: "";
	display: table;
	clear: both;
}

nav a{
	display: block;
	text-decoration: none;
	color: white;
	background-color: rgba(135,206,250, 0.7);
	border-bottom: 2px solid transparent;
	padding: 10px 0px;
}

nav a:hover{
	color: rgb(135,206,250);
	background-color: white;
	border-bottom: 2px solid lightgreen;
}

.sous{
	display: none;
	box-shadow: 0px 1px 2px #CCC;
	background-color: white;
}

nav > ul li:hover .sous{
	display: block;
}

.sous li{
	float: none;
	width: 100%;
	text-align: left;
}

.sous a{
	padding: 10px;
	border-bottom: none;
}

.sous a:hover{
	border-bottom: none;
	color: rgb(135,206,250);
	background-color: white;
}

.deroulant > a::after{
	content: "▼";
	font-size: 12px;
}

.sous{
	display: none;
	box-shadow: 0px 1px 2px #CCC;
	background-color: rgba(135,206,250,0.7);
	color: white;
	position: absolute;
	width: 100%;
	z-index: 1000;
}

nav ul li{
	float: left;
	width: 20%;
	text-align: center;
	position: relative;
}
    2.  diablo13800
      @bobibobDéjà vous avez des classes qui se répètent. ( Exemple .sous y est deux fois. "nav ul li" également)

      Ensuite pour que Boostrap fonctionne correctement avec son système de grid, vous ne devez pas définir les tailles dans vos classes " secondaire" puisque boostrap s'en charge pour vous.
    3. bobibob
      @diablo13800Je suis désolé, mais j'ai confondu, je fais 2 sites en même temps et c'est sur l'autre que j'ai un menu bootstrap :/ là c'était un menu que j'avais trouvé, html + css sur internet :/

      Et j'ai terminé mon site, il me reste plus qu'à mettre ce menu en responsive et je peux le publier..
    4. diablo13800
      @bobibobJe vois pas le soucis avec votre site, j'ai récupéré le code + css, et tester en local chez moi et j'ai bien sur responsive…

      Quel navigateur vous utilisez?
    5. bobibob
      @diablo13800Chrome, mais j'ai essayé de rétrécir ma page et j'ai aussi essayer de regarder sur safari de mon iPhone et le menu ne se met pas en responsive :/
  3. diablo13800
    Le comportement de votre site est tout à fait normal.

    Vous devez voir du coté des media query , qui vous permet d'adapter le CSS en fonction du support ( taille de l'écran par exemple ) :
    https://developer.mozilla.org/fr/docs/Web/CSS/@media

    1. bobibob
      J'avais déjà commencé à regarder ça et je pense que c'est la solution sauf que dans mon @media, je ne sais pas quoi mettre pour bien adapter le responsive :/
    2. diablo13800
      @bobibobIl vous suffit de voir a combien de pixel votre menu perd son comportement pour l'adapter grâce à des instruction comme ceci : 

      @media(max-width:600px){
          .sous {
              font-size: 8px;
          }
      }


      ( C'est un pur exemple bien sur )
    4. diablo13800
      @bobibobn'hésitez pas à revenir si vous avez encore des soucis la dessus ou pour une aide si ca fonctionne pas :)

Discussions similaires

Comment faire afin d'accéder au boot menu ou BIOS sous MSI ?
Kaheil

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490

110 réponses
Mon PC marque press the esc key for startup menu
Jonas2022

5 réponses
menu caché
laurent

7 réponses
Activer le bluetooth sur smart TV Samsung
Odayakana

4 réponses