Mettre menu responsive

Signaler
-
Messages postés
2542
Date d'inscription
jeudi 2 juillet 2015
Statut
Membre
Dernière intervention
2 avril 2021
-
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

Messages postés
2542
Date d'inscription
jeudi 2 juillet 2015
Statut
Membre
Dernière intervention
2 avril 2021
1 481
Bonjour,

Vous dites utiliser bootstrap, faite un tour du coté du grid system sur la doc bootstrap :
https://getbootstrap.com/docs/4.0/layout/grid/

A Vaincre sans péril, on triomphe sans gloire.
Pierre Corneille, Le Cid 
J'ai déjà essayé avec des col mais en vain :/
Messages postés
2542
Date d'inscription
jeudi 2 juillet 2015
Statut
Membre
Dernière intervention
2 avril 2021
1 481
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.
>
Messages postés
2542
Date d'inscription
jeudi 2 juillet 2015
Statut
Membre
Dernière intervention
2 avril 2021

Je 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..
Messages postés
2542
Date d'inscription
jeudi 2 juillet 2015
Statut
Membre
Dernière intervention
2 avril 2021
1 481 > bobibob
Je 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?
>
Messages postés
2542
Date d'inscription
jeudi 2 juillet 2015
Statut
Membre
Dernière intervention
2 avril 2021

Chrome, 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 :/
Messages postés
2542
Date d'inscription
jeudi 2 juillet 2015
Statut
Membre
Dernière intervention
2 avril 2021
1 481 > bobibob
Pourtant j'ai bien la taille du menu qui diminue comme ce qui est demandé par votre code.

Vous voulez un autre comportement?
>
Messages postés
2542
Date d'inscription
jeudi 2 juillet 2015
Statut
Membre
Dernière intervention
2 avril 2021

Je voudrais qu'en regardant d'un quelconque téléphone, avoir un même menu bien présenté comme pour une vrai page internet, et moi quand je regarde sur mon téléphone, le menu diminue mais les écritures se chevauchent et certains longs titres font 2/3 lignes alors que d'autres en font qu'une et comme j'ai 3 menus déroulants, c'est un peu compliqué tout se chevauche et sort desfois du fond bleu et comme c'est une écriture blanche, desfois nous ne voyons même plus ce qu'il y a d'écrit.

Bref, c'est un petit peu compliqué :/ je voudrais donc juste que mon menu soit bien présenté et beau si jamais on le regarde d'un téléphone.
Messages postés
2542
Date d'inscription
jeudi 2 juillet 2015
Statut
Membre
Dernière intervention
2 avril 2021
1 481
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


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 :/
Messages postés
2542
Date d'inscription
jeudi 2 juillet 2015
Statut
Membre
Dernière intervention
2 avril 2021
1 481 > bobibob
Il 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 )
>
Messages postés
2542
Date d'inscription
jeudi 2 juillet 2015
Statut
Membre
Dernière intervention
2 avril 2021

Ok merci beaucoup je vais essayer ça :)
Messages postés
2542
Date d'inscription
jeudi 2 juillet 2015
Statut
Membre
Dernière intervention
2 avril 2021
1 481 > bobibob
n'hésitez pas à revenir si vous avez encore des soucis la dessus ou pour une aide si ca fonctionne pas :)