Comment remplacer un menu

Sujet résolu

13 mars 2018 à 7:05:36

Bonjour,
Je cherche à ajouter un élément pour en remplacer un autre à partir d'une certaine largeur d'écran.
Voilà je souhaite remplacer cela :

Par cela :

(Quand on clique sur le bouton en haut à gauche, le menu apparait)

Comment faire pour dire à mon "menu cube" d'apparaitre à la place de mon autre menu et disparaitre à partir d'une certaine taille ? 🤔
Merci d'avance pour toutes vos réponses 😜😜💻
Thibault

-
Edité par (o-o) 13 mars 2018 à 7:06:41

x1mus

13 mars 2018 à 9:41:57

Salut !

Pour faire disparaitre le menu sur un mobile device, donc une taille d'écran plus petite, utilise un média query :D

@media screen and (max-width: taillepx) {
    .menuCube {
        display: none;
    }
}

Après, pour en faire apparaitre un autre (c'est la même chose mais inversé)

Tu peux aussi choisir de juste le "transformer" sur la version mobile, par exemple, le restyliser. Si par exemple, il est en display: flex, sur la version mobile, tu vas par exemple le mettre en flex-direction: column.

Mais si tu veux un dropdown menu avec hamburger, c'est à dire un petit icone hamburger et lorsque l'on clique dessus le menu apparait. Il va soit te falloir du JavaScript.

https://www.jqueryscript.net/menu/Hamburger-Dropdown-Menu-jQuery.html

https://codepen.io/trobfrank/pen/YqJRde

Soit si tu veux le faire en Pure CSS, il y a un moyen que je connais qui se base sur la propriété Checkbox :

https://codepen.io/elmahdim/pen/hlmri

https://tutorialzine.com/2015/08/quick-tip-css-only-dropdowns-with-the-checkbox-hack

En espérant t'avoir donné le plus d'informations possible pour ta bonne compréhension !

UlysseRuetsch1

13 mars 2018 à 18:16:54

Salut, je suis pas très fort en HTML/JS, mais je peut te proposer un solution en JS, même si je suis sur que il y des moyens plus cours...

<style>
    
        #menu {
            height: 50px;
            width: 50px;
            background-color: darkblue;
        }
        
        #a_montrer {
            height: 200px;
            widows: 5px;
            background-color: aqua;
            /* display permet de montrer (block) ou cacher (none)*/
            display: none;
        }
    
    </style>
<body>
    
    <div id="menu" onclick="apparaitre()"></div>
    
    <div id="a_montrer"></div>
    
</body>
    
        <script>
    
            var blockOuNone = 0;  
            
    function apparaitre() {
        if (blockOuNone === 0) {
        document.getElementById('a_montrer').style.display = "block";
            blockOuNone = 1;
            }
        else {
            document.getElementById('a_montrer').style.display = "none";
            blockOuNone = 0;
        }
    }
    
    </script>

Voilà, copie colle.

(o-o)

14 mars 2018 à 9:32:54

Bonjour,

Veuillez m'excuser pour ma réponse si tardive, mais en ce moment j'ai beaucoup de travail et je préfère m'y consacrer d'avantage.

Bon fini de raconter ma vie , je tenais à vous dire un grand MERCI pour votre aide car vos deux réponses ce complétaient parfaitement .

Thibault

UlysseRuetsch1

14 mars 2018 à 13:46:39

Pas de problème !