Jak to zrobić — przycisk Więcej na pasku nawigacyjnym
Dowiedz się, jak utworzyć przycisk „więcej”.
Przycisk „Więcej” na pasku nawigacyjnym
Utwórz rozwijany pasek nawigacyjny
Utwórz menu rozwijane, które pojawia się, gdy użytkownik najedzie myszą na element w pasku nawigacyjnym.
Krok 1) Dodaj kod HTML:
Przykład
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">More
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
Przykład wyjaśniony
Użyj dowolnego elementu, aby otworzyć menu rozwijane, np. elementu <button>, <a> lub <p>.
Użyj elementu kontenera (takiego jak <div>), aby utworzyć menu rozwijane i dodać do niego linki rozwijane.
Owiń element <div> wokół przycisku i <div>, aby prawidłowo ustawić menu rozwijane za pomocą CSS.
Krok 2) Dodaj CSS:
Przykład
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration:
none;
}
/* The dropdown
container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family:
inherit; /* Important for vertical align on mobile phones */
margin:
0; /* Important for vertical align on mobile phones */
}
/* Add a
red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display:
none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links
on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/*
Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
Przykład wyjaśniony
Stylizowaliśmy pasek nawigacyjny i linki paska nawigacyjnego za pomocą koloru tła, wypełnienia itp.
Wystylowaliśmy przycisk rozwijany z kolorem tła, dopełnieniem itp.
Klasa .dropdown
jest kontenerem dla
.dropdown-content
. Ponieważ jest to element <div>, a nie element <a>, musimy go unosić, aby upewnić się, że pozostaje obok linków.
Klasa .dropdown-content
zawiera aktualne menu rozwijane. Domyślnie jest ukryty i będzie wyświetlany po najechaniu kursorem (patrz poniżej). Zauważ, że min-width
jest ustawiony na 160px. Możesz to zmienić.
Zamiast korzystać z obramowania, użyliśmy tej box-shadow
właściwości, aby menu rozwijane wyglądało jak „karta”. Używamy również indeksu Z, aby umieścić listę rozwijaną przed innymi elementami.
Selektor :hover
służy do wyświetlania menu rozwijanego, gdy użytkownik najedzie myszą na przycisk rozwijany.
Powiązane strony
Wskazówka: przejdź do naszego samouczka CSS rozwijanych , aby dowiedzieć się więcej o rozwijanych listach.
Wskazówka: przejdź do naszych klikalnych list rozwijanych , aby dowiedzieć się więcej o klikalnych listach rozwijanych
Wskazówka: przejdź do naszego samouczka paska nawigacyjnego CSS , aby dowiedzieć się więcej o paskach nawigacyjnych.
Wskazówka: przejdź do naszej Responsywnej nawigacji górnej , aby dowiedzieć się, jak utworzyć responsywny pasek nawigacyjny.