CSS menu rozwijanego
Za pomocą CSS do tworzenia wyświetlacz po myszy Poruszanie się po menu efekt rozwijanej.
Przykładowe menu rozwijanego
Przykłady Demo 1
Ten poradnik
www.w3big.com
Przykłady Demo 2
Przykłady Demo 3
Rozwijane menu Podstawowe
Gdy mysz jest przesuwana do określonych elementów, będzie spadać w dół pojawi się menu.
Przykłady
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: # f9f9f9;
min-width: 160px;
box-shadow: 0px 16px 0px 8 pikseli RGBA (0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown: hover {.dropdown-content
display: block;
}
</ Style>
<Div class = "listy rozwijanej">
<Span> Mysz nade mną </ span>
<Div class = "rozwijana-content ">
<P> Hello World! </ P>
</ Div>
</ Div>
Spróbuj »
Przykłady analityczne
Część HTML:
Możemy użyć dowolnego HTM, elementy, aby otworzyć menu rozwijane, takich jak: <span> lub <button> elementem.
Użyj elementu kontenera (np: <div>), aby utworzyć menu rozwijane i umieszczone gdziekolwiek chcesz założyć.
Za pomocą <div>, by zakończyć te elementy i używać CSS ustawić zawartość stylu rozwijanego.
Część CSS:
.dropdown klasy używa position:relative , które określą zawartość menu rozwijane jest umieszczony w przycisku rozwijanym (używając position:absolute ) w położeniu dolnym prawym rogu.
.dropdown-content klasa jest rzeczywista menu rozwijane. Jest domyślnie ukryty, pojawi się u myszy jest przesuwany do określonego elementu po. Zauważ, że min-width wartość jest ustawiona na 160px. Możesz dowolnie modyfikować. Uwaga: Jeśli chcesz, aby ustawić rozwijanej i rozwijanej przycisk treści szerokopasmowych konsekwentny, ustawić width do 100% ( overflow:auto ustawienie może przewinąć małego rozmiaru ekranu).
Używamy box-shadow właściwość umożliwia menu rozwijane, który wygląda jak "karta".
:hover selektor menu użytkownika pojawią się, gdy wskaźnik myszy zostanie przesunięty do przycisku rozwijanego.
Rozwijane menu
Tworzenie rozwijanego menu i pozwala użytkownikowi wybrać pozycję z listy:
Powyższe przykłady podobnych przypadkach, kiedy dodać link na liście rozwijanej i ustawić styl:
Przykłady
/ * Style przycisku rozwijanego * /
.dropbtn {
background-color: # 4CAF50;
kolor: biały;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/ * Pojemnik <div> - trzeba zlokalizować zawartość rozwijanych * /
.dropdown {
position: relative;
display: inline-block;
}
/ * Zawartość Pulldown (domyślnie ukryty) * /
.dropdown-content {
display: none;
position: absolute;
background-color: # f9f9f9;
min-width: 160px;
box-shadow: 0px 16px 0px 8 pikseli RGBA (0,0,0,0.2);
}
/ * Łącze menu rozwijane * /
.dropdown-content a {
Kolor: czarny;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/ * Po Edycja menu rozwijane łącza unosić koloru * /
.dropdown-content: hover {background -color: # f1f1f1}
/ * Po pokazie menu rozwijane unosić * /
.dropdown: hover {.dropdown-content
display: block;
}
/ * Gdy zawartość listy rozwijanej po przycisku rozwijanego wyświetla zmodyfikowany kolor tła * /
.dropdown: hover {.dropbtn
background-color: # 3e8e41;
}
</ Style>
<Div class = "listy rozwijanej">
Przycisk <class = "dropbtn"> menu rozwijane </ button>
<Div class = "rozwijana-content ">
<A Href = "#"> Ten poradnik 1 </ a>
<A Href = "#"> Ten poradnik 2 </ a>
<A Href = "#"> Ten poradnik 3 </ a>
</ Div>
</ Div>
Spróbuj »
Wyrównanie zawartości rozwijana
float: left;
pływaka: prawo;
Jeśli chcesz skonfigurować menu rozwijanego pływających właściwą treść jest od prawej do lewej zamiast od lewej do prawej, można dodać następujący kod right: 0;
Więcej przykładów
Obraz rozwijanej
Ten przykład pokazuje, jak dodać obraz tego, jak menu rozwijanego.
Rozwijanej nawigacji
Ten przykład pokazuje, jak dodać rozwijane menu na pasku nawigacyjnym.