IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Afficher/ Masquer une div


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Inscrit en
    Mai 2008
    Messages
    248
    Détails du profil
    Informations personnelles :
    Âge : 39

    Informations forums :
    Inscription : Mai 2008
    Messages : 248
    Par défaut Afficher/ Masquer une div
    Bonjour à toutes et à tous,

    Tout d'abord, j'espère avoir poster au bon endroit... J'avoue avoir été un peu perdu

    Sur mon site internet, je souhaite afficher ou masquer une div après avoir cliquer sur un bouton.
    Cela me servira pour afficher/ masquer un menu navigation pour les versions smartphone (responsive).
    Je n'ai jamais appris le javascript... car je n'en avais pas vraiment le besoin jusqu'à maintenant et mis à part ce menu, je ne sais pas si j'en aurais besoin davantage (en tout cas pas dans l'immédiat...)
    Du coup, j'ai piocher ci et la dans mes lectures et... ca ne marche pas!

    J'ai ajouté un bouton "Cliquez" dans ma barre de navigation. Le tag de ce dernier est: "Menu_Bouton_Nav_Mobile"
    L'objectif est que ce dernier affiche/ masque la div "Nav_Mobile".
    Sauf que rien ne se passe quand je clique sur le bouton

    Le code pour le menu classique de navigation est le suivant:
    Au format mobile, seuls "Menu_BlocMenu_Smart_0", "Menu_BlocMenu_0" et "Menu_Bouton_Nav_Mobile" sont affichés.
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <nav>
    	<div id = "Menu_BlocMenu_Smart_0">
    		<p> Navigation:</p> 
    	</div>
    	<div id = "Menu_BlocMenu_0">
    		<a href="index.php?page=1">Accueil</a> 
    	</div>
    	<div id = "Menu_Bouton_Nav_Mobile">
    		<button id="Menu_Bouton_Nav_Mobile">Cliquez!</button>
    	 </div>
    	<div id = "Menu_BlocMenu_1">
    		<a href="index.php?page=2">A</a> 
    	 </div>
    	<div id = "Menu_BlocMenu_2">
    		<a href="index.php?page=3">B</a> 
    	</div>
    	<div id = "Menu_BlocMenu_3">
    		<a href="index.php?page=4">C</a> 
    	 </div>
    	<div id = "Menu_BlocMenu_4">
    		<a href="index.php?page=5">D</a>  
    	 </div>
    </nav>

    Le menu qui est censé s'afficher quand je clique sur le bouton (la div "Nav_Mobile"):
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div id = "Nav_Mobile">
    	<div id = "Menu_BlocMenu_Smart_0_Mob">
    		<p> Navigation:</p> 
    	</div>
    	<div id = "Menu_BlocMenu_0_Mob">
    		<a href="index.php?page=1">A</a> 
    	</div>
    	<div id = "Menu_BlocMenu_1_Mob">
    		<a href="index.php?page=2">B</a> 
    	 </div>
    	<div id = "Menu_BlocMenu_2_Mob">
    		<a href="index.php?page=3">C</a> 
    	</div>
    	<div id = "Menu_BlocMenu_3_Mob">
    		<a href="index.php?page=4">D</a> 
    	 </div>
    	<div id = "Menu_BlocMenu_4_Mob">
    		<a href="index.php?page=5">E</a>  
    	 </div>
    </div>

    L'appel du script dans ma page html:
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <?php
     
            session_start(); // Permet d'utiliser les variables superglobales
     
    ?>
     
    <HTML>
     
    	<HEAD>
     
    		<meta charset ="utf-8"/>
     
    		<title> TITRE </title>
    		<link rel="shortcut_icon" type="image/x-icon" href="Header/Logo.png"/>
     
    		<link rel="stylesheet" href="style.css"/> <!-- Feuille de style principal -->
     
    		<!-- Permet de fixer les éléments sur une partie de l'écran -->
    		<style>
                html,
                body 
                {
                  margin: 0;
                  padding: 0;
                }
                header
                {
                  position: sticky;
                  top: 0;
                  height: 11em;
                }
                nav
                {
                  position: sticky;
                  top: 12em;
                }
            </style>
     
    	</HEAD>
     
    	<BODY>
     
    	    <script type="text/javascript" src="evenement.js"></script>
     
    </BODY>

    Et part défaut dans mon code css, je masque le menu:
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    /* NAVIGATION_MOBILE */	
    #Nav_Mobile
    {
        display: none;
    }

    Je suis certain que j'ai laissé trainer une erreur (de débutant ) quelque part... sauf que je ne la trouve pas.

    Pourriez-vous m'aider?

    D'avance merci

  2. #2
    Membre éclairé
    Inscrit en
    Mai 2008
    Messages
    248
    Détails du profil
    Informations personnelles :
    Âge : 39

    Informations forums :
    Inscription : Mai 2008
    Messages : 248
    Par défaut
    Bonjour

    Je viens de me rendre compte que j'ai oublié de poster le code en js

    Mon code initial en js était le suivant pour le script "evenement.js":
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    let Menu_Bouton_Nav_Mobile = document.getElementById("Menu_Bouton_Nav_Mobile"); // Bouton qui va ouvrir ou fermer ma div
     
    let Nav_Mobile = document.getElementById("Nav_Mobile"); // Ma div
     
    function Menu_Ouvrir_Fermer()
    {
       if(getComputedStyle(Nav_Mobile).display != "none")
       {
          Nav_Mobile.style.display = "none";
        }
        else
        {
        Nav_Mobile.style.display = "block";
        }
    };
    Menu_Bouton_Nav_Mobile.onclick = Menu_Ouvrir_Fermer;
    Ce dernier ne fonctionne pas...

    J'en ai essayé un nouveau et... toujours sans résultat
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    let Menu_Bouton_Nav_Mobile = document.getElementById("Menu_Bouton_Nav_Mobile"); // Bouton qui va ouvrir ou fermer ma div
     
    let Nav_Mobile = document.getElementById("Nav_Mobile"); // Ma div
     
    Menu_Bouton_Nav_Mobile.addEventlistener("click", ()=>
    {
        if(getComputedStyle(Nav_Mobile).display != "none")
        {
            Nav_Mobile.style.display = "none";
        } else 
        {
            Nav_Mobile.style.display = "block";
        }
    })
    La question du qu'est ce qui cloche reste intacte

    PS: Je viens de tester le code js sur https://codepen.io/.
    Le code fonctionne bien sur ce simulateur.
    L'erreur ne viendrait donc pas du code.
    Peut-être de l'appel du script. Mais je ne vois pas ce qui pourrait clocher cependant...
    Si vous avez des idées je suis preneur

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    Bonjour,
    plusieurs remarques pour commencer !

    Ton menu mériterait d'être construit sans les <div> qui n'apportent rien. Tu peux les mettre dans une liste, <li> par exemple, mais cela n'ait pas également nécessaire. Faire est simple est l'ami du facile.

    Pour connaître si un élément est visible ou non à l'écran inutile de passer par la méthode getComputedStyle un simple contrôle de l'offsetHeight est suffisant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    function showHide(idElement) {
      const elem = document.getElementById(idElement);
      const height = elem.offsetHeight;
      elem.style.display = height ? "none" : "block";
    }
    On n'a pas une vue complète de ton code HTML-CSS, mais sache également que cela se traite en pure CSS, via les média-queries et que cela se trouve facilement avec les mots clé « Responsive Hanburger Menu ».

    Un exemple parmis d'autres : Responsive hamburger menu - pure CSS #1.

    Analyse tout cela et revient si tu as un soucis

  4. #4
    Membre éclairé
    Inscrit en
    Mai 2008
    Messages
    248
    Détails du profil
    Informations personnelles :
    Âge : 39

    Informations forums :
    Inscription : Mai 2008
    Messages : 248
    Par défaut
    Bonsoir,

    Tout d'abord merci pour ta réponse
    Je vais être honnête avec toi, je n'ai pas tout compris pour le code que tu as placé.
    Je dois encore regarder cela (et peut-être me mettre à lire un peu quelques cours de javascript! )

    En revanche je commence à faire mes recherches sur la piste du menu hamburger.
    Je fatigue un peu pour ce soir, je vais stopper mes recherches.
    Et je les reprendrai demain matin

    Je te tiens informé de mes trouvailles et posterais mon code une fois terminé.
    Pour l'heure, juste un grand merci à toi pour cette piste (sans le js) qui semble très prometteuse

    Bonne soirée et à demain

  5. #5
    Membre éclairé
    Inscrit en
    Mai 2008
    Messages
    248
    Détails du profil
    Informations personnelles :
    Âge : 39

    Informations forums :
    Inscription : Mai 2008
    Messages : 248
    Par défaut
    Bonjour,

    Cela m'a pris un peu plus de temps que prévu et surtout...
    J'ai découvert qu'il y a pas mal de notions de base que j'ai oublié ou dont je n'ai pas compris les subtilités...
    J'ai refait un focus sur la différence entre class et id
    Pour le moment, je n'ai retenu que id utilisé pour un seul bloc ou élément et class pour un groupe. J'imagine qu'il y a des subtilités derrière cela mais pour l'instant je ne les vois pas encore

    Comme promis, voici le résultat de mon programme Menu grâce à tes pistes :

    L'idée:
    Quand je passe en version Smartphone (1140px dans mon code),
    Mon menu classique devient un menu type hamburger.
    Avec un "Menu:" + "Sur quelle page le visiteur se situe <=> php" + liens vers les pages
    En mode ordinateur (sup à 1140px), il ne reste plus que les liens vers les pages.

    Code pour ma navigation:
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
     
    <nav>
     
    		<p id = "P_Nav_Menu"> Menu:</p>
     
    		<?php
                    
                            if(isset($_GET['page']) AND !empty($_GET['page']))
                            {
                                    if($_GET['page'] == 1)
                                    {
                                            echo "<p>A</p>";
                                    }
                                    if($_GET['page'] == 2)
                                    {
                                            echo "<p>B</p>";
                                    }
                                    if($_GET['page'] == 3)
                                    {
                                            echo "<p>C</p>";
                                    }
                                    if($_GET['page'] == 4)
                                    {
                                            echo "<p>D</p>";
                                    }
                                    if($_GET['page'] == 5)
                                    {
                                            echo "<p>E</p>";
                                    }
                            }
                    
                    ?>
     
    		<label for = "Menu_Smartphone"></label>
    		<input type = "checkbox" id = "Menu_Smartphone"/>
     
    		<div class = "Menu">
     
    		<a href="index.php?page=1">A</a> 
     
    		<a href="index.php?page=2">B</a> 
     
    		<a href="index.php?page=3">C</a> 
     
    		<a href="index.php?page=4">D</a> 
     
    		<a href="index.php?page=5">E</a> 
     
    		</div>
     
    </nav>

    La partie CSS:
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
     
    /* Navigation */
     
    nav
    {	
    	display: flex;
    	width: 100%;
     
    	border-top: 1px solid;
    	border-color: #045692;
     
    	border-bottom: 3px solid;
    	border-color: #045692;
     
    	justify-content: center;
     
    	background-color: #2f85c0;
     
    }
     
    	nav a
    	{
    		color: #FFFFFF;
     
    		text-decoration: none; /*Enlever surlignage*/
     
    		font-size: 1.2em;
    	}
     
    	nav p
    	{
    		color: #FFFFFF;
    		font-size: 1.2em;
    		margin: 0 30px 0 0;
    		display: none;
    	}
     
    	/*Item de la navigation */
    		/*Voir spécifiques ci-après pour les formats autre*/
     
    /* MENU NAVIGATION RESPONSIVE */
     
    #P_Nav_Menu
    {
    	Display: none;
    }
     
    .Menu a
    {
    	text-decoration: none;
    	margin: 0 30px 0 0;
    }
     
    label
    {
    	margin: 0 0 0 30px;
    	color: #FFFFFF;
    	font-size: 1.2em;
    	display: none;
    }
     
    #Menu_Smartphone
    {
    	Display: none;
    }
     
    /*-------------------------------------------------------------------------------------*/
    /* Smartphones */
     
    @media screen and (max-width:1140px) 
    {
    	/* MENU NAVIGATION RESPONSIVE */
    	#P_Nav_Menu
    	{
    		Display: Block;
    	}
     
    		nav p
    	{
    	    font-size: 3em;
    		Display: Block;
    	}
     
    		nav a
    	{
    	    font-size: 3em;
    		Display: Block;
    	}
     
    		label
    	{
    	    font-size: 3em;
    		Display: Block;
    		cursor: pointer;
    	}
     
    	.Menu
    	{
    		text-align: center;
    		width: 100%;
    		Display: none;
     
    	}
     
    	.Menu a
    	{
    		display: block;
    		border-bottom: 1px solid;
    	}
     
    	#Menu_Smartphone:checked + .Menu
    	{
    		Display: Block;
    	}
     
    	#Menu_Smartphone:checked + nav
    	{
    		flex-direction: column;
    	}
    }

    Le code fonctionne bien.
    Juste un point de design que je n'arrive pas encore à régler.
    Quand le menu est fermé, les éléments sont sur une ligne "Menu + OU se trouve le visiteur + symbole ouverture menu"
    Quand j'ouvre le menu, le menu s'ouvre mais tout se situe toujours sur une ligne
    Alors que j'ai essayé de faire:
    . Ligne du haut: Menu + Symbole
    . En dessous: Le bloc avec tous les liens vers les pages (qui eux sont bien les uns à la suite des autres) (en mode colonne quoi...)

    SI vous avez des idées de ou cela peut pécher...

    D'avance merci à tous et toutes

  6. #6
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Par défaut
    Bonjour,

    Citation Envoyé par BOU59000 Voir le message
    J'ai refait un focus sur la différence entre class et id
    C'est pourtant simple :

    • un id doit être UNIQUE : on ne peut le mettre que sur UN SEUL élément
    • une classe, au contraire, peut être utilisée sur PLUSIEURS éléments

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Afficher/masquer une div
    Par elect31 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 26/02/2017, 13h00
  2. Afficher/Masquer une div
    Par Evelyne31 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 07/11/2012, 14h45
  3. Afficher / masquer une div
    Par laurent94 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 02/12/2011, 15h47
  4. Afficher/masquer une div sur une autre frame
    Par jerome69003 dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 26/11/2009, 18h32
  5. Afficher/Masquer une div
    Par philbona dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 08/02/2007, 23h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo