Jak na to – rozbalovací navigační panel
Přečtěte si, jak vytvořit rozbalovací navigační panel.
Rozbalovací nabídka na navigační liště
Vytvořte rozbalovací navigační panel
Vytvořte rozevírací nabídku, která se zobrazí, když uživatel najede myší na prvek v navigační liště.
Krok 1) Přidejte HTML:
Příklad
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<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>
Příklad vysvětlen
K otevření rozbalovací nabídky použijte libovolný prvek, např. prvek <button>, <a> nebo <p>.
Pomocí prvku kontejneru (např. <div>) vytvořte rozbalovací nabídku a přidejte do ní rozbalovací odkazy.
Obalte prvek <div> kolem tlačítka a <div>, abyste správně umístili rozbalovací nabídku pomocí CSS.
Krok 2) Přidejte CSS:
Příklad
/* 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;
}
Příklad vysvětlen
Navigační lištu a odkazy na navigační liště jsme upravili barvou pozadí, odsazením atd.
Stylizovali jsme rozbalovací tlačítko s barvou pozadí, odsazením atd.
Třída .dropdown
je kontejner pro
.dropdown-content
. Vzhledem k tomu, že se jedná o prvek <div>, nikoli prvek <a>, musíme jej umístit do plovoucí polohy, abychom se ujistili, že zůstane vedle odkazů.
Třída .dropdown-content
obsahuje aktuální rozevírací nabídku. Ve výchozím nastavení je skrytý a zobrazí se při najetí myší (viz níže). Všimněte si, že min-width
je nastaveno na 160px. Klidně to změňte.
Místo použití ohraničení jsme použili box-shadow
vlastnost, aby rozbalovací nabídka vypadala jako „karta“. Z-index také používáme k umístění rozevíracího seznamu před další prvky.
Selektor se :hover
používá k zobrazení rozevírací nabídky, když uživatel najede myší na rozbalovací tlačítko.
Rozbalovací nabídka na navigační liště, na kterou lze kliknout
Příklad
Tip: Další informace o rozbalovacích seznamech najdete v našem výukovém programu CSS Dropdowns .
Tip: Další informace o rozbalovacích seznamech, na které lze kliknout , naleznete v našich rozbalovacích seznamech , na které lze kliknout
Tip: Další informace o navigačních panelech naleznete v našem výukovém programu CSS Navbar.
Tip: Přejděte do naší responzivní horní navigace , kde se dozvíte, jak vytvořit responzivní navigační panel.