Pomoc przy wyświetlaniu mobilnego menu

pytanie zadane 17 kwietnia 2018 w HTML i CSS przez P0Y3B Nowicjusz (220 p.)
edycja 17 kwietnia 2018 przez P0Y3B

		<ul id="mobileNav">
			<li><a href="#"><i class="fa fa-newspaper-o"></i></a></li>
			<li><a href="#"><i class="fa fa-search"></i></a></li>
			<li><a href="#" id="navActive"><i class="fa fa-navicon"></i></a></li>
		</ul>

	<div id="elMobileDrawer" class="myBB_drawer ipsHide" style="z-index: 5300;display: block;" animating="false">
		<a href="#" class="myBB_drawer_close" data-action="close" style="display: block;"><span>×</span></a>
			<div class="myBB_drawer_menu">
				<div class="myBB_drawer_content">			
				<ul class="myBB_drawer_list">
					<li><a href="#">Bany</a></li>
					<li><a href="#">Leaderboard</a></li>
				</ul>
			</div>
		</div>
	</div>

Standardowo <div class="myBB_drawer"> jest ukryty, i w jaki najlepszy sposób nadać mu odpowiednie style po kliknięciu w ikonkę nawigacji tj. <li><a href="#" id="navActive"><i class="fa fa-navicon"></i></a></li>

Style które na pewno bd musiał użyć to display:block; z-index: xxxxx; jakaś propozycja ?

coś na takiej zasadzie, https://codepen.io/vperl/pen/NYmJaK?page=1& próbowałem to jakoś pogodzić ze sobą lecz nie udaje Mi się to zbytnio

1 odpowiedź

odpowiedź 17 kwietnia 2018 przez pablop76 VIP (123,120 p.)

Style które na pewno bd musiał użyć to display:block;

Niekoniecznie. Użyj ujemnego left lub right w zależności gdzie ustawisz menu(działa z pozycjonowaniem innym niż static). A potem przełączaj (np: jquery toggleClass) klasę, która będzie transformować(pokazywać i ukrywać) obiekt menu (transform: translateX() ).

transition doda animacje.