Discussion :

[d3LTa7]

Bonjour !

J'aimerais changer ou ajouter dynamiquement une classe dans mon code au niveau de ma nav quand la taille de l'écran change !
J'ai une nav qui change de comportement en fonction de la taille de l'écran.

Voici le js qui gère le comportements de la nav avec le scroll :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
window.onscroll = function(){
    if (document.documentElement.scrollTop > 40){
      document.getElementById("headbar").style.boxShadow = "0px 4px 50px 0px rgba(0,0,0,0.75)";
      document.getElementById("headbar").style.position = "fixed";
      document.getElementById("head_menu").style.position = "fixed";
    }else{
        document.getElementById("headbar").style.boxShadow = "none";
        document.getElementById("headbar").style.position = "relative";
        document.getElementById("head_menu").style.position = "absolute";
    }
}

Le souci avec ce code c'est qu'il est bien pour le format smartphone et tablette car le menu de ma navigation reste bien en place mais au format desktop, cela pose un souci avec la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("head_menu").style.position = "fixed";

J'ai trouvé sur le net la méthode matchMédia, mais j'ai pas trop saisie la manière de l'utiliser...

Voici le reste de mon code (c'est du wordpress):

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
<header id="main_head" class="main_header">
			<div id="headbar" class="headbar">
				<div class="logoCR">
					<?php if(!is_front_page()){?>
						<a href="<?php echo home_url(); ?>">
					<?php } ?>
						<img src="<?= get_stylesheet_directory_uri();?>/pics/COL-CPIAS.png" alt="logo" width="50"/>
					</a>
				</div>
				<div class="log_seek">				
					<?php echo do_shortcode('[ivory-search id="201" title="Default Search Form"]'); ?>
				</div>
			</div>
			<nav id="navbar" class="main_nav">
				<button aria-expanded="false" aria-controls="main-menu" class="togle">Menu</button>
				<?php 
                                wp_nav_menu(
                                        [
                                                'theme_location'=>"header_nav",
                                                'items_wrap'    =>'<ul id="head_menu" class="head_menu" hidden>%3$s</ul>'
                                        ]
                                );
                                ?>
			</nav>
       	</header>

JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
const toggleMenu = document.querySelector('.main_nav button');
const menu = document.querySelector('#head_menu');
 
toggleMenu.addEventListener('click', function() {
  const open = JSON.parse(toggleMenu.getAttribute('aria-expanded'));
  toggleMenu.setAttribute('aria-expanded', !open);
  menu.hidden = !menu.hidden;
});

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
.main_header{
    grid-column: span 12;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 5px;
}
.headbar{
    grid-column: span 12;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    z-index: 10;
    width: 100%;
    top: 0;
    background: red;
}
.main_nav{
    display: flex;
    flex-direction: column;
    grid-column: span 12;
    z-index: 10;
}
.togle{
    position: fixed;
    top: 12.5%;
    left: 3%;
    width: 4rem;
    height: 2.4rem;
    padding: 1rem 0;
    transition: .3s;
    font: 0/0 a;
    text-shadow: none;
    border: 0;
    color: transparent;
    background-color: var(--bluenavy);
    background-clip: content-box;
}
.togle::before,
.togle::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: .4rem;
    background-color: var(--bluenavy);
    transition: .3s;
    transform-origin: left;
}
.togle::before{
    top: 0;
}
.togle::after{
    bottom: 0;
}
.togle[aria-expanded=true]{
    background-color: rgba(0,0,0,0);
}
.togle[aria-expanded=true]::before {
    transform: translate(.5rem, -.375rem) rotate(45deg);
}
.togle[aria-expanded=true]::after {
    transform: translate(.5rem, .375rem) rotate(-45deg);
}
.head_menu{
    display: flex;
    flex-direction: column;
    transform: translateX(-110%);
    margin-top: 4rem !important;
    transition: .3s;
    position: absolute;
    width: 100%;
    top: 12rem;
}
.head_menu:not([hidden]){
    transform: translateX(0);
}
.head_menu li{
    height: 5rem;
    background-color: var(--blueeth);
    transition: all 300ms ease-in-out;
    display: flex;
    align-items: center;
    margin: 0.1rem;
    justify-content: center;
}
.head_menu li a{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    text-decoration: none;
    color: white;
    margin: 0;
    padding: 0;
}

Merci

[mathieu]

d'habitude la classe css reste fixe et c'est dans le code css que vous allez indiquer les différences d'affichage suivant la largeur de l'écran par exemple.
regardez ici pour plus d'informations :
https://viseo.developpez.com/tutorie...ive-design/#LV

[d3LTa7]

hummmm ok... Mais je ne vois pas comment changer de position avec le scroll en plus....

En gros le menu reste en position : absolute quand le scrollTop est en dessous de 40 mais passe en fixed quand il est au dessus de 40 ET uniquement quand la taille de l'écran est en dessous de 64em

Alors oui effectivement changer la position en css au changement de taille je sais faire mais ajouter le scroll en plus je sais pas faire :/