Blokowanie chowana rozwijanego menu gdy input w menu posiada focus

Question

Witam!

Mam takie pytanie odnośnie chowania i pokazywania się rozwijanego menu.

Mam pasek nawigacyjny a w nim rozwijane menu, lista z rozwijanym menu ma domyślnie ustawiony tag display: none; gdy przycisk "dostaje" hover to tag display zmienia się na block. Gdy kursor znajduje się POZA rozwijanym menu to menu znowu dostaje tag display: none;

Problem pojawia się gdy w menu rozwijanym mam input'a i gdy ten input dostaje focus to wtedy chcę mieć tak aby nawet gdy kursor znajduje się poza rozwijanym menu to rozwijane menu jest wyświetlane. czy za pomocą samego CSS jestem w stanie coś takiego zrobić ?

Jedyne co mi przychodzi do głowy to za pomocą JavaScript/jQuery odpinać funkcję chowającą menu rozwijane gdy input dostaje focus i przypinać funkcję chowającą menu gdy input traci focus. Ale czy to jedyna droga ?

Answer 1

A nie łatwiej zastanowić nad rozdzieleniem komponentów? Bo trochę to według mnie nie przemyślane, bądż ustawic drugie menu z tym inputem. Tak, możesz to zrobić za pomocą JS (hover bierzę udział tylko przy najechaniu, focus to jak wskażnik(nazwijmy to tak) skupi się na elemencie0, po przez zdarzenie focus, możesz właściwie zrobić jedno zdarzenie żonglować klasą(ta która, odpowiada za menu) po przez właściwość toggle

Comments

Są tutaj błędy ale pokazuję po co mi to jest potrzebne: https://jsfiddle.net/adriansikora344/1xu2mfom/

---

O cos takiego ci chodziło?

https://jsfiddle.net/1xu2mfom/4/

U cb był taki problem, że bardzo nastawiłeś na dziedziczenie(a właściwie) właściwości CSS (i nawet pewnie wiem z jakiego tutoriala), przez to że ustawiłeś hover , reszta elementów reagowała również, dlatego musiałem tu dodać swoją klasę oraz usunąc klasę drop-down by nie wywoływać zdarzenia hover.

Drobna uwaga. Pamiętaj obsłudze zdarzenia focus i nie twórz eventow inLine jeżeli operujesz na DOM. Ja wiem, że jquery ma bardzo nie przyjemną postać i jeszcze bardziej kompiluje kod. Ale narażasz się na dość poważną dziurę.

Musisz sobie jeszcze jedynie listę li naprawić. Ale to już tobie zostawie.

WAŻNA RZECZ. Jak piszesz w jakieś bibliotecę zaznaczaj tą informacje!

Answer 2

Można to zrobić za pomocą samego css przy użyciu pseudo klasy :target

Comments

Mógłbym jaśniej ?

---

Można rozwinąć listę klikając na element. 

Zmiany w kodzie

<a href="#element-list" class="drop-down-btn">Rozwijane menu &#9660;</a>

oraz w css zamiast

.drop-down:hover ul
{
  display: block;
}

.drop-down ul:target
{
  display: block;
}

Pozostaje problem zwijania menu.

---

Można dodać przycisk zamykania np:

demo