28172 sujets

CSS et mise en forme, CSS3

Adapter la largeur du menu avec CSS calc()

Bonjour à tous,

Je travaille sur un projet qui nécessite l’adaptation de la largeur d’un menu en fonction de la taille de l’écran. J’aimerais que la largeur du menu soit de 77 % pour les écrans jusqu’à 1200px, et de 50 % pour les écrans à partir de 3840px. Entre ces deux résolutions, la largeur du menu devrait être ajustée progressivement.

Pourriez-vous m’aider à réaliser cette adaptation en utilisant la fonction calc() dans mon fichier CSS?? Votre expertise serait grandement appréciée.

Cordialement.
Bonjour kerlutinoec,

Merci pour votre suggestion d'utiliser vw et des media queries pour ajuster la largeur du menu. Cependant, il semble qu'il y ait eu une confusion concernant mes besoins. Je recherche un ajustement progressif de la largeur du menu entre les résolutions de 1200px et 3840px, plutôt qu'un simple changement entre deux valeurs fixes.

J'utilise actuellement la fonction calc() pour obtenir un ajustement plus précis de la largeur du menu à mesure que la taille de l'écran change entre ces deux résolutions.


:root {
  --menu-largeur: 77%; 
}
/* Largeur des menus variant de 77 % à 50 % entre les résolutions 1200 à 3840 px */
@media (min-width: 1201px) {
  :root {
    --menu-largeur: calc(77% + ((50 - 77) / (3840 - 1201) * (100vw - 1201px) / 100));
  }
}


Si vous avez des conseils ou des suggestions pour atteindre cet ajustement progressif en utilisant une autre méthode, je serais ravi de les entendre. Peut-être existe-t-il une approche que je n'ai pas encore envisagée.

J’aimerais aussi comprendre la raison pour laquelle ma solution ne fonctionne pas.

Cordialement.
Modérateur
Bonjour,

J'aurais fait comme ci-dessous :
:root {
	--a: 1200;
	--b: 3840;
	--ra: 77;
	--rb: 50;
	--A: calc(var(--a) * 1px);
	--B: calc(var(--b) * 1px);
	--RA: calc(var(--ra) * 1vw);
	--RB: calc(var(--rb) * 1vw);
	--c: calc(var(--b) - var(--a));
	--d: calc((var(--ra) - var(--rb)) * var(--b) / 100);
	--menu-largeur: var(--RA);
}
@media (min-width: 1200px) {
	:root {
		--menu-largeur: calc(var(--RA) - (100vw - var(--A)) * var(--d) / var(--c));
	}
}
@media (min-width: 3840px) {
	:root {
		--menu-largeur: var(--RB);
	}
}

Explications succintes :
1) à 1200 px, il faut que la largeur du menu soit de 77vw. La largeur du menu pour des largeurs du viewport supérieures à 1200px peut alors être calculée par 77vw - alpha * (100vw - 1200px).
2) à 3840 px, il faut que la largeur du menu soit de 50vw. On en déduit la valeur de alpha.

En espérant que je n'aies pas été étourdi, ça devrait fonctionner.

Amicalement,
Modifié par parsimonhi (14 Apr 2023 - 14:18)
Meilleure solution
Modérateur
Hello,

J'essaie…

:root {
  --menu-largeur: 50%; 
}
/* Largeur des menus variant de 77 % à 50 % entre les résolutions 1200 à 3840 px */
@media (min-width: 1201px) {
  :root {
    --menu-largeur: calc(((100vw - 1200px) / 2) + 1200px);
}

J'ajouterais en plus, un max-width: 77%; directement sur ton selecteur.
Smiley smile
Bonjour à vous deux,

Je tiens à vous remercier pour vos réponses et le temps que vous avez consacré à m'aider avec ma question.

J'ai trouvé une erreur dans ma solution. Il fallait écrire 0.77 et non 77%, mais le résultat reste trop imprécis.

@parsimonhi : Votre solution est très précise et fonctionne parfaitement. J'apprécie vraiment votre approche et vos explications détaillées. J'ai simplement modifié les noms de variables pour les rendre plus compréhensibles et les adapter à mon contexte. Merci encore pour votre aide précieuse !

@Yordi : Merci d'avoir pris le temps de proposer une solution. Bien que celle-ci ne corresponde pas exactement à ce que je recherchais, j'apprécie votre effort et votre contribution.

Je vous souhaite à tous les deux une excellente journée et encore merci pour votre aide !

Amicalement,
Modifié par Pyanepsion (14 Apr 2023 - 16:11)
Prévenir un modérateur
Répondre au sujet
Aller à