Fixer un <aside>

AfterDesign 22 Messages postés dimanche 16 octobre 2016Date d'inscription 2 octobre 2017 Dernière intervention - 12 mars 2017 à 12:47 - Dernière réponse : AfterDesign 22 Messages postés dimanche 16 octobre 2016Date d'inscription 2 octobre 2017 Dernière intervention
- 16 mars 2017 à 20:53
Bonjour,

Je suis en train de coder mon site et je m'attaque en ce moment au responsive pour le mobiles. Pour cela j'ai arrangé un menu (dans une <aside>) qui apparaît sur le côté gauche quand on appuie sur une icone hamburger. Tout marche dans mon menu sauf un truc: je n'arrive pas à fixer le menu pour qu'il soit visible n'importe où sur la page. J'avait essayé position:fixed mais mon menu a tout simplement disparut ! et il n'est visible q'avec position:absolute.
Voici le-dit menu:


Et voici son HTML:
<aside class="menu_mobil_hidden">
	<a id="cross_button">
	        <div class="hamburger_close" id="cross"></div>
	</a>
	<ul id="menu_ul_mobil">
		<a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu_link">
			<li class="item_mobil" style="border-top: 1px solid white;">
				<b>ACCUEIL</b>
			</li>
		</a>	
		<a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu_link">
			<li class="item_mobil">
				<b>COMPÉTENCES</b>
			</li>
		</a>
		<a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu_link">
			<li class="item_mobil">
				<b>CRÉATIONS</b>
			</li>
		</a>
		<a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu_link">
			<li class="item_mobil">
				<b>CONTACT</b>
			</li>
		</a>
	</ul>
</aside>


Le CSS:
.menu_mobil {
	position: absolute;
	top:0;
	padding-top: 0;
	padding-left: 0;
	width: 200;
	height: 100%;
	display: inline-block;
	background-color: #2C82C9;
	box-shadow:  0 0 10px rgba(0, 0, 0, 0.5);
	color: white !important;
	text-decoration: none;
	text-align: center;
	z-index: 1900;
	transform: translateX(0px);
	transition: all 0.4s ease-out;
}


Merci de m'aider à fixer ce menu pour qu'il suive le scroll de l'utilisateur
Afficher la suite 
22Messages postés dimanche 16 octobre 2016Date d'inscription 2 octobre 2017 Dernière intervention

2 réponses

Répondre au sujet
ZeNairolf 1696 Messages postés vendredi 6 mars 2009Date d'inscription 1 novembre 2017 Dernière intervention - Modifié par ZeNairolf le 12/03/2017 à 23:20
0
Utile
Et avec ceci?

.menu_mobil {
 position: fixed;
 top:0;
 bottom: 0;
 left: 0;
 heigth: 100%;
 [...]
}
Commenter la réponse de ZeNairolf
AfterDesign 22 Messages postés dimanche 16 octobre 2016Date d'inscription 2 octobre 2017 Dernière intervention - Modifié par AfterDesign le 16/03/2017 à 20:57
0
Utile
Bonsoir,

J'avais déjà essayé mais le aside disparaît complètement quand on met position:fixed.
J'ai également essayé de le mettre dans une div en position:fixed mais c'est la même chose et ajouter un parallax jQuery n'affecte pas le aside..

@+
Commenter la réponse de AfterDesign