CSS Pilulkové menu
Kód:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar6 {
overflow: hidden;
width: 470px;
}
.pill-nav a {
display: inline-block;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 14px;
line-height:18px;
height: 20px;
Font-family: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;
font-weight: 700;
color: #77797C! important;
border-radius: 5px;
}
.pill-nav a:hover {
background-color: #F2F3F5;
color: #77797C;
border-bottom: 3px solid transparent;
}
.pill-nav a.active {
color: #4B94F5! important;
background-color: transparent;
border-bottom: 3px solid #4B94F5;
border-radius: 0px;
}
.dropdown6 {
overflow: hidden;
float: right;
}
.dropdown6 .dropbtn6 {
color: #77797C;
Font-family: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 14px;
line-height:18px;
height: 20px;
border-bottom: 3px solid transparent;
}
.dropdown6-content {
display: none;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
background: white;
}
.dropdown6-content a {
display: block;
text-align: left;
width: 200px;
padding: 10px;
text-decoration: none;
font-size: 14px;
line-height:18px;
height: 20px;
Font-family: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;
font-weight: 700;
color: #77797C;
border-radius: 5px;
border-bottom: 3px solid transparent;
}
.dropdown6-content a:hover {
background-color: #F2F3F5;
color: #77797C;
border-bottom: 3px solid transparent;
}
.dropdown6:hover .dropdown6-content {
display: block;
}
</style>
<h3>Vytvořte navigační pilulkové Menu</h3>
<p>Navigační lišta na Facebooku podobná té, co máte na svém profilu. </p>
<div class="navbar6">
<div class="pill-nav">
<a class="active" href="#no">Příspěvky</a>
<a href="#no">Informace</a>
<a href="#no">Přátelé</a>
<a href="#no">Fotky</a>
<a href="#no">Reels</a>
<a href="#no">Sledování</a>
<div class="dropdown6">
<a class="dropbtn6">Další <i class="fa fa-caret-down"></i></a>
<div class="dropdown6-content">
<a href="#no">Události</a>
<a href="#no">Skupiny</a>
<a href="#no">Spravovat oddíly</a>
</div></div></div></div>