Bonjour,

Alors je m'explique. J'ai un menu qui s'affiche a droite en "glissant" et j'aimerai que lorsque celui-ci s'ouvre, le reste de la page ne se décale pas mais se rétrécisse en gros qu'on voit toute la page comme quand le menu n'est pas ouvert. Je sais pas si j'ai été assez claire et merci d'avance.

CSS de mon menu

.pushmenu {
    background-color: #414040;
    width: 300px;
    height: 100%;
    top: 0;
    z-index: 1000;
    position: fixed;
}
.links li a {
    position: relative;
    display: block;
    color: #ffffff;
    font-size: 1.3em;
    font-weight: 400;
    text-decoration: none;
    padding: 8px;
}
.pushmenu-left {
    /*"margin-left"*/
    left: -300px;
}
.pushmenu-left.pushmenu-open {
    left: 0;
}
.pushmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}
.pushmenu-push-toright {
    left: 300px;
}
.pushmenu, .pushmenu-push {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.liens_index ul li {
    list-style: none;
    float: left;
    text-align: center;
    line-height: 53px;
    background-color: #1e8bc3;
    margin-top: -20px;
    padding-top: 20px;
    margin-left: -10px;
    padding-bottom: 10px;
}

Salut,

Brice06 a écrit:

Je sais pas si j'ai été assez claire

Pas tout à fait pour moi...

Qu'entend-tu par "se rétrécisse ? Que la largeur diminue ? C'est plus ou moins la même chose que "se décale" non ?

Tu peux donner le code html qui va avec ?

PS : les margin négatifs ce n'est vraiment pas beau. Au lieu de faire ça sur tes <li> mets plutôt margin:0 et padding:0 à ton <ul>.

Tout d'abord merci de ta réponse.

Ce que je veux dire par la c'est que lorsque j'ouvre mon menu il y a toute la fenetre qui se décale or je veux que seulement le menu se décale et le reste de la page se voient en entier mais "en plus petit" (je crois il doit y avoir une histoire avec du width: 100%).

Pour les margins je sais j'ai fait a la va vite .

Et voila mon code HTML

<div class="pushmenu-push">
            <div>
                <nav class="pushmenu pushmenu-left">

                    <ul class="links">
                        <li style="width: 100px;">
                            <a>Mon menu</a>
                        </li>
                    </ul>
                </nav>
            </div>

Je sais pas si c'est la chaleur mais j'ai du mal là...

Ton menu se décale ? Et la page en plus petit en largeur ?
Je vois à peu près où tu veux en venir mais ce n'est pas assez précis.

Tu peux mettre tout ton code html que l'on puisse tester et voir le comportement actuellement.

Ou mieux, si tu peux nous donner un lien de la page en ligne.

Je te mets en dessous deux screens de mon ecrans l'un avec le menu ouvert et l'autre non. Désolé déjà pour la taille --'

Donc comme vous pouvez le voir quand le menu est ouvert on ne voit plus le logo or je veux que celui-ci soit visible et c'est ça que je ne sais pas faire. Est-ce plus claire pour vous?

D'accord, c'est nettement plus clair.

Donc, comme ton menu est en fixed et que normalement ça devrait passer par-dessus le reste, qu'a tu fait comme code CSS pour que le reste du site se déplace sur la droite ?

Je t'avais envoyer tout le CSS dans le premier message et c'est exactement la ligne 31 qui permet cela.

-
Edité par Brice06 19 juillet 2018 à 17:12:19

Je comprends bien que cette ligne affiche le menu. Mais normalement, comme ton menu est fixed, il devrait passer par dessus le reste et ce n'est pas le cas sur ton screen.
Donc il y a forcément de la CSS ou du JS qui déplace le contenu vers la droite.

D'autant plus que ce que tu cherche à faire est un comportement normal.
Tu n'aurait pas mis une largeur fixe au reste du site par hasard ?

Regarde cette page, j'ai repris ton code et fait à ma sauce pour le menu.
A aucun moment le reste de la page sort de la fenêtre quand le menu est ouvert :

http://www.frogweb.fr/demos/index-push.html

Ralala j'ai complètement oublier que j'avais du JS (je sais juste pas si ça sera sa le problème).

$(document).ready(function () {
        $menuLeft = $('.pushmenu-left');
        $nav_list = $('#nav_list');



        $nav_list.click(function () {
            $(this).toggleClass('active');
            $('.pushmenu-push').toggleClass('pushmenu-push-toright');
            $menuLeft.toggleClass('pushmenu-open');
        });

    });

de toute façon chez les autre ça marche toujours 

J'ai quand même essayer d'enlever toute la partie JS mais la ça ne fonctionne pas du tout... Je comprend plus rien... :/

-
Edité par Brice06 19 juillet 2018 à 17:45:30

Brice06 a écrit:

Ralala j'ai complètement oublier que j'avais du JS (je sais juste pas si ça sera sa le problème).

$(document).ready(function () {
        $menuLeft = $('.pushmenu-left');
        $nav_list = $('#nav_list');



        $nav_list.click(function () {
            $(this).toggleClass('active');
            $('.pushmenu-push').toggleClass('pushmenu-push-toright');
            $menuLeft.toggleClass('pushmenu-open');
        });

    });

de toute façon chez les autre ça marche toujours 

Non, pas de soucis de ce côté. C'est juste le code qui va rajouter des classes au click à tes éléments.
Je reste persuadé que tu un width en px quelque part. Sur la largeur du body ou un autre élément structurant du site.

Mon CSS qui s'applique (je crois) sur tout mon site:

html {
    height: 100%;
    width: 100%;
    background-color: #f5f5fa;
    box-sizing: border-box;
}
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    font-family: "Maven Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #393838;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

Pas de problème non plus ici.

A part le reset qui est tout simplement une horreur...

Un bon conseil, remplace ce code par :

*, *::before, *::after {
    box-sizing: border-box;
}
html {
    height: 100%;
    background-color: #f5f5fa;
}
body {
    margin:0;
    font-family: "Maven Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #393838;
    height: 100%;
}

Il faut que tu trouve l’élément qui as un width en px et assez important. Genre width:1170px par exemple.
N'hésite pas à mettre l'ensemble de ta CSS.

PS : Là je dois quitter mon pc mais, si personne n'a trouvé d'ici là, on continue demain.
N'hésite pas à me contacter par mp au besoin si tu vois que je n'interviens pas.

Alors je viens de refaire tout mon CSS et le plus grand width que j'ai trouvé est de 300px... Et ça ne me dérange pas de mettre tout mon CSS mais celui-ci fait 600 lignes...

-
Edité par Brice06 20 juillet 2018 à 7:48:25

Yop !

Est-ce que ta partie centrale est un tableau ? si c'est le cas as-tu mis des width aux td ?

Autre chose, il est possible que ce soit l'addition de plusieurs width. Par exemple la ligne du haut avec mo.05.02 etc, il n'y a pas de largeur fixe sur chaque ?

Pas grave que ça fasse 600 lignes, si il n'y a que ça pour trouver la source de ton problème...

Hello

Ma partie centrale? celle ou y a les car 1, 2, 3,...?  et où c'est écrit "mo.05.02" c'est un tableau avec un largeur fixe effectivement.

Donc voila tout mon CSS et entre temps j'ai avancé un peu donc il y a des trucs qu ne sont pas sur les screens que je vous ai envoyer. (mon CSS c'est un peu le bordel.... désolé)

html {
    height: 100%;
    width: 100%;
    background-color: #f5f5fa;
    box-sizing: border-box;
}
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    font-family: "Maven Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #393838;
    box-sizing: border-box;
}

.menus{
    display: inline;
    height: 68px;
    margin-left: 8px;
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    line-height: 68px;
    padding-top: 23px;
    padding-bottom: 23px;
    color: #F37419;
}
#menu{
    background-color: #1a1a1a;
    height: 68px;
    font-size: 20px;
    top: 50%;
    bottom: 50%;
    left: 50px;
}
.menus:hover{
    background-color: #301801;
    padding-bottom: 27px;

    
  /*change la taille du texte au passage de la souris sur un des onglets*/
    -webkit-animation-name: size_text_menu;
    -webkit-animation-duration: 1s;
    animation-name: size_text_menu;
}
@-webkit-keyframes size_text_menu{
    from {font-size: 20px;}
    to {font-size: 21.5px;}
}
@keyframes size_text_menu{
    from {font-size: 20px;}
    to {font-size: 21.5px;}
}

.planification{
    display: inline;
}
#planificationn{
    
}
#menu_plannif{
    position: fixed;
    width: 100%;
    z-index: 10;
}
.vehicles{
    min-height: 44px;
    margin-left: 8px;
    margin-right: 8px;
    top: 80px;
}
#container_vehicles{
    padding-top: 135px;
}
.car{
    position: relative;
    background: #e3e3e3;
    margin-top: 10px;
    height: 44px;
    border: #585757 1px solid;
    line-height: 44px;
    padding-left: 8px;
    box-shadow:0px 0px 1px #585757;
}
#logo_menu{
    height: 30px;
    float: right;
    margin-top: -50px;
    margin-right: 8px;
}
.lien_menu{
    text-decoration: none;
    
}
.lignes_car{
    height: 20px;
    width: 12.5%;
}
#jours_car{
    padding-top: 75px;
    position: fixed;
    background-color: #B6B6B8;
    z-index: 2;
    padding-bottom: 10px;
    width: 100%;
    text-decoration: underline;
}
#img_filtre{
    height: 44px;
    float: left;
    cursor: pointer;
    margin-top: 13px;
    margin-left: 8px;
    cursor: pointer;
}

/*-----------MENU----------*/

.pushmenu {
    background-color: #414040;
    width: 300px;
    height: 100%;
    top: 0;
    z-index: 1000;
    position: fixed;
}
.links li a {
    position: relative;
    display: block;
    color: #ffffff;
    font-size: 1.3em;
    font-weight: 400;
    text-decoration: none;
    padding: 8px;
}
.pushmenu-left {
    left: -300px;
}
.pushmenu-left.pushmenu-open {
    left: 0;
}
.pushmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}
.pushmenu-push-toright {
    left: 300px;
}
.pushmenu, .pushmenu-push {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.liens_index ul li {
    list-style: none;
    float: left;
    text-align: center;
    line-height: 53px;
    background-color: #1e8bc3;
    padding-bottom: 10px;
    padding: 0;
    margin: 0;
}


#frequence{
    color: white;
    display: table;
    margin-top: 19px;
    margin-left: 39px;
}
.frequence{
    margin-left: 50px;
    margin-top: -28px;
}




.bouton {
  position: relative;
  display: inline-block;
  width: 54.15px;
  height: 26.15px;
  margin-left: 80px;
  vertical-align: middle;
}

.switch input {display:none;}

.slider {
  /*contour de ton le bouton*/
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .1s;
  transition: .1s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .1s;
  transition: .1s;
}

input:checked + .slider {
  background-color: #F37419;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.fahrzeuge_div{
    background-color: #F37419;
    color: white;
    width: 300px;
    height: 53px;
    margin-top: 21px;
    font-size: 18px;
}
#fahrzeuge{
    vertical-align: middle;
}
#sousmenufahrzeuge{
    background: #e3e3e3;
    color: black;
    width: 250px;
    text-align: center;
    margin-left: 22px;
    margin-top: 15px;
    border: 3px black solid;
}
.intern{
    list-style: none;
    float: left;
    width: 48%;
    text-align: center;
    margin-left: 2%;
    margin-top: 15px;
    color: white;
    font-size: 18px;
    background: #B6B6B8;
    cursor: pointer;
}
.intern_other{
    float: left;
    width: 48%;
    text-align: center;
    margin-left: 2%;
    margin-top: 15px;
    color: white;
    font-size: 18px;
    background: #979799;
    cursor: pointer;
    list-style: none;
}
.extern{
    float: right;
    list-style: none;
    margin-right: 2%;
    width: 48%;
    text-align: center;
    margin-top: 15px;
    color: white;
    background: #B6B6B8;
    font-size: 18px;
    cursor: pointer;
}
.extern_other{
    float: right;
    list-style: none;
    margin-right: 2%;
    width: 48%;
    text-align: center;
    margin-top: 15px;
    color: white;
    background: #979799;
    font-size: 18px;
    cursor: pointer;
}
.salutt{
    color: white;
    margin-top: 15px;
}
.fahrzeuge1{
    width: 70.5px;
    float: left;
    text-align: center;
    font-size: 18px;
    background: #B6B6B8;
    margin-top: 15px;
    cursor: pointer;
}
.fahrzeuge1_other{
    width: 70.5px;
    cursor: pointer;
    float: left;
    text-align: center;
    font-size: 18px;
    margin-top: 15px;
    background: #979799;
}
.fahrzeuge2{
    margin-top: 15px;
    width: 69.5px;
    cursor: pointer;
    float: left;
    text-align: center;
    font-size: 18px;
    background: #B6B6B8;
}
.fahrzeuge2_other{
    width: 69.5px;
    margin-top: 15px;
    float: left;
    cursor: pointer;
    text-align: center;
    background: #979799;
    font-size: 18px;
}
.fahrzeuge3{
    margin-top: 15px;
    width: 68.5px;
    float: left;
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    background: #B6B6B8;
}
.fahrzeuge3_other{
    width: 68.5px;
    float: left;
    cursor: pointer;
    text-align: center;
    margin-top: 15px;
    background: #979799;
    font-size: 18px;
}
.fahrzeuge4{
    width: 79.5px;
    float: left;
    text-align: center;
    font-size: 18px;
    margin-top: 15px;
    cursor: pointer;
    background: #B6B6B8;
}
.fahrzeuge4_other{
    width: 79.5px;
    cursor: pointer;
    float: left;
    text-align: center;
    background: #979799;
    font-size: 18px;
    margin-top: 15px;
}
.fahrer_div{
    background-color: #F37419;
    color: white;
    width: 300px;
    height: 53px;
    margin-top: 107px;
    font-size: 18px;
    padding: 14px;
}
.logo_fahrer_fahrzeuge{
    height: 30px;
    float: right;
    margin-top: 5px;
}
.fahrer1{
    color: white;
    text-align: center;
    margin-top: 12px;
    width: 288px;
    background: #B6B6B8;
    margin-left: 5.9px;
    cursor: pointer;
}
.fahrer1_other{
    color: white;
    text-align: center;
    margin-top: 12px;
    width: 288px;
    background: #979799;
    margin-left: 5.9px;
    cursor: pointer;
}
.fahrer2{
    color: white;
    text-align: center;
    margin-top: 12px;
    width: 288px;
    background: #B6B6B8;
    margin-left: 5.9px;
    cursor: pointer;
}
.fahrer2_other{
    color: white;
    text-align: center;
    margin-top: 12px;
    width: 288px;
    background: #979799;
    margin-left: 5.9px;
    cursor: pointer;
}
.fahrer3{
    color: white;
    text-align: center;
    margin-top: 12px;
    width: 288px;
    background: #B6B6B8;
    margin-left: 5.9px;
    cursor: pointer;
}
.fahrer3_other{
    color: white;
    text-align: center;
    margin-top: 12px;
    width: 288px;
    background: #979799;
    margin-left: 5.9px;
    cursor: pointer;
}
.fahrer4{
    color: white;
    text-align: center;
    margin-top: 12px;
    width: 288px;
    background: #B6B6B8;
    margin-left: 5.9px;
    cursor: pointer;
}
.fahrer4_other{
    color: white;
    text-align: center;
    margin-top: 12px;
    width: 288px;
    background: #979799;
    margin-left: 5.9px;
    cursor: pointer;
}
.fahrer5{
    color: white;
    text-align: center;
    margin-top: 12px;
    width: 288px;
    background: #B6B6B8;
    margin-left: 5.9px;
    cursor: pointer;
}
.fahrer5_other{
    color: white;
    text-align: center;
    margin-top: 12px;
    width: 288px;
    cursor: pointer;
    background: #979799;
    margin-left: 5.9px;
    cursor: pointer;
}
.fahrer6{
    color: white;
    text-align: center;
    margin-top: 12px;
    width: 288px;
    background: #B6B6B8;
    margin-left: 5.9px;
    cursor: pointer;
}
.fahrer6_other{
    color: white;
    text-align: center;
    margin-top: 12px;
    width: 288px;
    background: #979799;
    margin-left: 5.9px;
    cursor: pointer;
}
.fahrer7{
    color: white;
    text-align: center;
    margin-top: 12px;
    width: 288px;
    background: #B6B6B8;
    cursor: pointer;
    margin-left: 5.9px;
}
.fahrer7_other{
    color: white;
    text-align: center;
    margin-top: 12px;
    width: 288px;
    background: #979799;
    cursor: pointer;
    margin-left: 5.9px;
}
#andere_div{
    background-color: #F37419;
    color: white;
    width: 300px;
    height: 53px;
    margin-top: 24px;
    font-size: 18px;
    padding: 14px;
}
.positionement_fahrer{
    position: relative;
    display: block;
    color: #ffffff;
    font-size: 1.3em;
    font-weight: 400;
    text-decoration: none;
    margin: -8px;
}
#calendar_menu{
    height: 30px;
    font-size: 23px;
    width: 288px;
    margin-left: 5.9px;
    margin-top: 15px;
    padding: 8px;
    border-radius: 12px;
    background-color: #f9f2ed;
}
.car21{
    min-height: 30px;
    position: absolute;
    top: 2px;
    width: 444px;
    left: 33%;
    background-color: red;
    height: 36px;
    z-index: 1;
    padding-bottom: 0px;
    font-size: 15px;
    margin-top: 1px;
    color: red;
}
#mois_car{
    padding-top: 75px;
    position: fixed;
    background-color: #B6B6B8;
    z-index: 2;
    padding-bottom: 10px;
    width: 100%;
    text-decoration: underline;
    margin-left: 300px;
}

effectivement c'est un peu le "bordel"

Les demi pixel ça n'existe pas. Alors 79.5px ça n'existe pas et encore moins 5.9px.

Je n'ai pas trouvé le width du tableau dont tu parle par contre si les farher et compagnie sont les uns à côté des autres, ne cherche pas plus loin.
C'est l'addition de ces width qui pose problème.
Et même avec ton menu fermé, sur un écran moins large que le tien, ça ne passerait pas.

Il n'y a vraiment pas moyen de voir la page en ligne ?

PS : et corrige ton code comme je te l'indique ici

Oui excuse moi je viens de corriger et j'ai rajouter margin 0 et padding 0.

Je veux bien vous le mettre en ligne mais je sais pas comment...

Sert toi d'un outil en ligne comme https://jsfiddle.net/ ou https://codepen.io/

Ok donc je viens de mettre tous mon code dans codepen mais plus rien ne marche... et désolé mais je vois pas où taper apres que j'aie entré tout mon code pour ensuite vous le partagez. Enfait je crois qu'avec ce lien vous arrez jusqu'à mon site: https://codepen.io/brice-mabillard/pen/GBNajX

-
Edité par Brice06 20 juillet 2018 à 13:53:55

Tu save et tu récupère l'url dans la barre d'adresse.

Je viens de le faire il est dans le message juste au dessus.

Ok, j'ai trouvé la source de ton problème...

Ta div push-menu-push n'est pas fermée au bon endroit, ce qui fait que tout ton site est dedans.
Du coup, quand tu ouvre ton menu tout se décale.

Supprime le <div> juste après <div class="push-menu-push"> et supprime le </div> jsute avant la balise <script>.

Ensuite on attaque dans le dur...

Dans ton code html, englobe tout ton contenu, sauf la div push-menu-push, dans une nouvelle div à laquelle tu mets une classe "content".
Puis, dans ton js tu rajoutes ces deux lignes :

$('.content').toggleClass('menu-open');
$('#menu_plannif').toggleClass('menu-open');

après celle-ci :

$menuLeft.toggleClass('pushmenu-open');

Et pour finir, dans ta CSS tu rajoutes :

.menu-open {
    margin-left:300px;
    transition: all 0.5s ease;
}

Et tu remplace ce code :

#menu_plannif{
    position: fixed;
    width: 100%;
    z-index: 10;
}

par celui-ci :

#menu_plannif{
    position: fixed;
    left:0;
    right:0;
    z-index: 10;
}

Avec tout ces changements j'ai le résultat que tu souhaites et que tu peux voir ici :

http://www.frogweb.fr/demos/index-push.html

Je te conseille de valider ta CSS et ton html, tu as quelques erreurs.

PS : il faut savoir que forcément sur un écran moins large le problème va revenir. En effet, les width de tes barres rouges sont en pixels et certaines font 1000px de large.
Tu devrait utiliser les % pour ces barres pour être tranquille.

-
Edité par Frogweb 20 juillet 2018 à 15:05:34

Je viens de faire les modifications et ça ne marche toujours pas. J'ai peut être mal compris se que vous essayer de me dire... Je vous remets quand même se que j'ai corrigé. https://codepen.io/brice-mabillard/pen/GBNajX

Qu'est-ce qui ne marche pas ?
Sur Codepen tu n'a pas dû activer jquery et tu n'as pas mis les lignes que je t'ai indiqué dans le JS.
Et pour content c'est une classe, pas un id.

Au pire tu récupère le code de la page que je t'ai mis en lien.

Edit : et tu n'as pas mis ça non plus :

.menu-open {
    margin-left:300px;
    transition: all 0.5s ease;
}

Par la même occasion rajoutes ça dans ta CSS :

.content, #menu_plannif {
    transition: all 0.5s ease;
}

-
Edité par Frogweb 20 juillet 2018 à 15:19:00

okok ça marche maintenant mais je viens de rajouter le truc que vous aviez supprimé et maintenant celui-ci ne se rétrécit pas... et j'ai récupéré votre code du coup c'est bon donc il me reste plus que le probleme là.

-
Edité par Brice06 20 juillet 2018 à 15:29:07

C'est à dire ? Qu'est-ce que tu as rajouté ?

j'ai rajouté ça juste au dessus de la div <div id="container_vehicles">

<h3>
                <table id="jours_car">
                    <tr id="filtre_jour">
                        <th></th>
                        <th class="lignes_car">MO 05.02</th>
                        <th class="lignes_car">DI 06.02</th>
                        <th class="lignes_car">MI 07.02</th>
                        <th class="lignes_car">DO 08.02</th>
                        <th class="lignes_car">FR 09.02</th>
                        <th class="lignes_car">SA 10.02</th>
                        <th class="lignes_car">SO 11.02</th>
                    </tr>
                </table>
                <table id="mois_car">
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th>01</th>
                        <th>02</th>
                        <th>03</th>
                        <th>04</th>
                        <th>05</th>
                        <th>06</th>
                        <th>07</th>
                        <th>08</th>
                        <th>09</th>
                        <th>10</th>
                        <th>11</th>
                        <th>12</th>
                        <th>13</th>
                        <th>14</th>
                        <th>15</th>
                        <th>16</th>
                        <th>17</th>
                        <th>18</th>
                        <th>19</th>
                        <th>20</th>
                        <th>21</th>
                        <th>22</th>
                        <th>23</th>
                        <th>24</th>
                        <th>25</th>
                        <th>26</th>
                        <th>27</th>
                        <th>28</th>
                        <th>29</th>
                        <th>30</th>
                        <th>31</th>
                    </tr>
                </table>
            </h3>

Houla ! des tables dans un <h3>...
Déjà enlève ce <h3> et je vais regarder pourquoi ça ne va pas avec ça en plus.

C'est bon j'ai enlevé.

Alors, englobe tes tables dans un div avec comme class "tables".

Dans la CSS, remplace ce code :

#jours_car{
    padding-top: 75px;
    position: fixed;
    background-color: #B6B6B8;
    z-index: 2;
    padding-bottom: 10px;
    width: 100%;
    text-decoration: underline;
}

par :

#jours_car{
    padding-top: 75px; 
    padding-bottom: 10px;
    text-decoration: underline;
}

remplace ce code :

#mois_car{
    padding-top: 75px;
    position: fixed;
    background-color: #B6B6B8;
    z-index: 2;
    padding-bottom: 10px;
    width: 100%;
    text-decoration: underline;
    display: none;
}

par :

#mois_car{
    padding-top: 75px;
    padding-bottom: 10px;
    text-decoration: underline;
    display: none;
}

et rajoute ce code :

.tables {
    position:fixed;
    background-color: #B6B6B8;
    z-index: 2;
    transition: all 0.5s ease;
    left:0;
    right:0;
}

et enfin dans le js rajoute cette ligne au même endroit que je t'ai indiqué :

$('.tables').toggleClass('menu-open');

On peut faire plus simple pour le JS mais tu verra ça après.