Tani hosting

jquery - wysuwanie elementu
maxymius Offline
Donator TenTego 2.x

Liczba postów: 111
Reputacja: 5
Post: #1
jquery - wysuwanie elementu 30-06-2016 18:46
Witam wszystkich.

Mam pewien problem a zarazem zapytanie jak to wykonać. Mianowicie:
Mam kilka elementów w menu np. home, o mnie, uslugi itd... Chciałbym aby po najechaniu myszka na np odnośnik 'o mnie' wysuwało się menu dla tego odnosnika natomiast po najechaniu np na 'uslugi' tamto wysuwane menu znika i pojawia się nowe dla elementu 'uslugi'. Wiem, że można to zrobić przy użyciu np. slideToogle i dac każdemu elementowi inną klase. 

Moje pytanie brzmi czy można to jakos uproscic aby nie tworzyc dla kazdego wysuwanego menu oddzielnej fukncji ?
Cytuj
Diabeł Online
Użyszkodnik


Liczba postów: 777
Reputacja: 666
phost Offline
Pomocnik

Liczba postów: 560
Reputacja: 47
Post: #2
RE: jquery - wysuwanie elementu 30-06-2016 19:30
To zwykle dropdown menu. Wystarczy dodac do kodu css style dla submenu, dropdown, link, hover, etc. W zaleznosci od efektu jaki ma byc finalnie i czy ma byc jednego poziomu czy wielopoziomowe tudziez mega dropdown.

Cytuj
mzakrzewski Offline
Użytkownik

Liczba postów: 83
Reputacja: 14
Post: #3
RE: jquery - wysuwanie elementu 01-07-2016 04:05
Kod:
<style>

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>


<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
(Ten post był ostatnio modyfikowany: 01-07-2016 04:07 przez mzakrzewski.)
WWW Cytuj


Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości