-
CSS kurs
- CSS kurs
- CSS krótkie wprowadzenie
- CSS gramatyka
- CSS Id i Class selektor
- CSS tworzyć
- CSS tło(background)
- CSS tekst(text)
- CSS Czcionki(Fonts)
- CSS powiązanie(link)
- CSS Lista stylów(ul)
- CSS stół(table)
- CSS Model Box
- CSS rama(border)
- CSS kontur(outline)
- CSS margines(margin)
- CSS nadzienie(padding)
- CSS Grupowanie i zagnieżdżanie
- CSS rozmiar(Dimension)
- CSS pokaz(display)
- CSS lokalizować(position)
- CSS pływak(float)
- CSS wyrównać(align)
- CSS Kombinacja selektorów
- CSS Pseudoklasy
- CSS Pseudoelement
- CSS Pasek nawigacji
- CSS Rozwijane menu
- CSS Galeria zdjęć
- CSS Przejrzysty obraz/nieprzejrzysty
- CSS Technologia mozaika Stock
- CSS Typ nośnika
- CSS Atrybut selektorów
- CSS streszczenie
- CSS Przykłady
CSS3 kurs
- CSS3 kurs
- CSS3 krótkie wprowadzenie
- CSS3 rama(border)
- CSS3 tło
- CSS3 stopniowa zmiana
- CSS3 Efekty tekstowe
- CSS3 Czcionki
- CSS3 2D zmiana
- CSS3 3D zmiana
- CSS3 przejście
- CSS3 ożywienie
- CSS3 Multi-column
- CSS3 Interfejs użytkownika
CSS Elastyczne projektowanie
CSS Reference Manual
Najlepszy samouczek CSS menu rozwijanego W 2024 r. W tym samouczku możesz dowiedzieć się Przykładowe menu rozwijanego,Rozwijane menu Podstawowe,Rozwijane menu,Wyrównanie zawartości rozwijana,Więcej przykładów,
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.w3write.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.