Signaler

Fixer un <aside>

Posez votre question AfterDesign 22Messages postés dimanche 16 octobre 2016Date d'inscription 2 octobre 2017 Dernière intervention - Dernière réponse le 16 mars 2017 à 20:53 par AfterDesign
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
Utile
+0
plus moins
Et avec ceci?

.menu_mobil {
 position: fixed;
 top:0;
 bottom: 0;
 left: 0;
 heigth: 100%;
 [...]
}
Donnez votre avis
Utile
+0
plus moins
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..

@+
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !