MENU - rozwijające się

Question

Witam, mam taki problem, że menu się rozwija, ale gdy nacisne obojętne, w którym miejscu, to się chowa - czyli jak nacisne link narozwiniętym menu to rowniez menu sie chowa.. :/ na kilku poradnikach działa dobrze, nie wiem dlaczego u mnie zle.

.button_mobile_nav{
		width: 50px;
		height: 50px;
		margin-top: -75px;
	}

.flex_mobile_nav{
	display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.mobile_nav{
	display: none;
  width: 100%;
  height: 200px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
}

.mobile_nav a{
	background-color: #1fbd89;
	    width: 100%;
	    display: flex;
	    color: #ffffff;
	    height: 100%;
	    justify-content: center;
	    align-items: center;
	    text-decoration: none;
}

.mobile_nav a:hover{
	background-color: #323232;
	color: #ffffff;
}

.button_mobile_nav:focus ~ .mobile_nav{
	display: flex;
}

<div class="flex_mobile_nav">
	<button class="button_mobile_nav">MENU</button>
					<div class="mobile_nav">
						<a href="/">Strona Główna</a>
						<a href="index.php">Pożyczki Chwilówki</a>
						<a href="index.php">Pożyczki Ratalne</a>
						<a href="index.php">Kredyty Gotówkowe</a>
						<a href="/kontakt">Kontakt</a>
					</div>
</div>

Comments

:focus, :checked,
transform: scaleY
wszystko tak samo działa

Answer 1

Dopóki button

<button class="button_mobile_nav">MENU</button>

ma focus działa reguła

.button_mobile_nav:focus ~ .mobile_nav{
    display: flex;
}

i jest widoczne

  <div class="mobile_nav">
    <a href="/">Strona Główna</a>
    <a href="index.php">Pożyczki Chwilówki</a>
    <a href="index.php">Pożyczki Ratalne</a>
    <a href="index.php">Kredyty Gotówkowe</a>
    <a href="/kontakt">Kontakt</a>
  </div>

każde kliknięcie poza przyciskiem (czy naciśnięcie klawisza np. TAB) powoduje utratę focus-a przez przycisk i zadziałanie na powrót reguły

.mobile_nav{
  display: none;
  ...
}

 

Spróbuj dodać np.

.mobile_nav:active{
  display: flex;
}

ten wpis powoduje, że w monecie kliknięcia (a dokładnie przyciśnięcia przycisku myszy: keydown) można kliknąć w 

  <div class="mobile_nav">
    <a href="/">Strona Główna</a>
    <a href="index.php">Pożyczki Chwilówki</a>
    <a href="index.php">Pożyczki Ratalne</a>
    <a href="index.php">Kredyty Gotówkowe</a>
    <a href="/kontakt">Kontakt</a>
  </div>

i po keyup zadziała na powrót

.mobile_nav{
  display: none;
  ...
}

ale w momencie kliknięcia (keydown) zadziała (href)

<a href="/">Strona Główna</a>
<a href="index.php">Pożyczki Chwilówki</a>
itd.

jeżeli wskaźnik myszy znajduję się nad jednym z elementów <a> z 
<div class="mobile_nav">

Comments

Dzieki, ale niestety to nie pomogło, jak klikalem "menu" to nie działalo, trzeba byle gdzie poza przycisk menu nacisnac, zeby menu sie schowalo.

Juz sobie poradziłem inaczej, wiec juz wszystko gra.