Page qui s'adapte en fonction du menu

**brice6** · 19/07/2018, 14h35

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 :

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

**01001111** · 20/07/2018, 00h50

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

**brice6** · 20/07/2018, 07h39

Vous avez tout a fait compris mon problème

Alors voila mon code HTML:

Code html :

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

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 javascript :

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

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');
        });
 
    });

**01001111** · 20/07/2018, 13h22

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 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
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>

Page qui s'adapte en fonction du menu

CSS

Vue hybride

Discussions similaires

Partager

Partager