5568 sujets

Sémantique web et HTML

Menu déroulant de changement de langue problématique

Bonjour,

Mon site utilise une vieille version de Bootstrap, la 4.4.1, j'avais envisager de passer à la 5 mais j'ai un peu peu d'avoir trop de problèmes à gérer derrière donc pour le moment j'ai pas changé.

J'ai fait un petit menu déroulant pour permettre à mes visiteurs de changer la langue du site.
Les 3/4 du temps ça marche très bien mais parfois tout s'affiche au lieu de n'avoir que l'icône indiquant la fonction de changement de langue.

Voici mon code :

HTML :
<ul class="langue">
    <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-2x fa-language" title="Changer de langue"></span></a>
               <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                     <a href="/" class="dropdown-item">Français</a>
                     <a href="en/" class="dropdown-item">English</a>
              </div>
        </li>
</ul>

CSS :
.langue {
    float: right;
    position: relative;
    top: 0;
}

.langue li {
    list-style: none;
}

Mes scripts JS de Bootstrap ne sont ni en ASYNC ni en DEFER pour justement essayer d'éviter ce type de problème.

J'aimerai aussi que le menu s'affiche au passage de la souris mais je ne vois pas comment m'y prendre.

Quelqu'un aurait une idée ?
Modifié par Breat (02 Feb 2021 - 17:23)
Modérateur
Bonjour,

1) Le problème est ailleurs que dans le code que tu nous montres
2) Pour faire apparaitre ton menu au survol, tu peux tenter :
.langue:hover div {
	display:block;
}

Amicalement,
Merci pour le faire apparaître au passage de la souris c'est bon, c'était tout bête mais je n'y avait pas pensé.

Voila le lien vers mon CSS complet par défaut (le site utilise bien sûr une version minifée) : https://static.breat.fr/css/theme-sombre.css
Sinon il y a celui de Bootstrap : https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css
et l'URL du site en question : https://breat.fr

Si ça peut aider pour le fait que les CSS soient chargés correctement de temps en temps, j'avoue que je ne comprend pas du tout pourquoi.
Modifié par Breat (03 Feb 2021 - 21:00)
Oui j'me doute lol mais dans l'immédiat mon site est basé sur boostrap donc c'est à exclure actuellement bien que prévu pour la prochaine version quand j'aurais le temps.

Les kit clé en main c'est bien ça fait le job mais ça cafouille tout le temps, je l'ai enfin compris (oui j'ai pris mon temps) Smiley smile

Car si je change je dois refaire non seulement le site principal breat.fr mais également les 4 ou 5 sous domaines, s'il n'y avait que le portail ça irait très vite
Modifié par Breat (03 Feb 2021 - 21:12)
Modérateur
Bonjour,

Bon, ok, garde bootstrap pour le moment, mais si dans tes plans tu envisages de le supprimer, commence déjà par refaire ce petit sélecteur de langue (html + css + éventuellement quelques lignes de js). Ce n'est pas très compliqué, et il devrait ensuite se mettre à fonctionner sans problème. Et ça nous évitera de perdre une temps fou pour savoir pourquoi ça ne fonctionne pas "de temps en temps".

Amicalement,
Autant le HTML et CSS je me dépatouille mais le JS absolument pas et c'est aussi pour ça que j'avais pris bootstrap car cette partie qui m'est très obscure était fournie.

Du coup, pas d'idée sur le fait que le CSS est correctement chargé aléatoirement ?
bonjour à tous Smiley smile
cela fait des jours que je cherche sur qwant un menu déroulant de ce style quelqu'un n'aurait pas une adresse par Hasard Smiley cligne
Modérateur
Bonjour,

Breat a écrit :
Autant le HTML et CSS je me dépatouille mais le JS absolument pas et c'est aussi pour ça que j'avais pris bootstrap car cette partie qui m'est très obscure était fournie.

Pour quelqu'un qui fait un site sur les techniques du web, et ben, est-ce sérieux ? Smiley lol

Breat a écrit :
Du coup, pas d'idée sur le fait que le CSS est correctement chargé aléatoirement ?

T'as tellement de fichiers dans ta page (que tu charges sans doute pour quasiment rien en plus). Si le problème survient aléatoirement (pour ma part, je n'ai jamais réussi à le voir), c'est vraiment difficile de trouver, sauf coup de bol.

Déjà, tu peux supprimer tous tes "async". Mal maitrisés, ils ne peuvent que mettre le bazar. Il faut peut-être aussi regarder l'ordre de tes balises scripts.

Note que que tu as des erreurs dans la console (faire clic droit+inspecter). Ça a l'air d'être secondaire, mais ça ne doit pas aider.

Amicalement,
Modérateur
Bonjour,

Un exemple de petit menu dropdown (même pas besoin de js, mais css à adapter éventuellement):
.mylangue
{
	position:absolute;
	right:0;
	top:0;
	color:#007bff;
}
.mylangue ul, .mylangue li
{
	padding:0;
	margin:0;
	list-style-type:none;
}
.mylangue li
{
	position:relative;
	display:block;
	width:5rem;
}
.mylangue div
{
	display:none;
	position:absolute;
}
.mylangue:hover div
{
	display:block;
}
.mylangue div a
{
	display:block;
	color:#000;
	background:#fff;
	text-decoration:none;
	padding:0.5em;
}
.mylangue div a:hover
{
	background:#eee;
}
.mylangue li>a:after
{
	content:'\0025BE';
	position:absolute;
	right:1.5rem;
	top:0.5rem;
}

<ul class="mylangue">
<li>
<a role="button">
<span class="fas fa-2x fa-language" title="Changer de langue"></span>
</a>
<div>
<a href="https://breat.fr/">Français</a>
<a href="https://breat.fr/en/">English</a>
</div>
</li>
</ul>

Amicalement,
J'ai bien préciser dans mon précédent post : "je me dépatouille" Smiley smile

Mon site n'est pas sur les techniques du web, certes je donne quelques tuto là dessus mais c'est tout.

Ok je vais voir pour virer les async et jeter un œil à la console (j'avoue l'avoir complètement oublié celle là).

Merci pour le code que je garde précieusement pour après avoir corriger les erreurs etc.
Breat
j'ai été voir ton fichier css pour voir a quoi correspondait les différentes class de ton menu.
tout est sur la même ligne, c'est toi qui le fait ou tu utilise quelque chose. comment fait tu pour te retrouver et modifier quelque chose
excuse moi pour ma question idiote mais j'apprend
Sujet clos
Aller à