Positionnement ou transformation ...

Bonjour à vous,

en fait, j'aimerais bien changer la position du menu concernant les langues sur la version smartphone.

Pour la version smartphone, le choix des langues se trouvent dans le menu et j'aimerais sortir le menu pour le centrer entre les liens "home" et "help".

Voici le code de ma page : https://codepen.io/joseph5/pen/JjdbpbZ

Pour cela, je pense que je peux soit utiliser le positionnement, soit utiliser les transformations.

Peut-être qu'une solution serait de sortir cette partie du menu et d'en faire un autre menu complètement indépendant du 1er ? Cela nécessiterait la modification du code HTML également, je suppose ?

Avez-vous une idée de comment je peux faire pour arriver à mon but ?

Merci d'avance

Bonne journée,
Thierry
Modifié par THIRT05 (22 Feb 2020 - 11:57)

Pour le positionnement, il n' y a que position:fixed; qui te permettrais de le repositionner à l’écran indépendamment de la position de son parent si tu ne souhaite pas modifier la structure HTML.

par exemple dans ta requête média :

  .site-container #centered_nav.rc_nav/*.responsive */ #languages.dropdown-menus {
    display: block;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translatex(-50%);
    overflow: visible;
    background: inherit;
    width: 160px ;
    height: auto ;
  }

Modifié par gcyrillus (22 Feb 2020 - 12:53)

Bonjour gcyrillus,

je tenais à vous remercier pour votre aide. Cela répond parfaitement à ma demande.

Par contre, ne serait-il pas préférable d'opter pour une autre solution en modifiant entre autre le code HTML ?

Si vous opteriez pour cette solution, comment résoudriez-vous le problème ?

Merci d'avance

Bonne journée
Thierry

THIRT05 a écrit :

...
Par contre, ne serait-il pas préférable d'opter pour une autre solution en modifiant entre autre le code HTML ?

Si vous opteriez pour cette solution, comment résoudriez-vous le problème ?
...

et l'eau,

tu auras beau changer le code html, tu auras strictement le même comportement. Je t'invite à consulter la démo que propose le w3school

Si le html de la navbarre est en bas, tu obtiens le même résultat. C'est dû au positionnement fixed. Dans le cas où ce type de positionnement fixed ne te convient pas, tu peux très bien éditer html et css en faisant :

<header class="header">
                <div id="header__logo">
                    <a href="#" class="header__logo">
                        home
                    </a>
                </div>
              <div class="dropdown-menus" id="languages">
                        <button class="dropbtn">FR</button>
                        <div class="dropdown-contents">
                            <a href="index.php?lang=fr">FR</a>
                            <a href="index.php?lang=en">EN</a>
                            <a href="index.php?lang=nl">NL</a>
                            <a href="index.php?lang=de">DE</a>
                        </div>
                    </div> 
                <div class="help">
                    <a class="link" href="#"><span>help</span></a>
                </div>
            </header>

.header{
  display: flex;
  justify-content: space-between;
}

#languages button{
  color:black;
}

Modifié par niuxe (22 Feb 2020 - 13:40)

Bonjour,

tout d'abord, merci pour votre réponse.

En fait, j'ai intégré le code à mon site mais j'ai 2 problèmes :

1) l'hamburger qui se trouve au milieu devrait se trouver sur la droite.
2) Le bouton avec le choix des langues ne réagit pas bien. Quand on survole le bouton, il affiche bien le sous-menu avec les différentes langues. Par contre, si on veut aller sur le lien FR ou EN du côté gauche, le sous-menu disparaît directement. Apparemment, il y aurait un conflit avec le code CSS du menu de gauche.

Voici le code de ma page : https://codepen.io/joseph5/pen/mdJOYPv

Merci d'avance

Bonne journée
Thierry
Modifié par THIRT05 (23 Feb 2020 - 14:13)

Celui-ci semble bien fonctionner : https://codepen.io/joseph5/pen/JjdbpbZ Tu peut enlever le width:160px si tu estime le menu langue trop large .?

Entre le menu et les enfant, si il y a un trou, le survol est perdu et le menu se referme. Apparemment ce second pen est plein de soucis que tu n'avais pas.
cdt,

Bonjour gcyrillus et Niuxe,

tout d'abord, je tenais à vous remercier pour votre aide par rapport à mon message.

En fait, j'ai donc opté pour la solution de Niuxe avec l'utilisation des flexboxes.

La source se trouve dans le lien suivant : https://codepen.io/joseph5/pen/WNvRwqR

La version smartphone correspond à ce que j'ai envie de faire. Par contre, pour la version laptop, j'aimerais bien que le menu des langues apparaisse en-dessous du bouton help dans le menu ci-dessous.

J'arrive à le positionner mais il est caché par le menu entre autre.

Avez-vous une idée du problème ?

Merci d'avance

Bonne journée
Thierry

Et l'eau,

Ces jours ci pas eu le temps de revoir ton souci. En faisant court :
* ceci

<div class="dropdown-menus" id="languages">

en cela :

<div class="dropdown-menus languages">

* tu refais ton css en conséquence pour le menu déroulant
* tu ajoutes ceci dans ton js :

$('#centered_nav').append( $('.languages').eq(0).html() )

* tu reprends l'idée de gcyrillus pour le css
* pour gérer le responsive, tu fais "je te montre, je te cache suivant la résolution"
Modifié par niuxe (26 Feb 2020 - 22:00)