Changement/Ajout d'une classe avec le responsive
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:
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:
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:
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:
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:
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 :)
