Page qui s'adapte en fonction du menu

Version imprimable

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

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
.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;
}

20/07/2018, 00h50
01001111

Bonsoir, si j'ai bien compris, tu cherches à ce que le menu n'influence pas la zone d'affichage parente,
alors un code html en plus du css nous aiderait mieux à t'aider en fait...
Sinon juste pour info, la propriété overflow-x:hidden est une bonne idée, mais je ne peux pas savoir si tu l'as appliquée à l'élément qu'il faut sans voir le code html...

Vous avez tout a fait compris mon problème :lol:
Alors voila mon code HTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<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>
         </div>

et mon code JS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(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');
        });
 
    });

Bonjour, envoie stp toute ta page html, l'extrait est insuffisant pour reproduire le comportement que tu décris...

sinon essaie ce code et dis moi si ça te convient :

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
 
<html>
<head>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
                $(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');
                        });
 
                });
        </script>
	<style type="text/css">
                body {
                        width:100%;
                        height:100%;
                        padding:0;
                        margin:0;
                        position:relative;
                        background-color:#000;
                        color:#fff;
                }
                .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;
                }
                #nav_list {
                        position:absolute;
                        right:0;
                }
        </style>
</head>
<body>
	<div id="nav_list">navList</div>
	<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>
	 </div>
</body>
</html>