28111 sujets

CSS et mise en forme, CSS3

Problème de positionnement ...

Bonjour à tous,

je me permets de vous contacter car j'ai un problème de positionnement.

J'essaie d'afficher le menu sous différents boutons mais ce menu s'affiche toujours sous le 1er bouton.

Voici le code HTML :


<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <!-- Permet d'empêcher l'utilisateur de zoomer -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <title>Menu Responsive</title>
    </head>
    <body>
    <div class="container">
        <div class="preview">
            <div class="lastname">
                Charles
            </div>
            <div class="dropdown">
                <input type="button" onclick="actions()" class="dropbtn" value="Actions">
                <div id="myDropdown" class="dropdown-content">
                    <a href="update.php">Modifier</a>
                    <a href="delete.php">Supprimer</a>
                    <a href="insert.php">Insérer</a>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="preview">
            <div class="lastname">
                Jean-Philippe
            </div>
            <div class="dropdown">
                <input type="button" onclick="actions()" class="dropbtn" value="Actions">
                <div id="myDropdown" class="dropdown-content">
                    <a href="update.php">Modifier</a>
                    <a href="delete.php">Supprimer</a>
                    <a href="insert.php">Insérer</a>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="preview">
            <div class="lastname">
                Jean-Pierre
            </div>
            <div class="dropdown">
                <input type="button" onclick="actions()" class="dropbtn" value="Actions">
                <div id="myDropdown" class="dropdown-content">
                    <a href="update.php">Modifier</a>
                    <a href="delete.php">Supprimer</a>
                    <a href="insert.php">Insérer</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Voici le code CSS :


            /* Dropdown Button */
            .dropbtn {
                background-color: #3498DB;
                color: white;
                padding: 16px;
                font-size: 16px;
                border: none;
                cursor: pointer;
            }

            /* Dropdown button on hover & focus */
            .dropbtn:hover, .dropbtn:focus {
                background-color: #2980B9;
            }

            /* The container <div> - needed to position the dropdown content */
            .dropdown {
                position: relative;
                display: inline-block;
            }

            /* Dropdown Content (Hidden by Default) */
            .dropdown-content {
                display: none;
                /*position: absolute;*/
                background-color: #f1f1f1;
                min-width: 160px;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                z-index: 1;
            }

            /* Links inside the dropdown */
            .dropdown-content a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
            }

            /* Change color of dropdown links on hover */
            .dropdown-content a:hover {background-color: #ddd}

            /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
            .show {display:block;}


Voici le code javascript :


        /* When the user clicks on the button, toggle between hiding and showing the dropdown content */
        function actions() {
            document.getElementById("myDropdown").classList.toggle("show");
        }

        // Close the dropdown menu if the user clicks outside of it
        window.onclick = function(event) {
            if (!event.target.matches('.dropbtn')) {
                var dropdowns = document.getElementsByClassName("dropdown-content");
                var i;
                for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
        }


J'aimerais que ce menu s'affiche en-dessous des boutons correspondants. Je suppose qu'il s'agit d'un problème de positionnement mais je ne suis pas un expert en positionnement.

Par hasard, avez-vous connaissance d'un site où le positionnement est bien expliqué ?

Merci pour votre aide.

Bonne journée
Thierry
Modérateur
Et l'eau,

correctif de l'html : 

<div class="container">
    <div class="preview">
        <div class="lastname">
            Charles
        </div>
        <div class="dropdown">
            <input type="button" class="dropbtn" value="Actions">
            <nav id="myDropdown" class="dropdown-content">
                <a href="update.php">Modifier</a>
                <a href="delete.php">Supprimer</a>
                <a href="insert.php">Insérer</a>
            </nav>
        </div>
    </div>
</div>


correctif de ton js : 

Array.from(document.querySelectorAll('.container .dropbtn')).forEach(($button)=>{
    $button.addEventListener('click', (e)=>{
        let $actionNav = $button.nextElementSibling;
        if($actionNav.classList.contains('show')){
            $actionNav.classList.remove('show');
        }else{
            $actionNav.classList.add('show');
        }
        e.preventDefault();
    })
});


1. tu n'es pas obligé d'utiliser la var event pour ton cas. Tu te casses la tête pour rien....
2. je n'ai pas regardé ton css. peut être qu'il s'est glissé des erreurs d'appréciations. je laisse un membre en parler au cas où.
3. ce n'est pas un problème de positionnement mais plutôt un souci de JS
Modifié par niuxe (06 Jul 2019 - 22:39)
Bonjour Niuxe,

tout d'abord, je tenais à vous remercier pour votre aide.

Votre solution fonctionne à merveille.

Cependant, j'aurai encore besoin de vous pour 2 autres points :

1) Comment puis-je faire en sorte que le menu déroulant en-dessous du bouton occupe la même largeur que le bouton lui-même ?
2) Comment puis-je disparaître le menu quand l'utilisateur scrolle ou clique en dehors du menu ?

Merci d'avance pour votre aide.

Bonne journée
Thierry
Modérateur
Et l'eau,

je n'avais pas vu les autres erreurs dans ton html (je ne te souhaite pas la fatigue que j'ai en ce moment)


<div class="container">
    <div class="preview">
        <div class="lastname">
            Charles
        </div>
        <div class="dropdown">
            <input type="button" class="dropbtn" value="Actions">
            <nav class="dropdown-content">
                <a href="update.php?id=<?= $row->id ?>">Modifier</a>
                <a href="delete.php?id=<?= $row->id ?>">Supprimer</a>
                <!-- insérer quoi ? -->
                <a href="insert.php?id=<?= $row->id ?>">Insérer</a> 
            </nav>
        </div>
    </div>
</div>


le css à corriger et à ajouter (je ne l'ai pas lu) 

.dropdown-content {
    display: none;
    /*position: absolute;*/
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
}
#overlay{
  position:fixed;
  top:0;right:0;bottom:0;left:0;z-index:50;
  display:none;
}

#overlay.show {display:block;}


le js

window.addEventListener('DOMContentLoaded',()=>{
    (()=>{
        document.body.insertAdjacentHTML('afterbegin', '<div id="overlay"></div>');
        let $overlay = document.getElementById('overlay');
        Array.from(document.querySelectorAll('.container .dropbtn')).forEach(($button)=>{
            $button.addEventListener('click', (e)=>{
                let $actionNav = $button.nextElementSibling;
                if($actionNav.classList.contains('show')){
                    $actionNav.classList.remove('show');
                    $overlay.classList.remove('show');
                }else{
                    $actionNav.classList.add('show');
                    $overlay.classList.add('show');

                }
                e.preventDefault();
            })
        });
        $overlay.addEventListener('click',()=>{
            $overlay.classList.remove('show');
            Array.from(document.querySelectorAll('.container .dropdown-content')).forEach(($dropDown)=>{
                $dropDown.classList.remove('show');
            });
        })
    })();
})

Modifié par niuxe (09 Jul 2019 - 12:18)
Bonjour Niuxe,

merci beaucoup pour votre aide.

J'ai mis la solution sur Fiddle mais je ne sais pas pourquoi elle ne fonctionne pas.

Voici le lien : https://jsfiddle.net/37tar0p5/

Je me demandais s'il n'existait pas une solution plus simple pour faire disparaître le menu.

En tout cas, encore merci pour votre aide.

Bonne journée à vous,
Thierry
Modérateur
https://codepen.io/anon/pen/WqLQoP

Sur un serveur en local, ça fonctionne très bien....

<<<EDIT
attention, au z-index.... Ton css est mal fichu. Il faut mettre le z-index sur .dropdown et non sur .dropdown-content


.dropdown {
            position: relative;
            display: inline-block;
          z-index:150;
        }


jsfiddle.net ==> ouais bof.....
EDIT;
Modifié par niuxe (09 Jul 2019 - 14:28)
Modérateur
THIRT05 a écrit :


Je me demandais s'il n'existait pas une solution plus simple pour faire disparaître le menu.


:hover
Bonjour Niuxe,

j'ai utilisé codepen comme vous car, apparement, ce serait meilleur que fiddleJs ?

Donc, voici un exemple de mon site à l'heure actuelle : https://codepen.io/joseph5/pen/dBavQQ

Désolé de vous déranger à nouveau mais je me demandais comment je pouvais résoudre les 2 problèmes suivants :

1) le bouton avec les 3 petits points à la verticale ne reste pas figé mais se déplace sur la droite. Comment puis-je faire pour que ce bouton reste à sa place ?
2) Apparemment, le menu déroulant repousse le corps de l'article vers le bas. J'aimerais bien que ce menu s'affiche par dessus le corps de l'article. Avez-vous une idée de ce que je dois changer pour que j'aie ce comportement-là ?

Merci d'avance pour votre aide.

Bonne journée
Thierry
Sujet clos
Aller à