PonuryGreg
21.05.2015, 12:03:39
Witam,
mam problem z menu rozwijanym, a mianowicie mam menu w formie <ul> <li> i jest ono rozwijane po najechaniu, a chciałbym aby było rozwinięte po kliknięciu.
Szukałem w google ale znalazłem rozwiązania tylko dla divów a nie dla ul li. Wiem, że w CSSach podobno nie da rady tego zrobić a z JS jestem noga. Czy ktoś wie jak to rozwiązać albo zna stronę gdzie takie rozwiązanie będzie opisane?
PonuryGreg
21.05.2015, 12:36:35
/* MENU GŁÓWNE */
.navipro ul li {
list-style-type: none;
display:block;
}
.navipro ul li a {
color: #000;
font-family: Arial;
text-decoration: none;
font-weight: 300;
text-transform: uppercase;
display: block;
height: 40px;
line-height: 40px;
max-width: 300px;
border-bottom: 1px solid #000;
transition: all 0.5s ease 0s;
}
.navipro ul li a:hover {
color: #0a53a0;
}
/* PODMENU GŁÓWNE */
.navipro ul > li > ul {
display: none;
width: 990px;
}
.navipro ul > li:hover > ul {
display: block;
}
.navipro ul > li > ul a {
text-transform: uppercase;
}
.navipro ul > li > ul a:hover {
color: #0a53a0;
}
<li><a href="#">produkty
</a> <li><a href="#">pro 1
</a></li> <li><a href="#">pro 2
</a></li> <li><a href="#">pro 3
</a></li> <li><a href="#">pro 4
</a></li> <li><a href="#">pro 5
</a></li>
Comandeer
21.05.2015, 15:05:31
A jeśli Ci powiem, że w CSS się da i to nawet na dwa sposoby?

patrz:
:target i
:checkedCo do JS - wystarczy przy kliku przełączać np. klasę
.open przy pomocy choćby
elem.classList.toggle. Oczywiście tej klasie dodajesz obecne style z
:hover
PonuryGreg
21.05.2015, 15:18:33
wow, tylko gdzie :target mam dać bo zmiana na
.navipro ul > li:target > ul {
display: block;
}
nic nie dała
Comandeer
21.05.2015, 15:27:48
Wypadałoby najpierw poczytać co to wgl robi i jak działa… musiałbyś dorobić odpowiedni link w menu. Lepiej to zrobić w js
martex
22.05.2015, 17:54:29
szukaj w guglu jquery ul li click function toggle
jest masa gotowców i przykładów które tylko zobaczysz i bedziesz wiedział o co kaman