Skip to content

Instantly share code, notes, and snippets.

@bkawk

bkawk/index.html

Created January 26, 2019 13:38
Show Gist options
  • Save bkawk/99207c3d28260aa2a5f5aa7aa6fc598d to your computer and use it in GitHub Desktop.
Save bkawk/99207c3d28260aa2a5f5aa7aa6fc598d to your computer and use it in GitHub Desktop.
Download ZIP
CSS Only Language Drop Down
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin - https://jsbin.com/qapatubitu/13/edit?html,css,output</title>
</head>
<body>
<div class="container">
<ul class="navigation">
<li><a href="#">Join</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">English<span></span></a>
<ul class="dropdown">
<li><a on-click="_language">Català</a></li>
<li><a on-click="_language">Česky</a></li>
<li><a on-click="_language">Dansk</a></li>
<li><a on-click="_language">Deutsch</a></li>
<li><a on-click="_language">Ελληνικά</a></li>
<li><a on-click="_language">English</a></li>
<li><a on-click="_language">Español</a></li>
<li><a on-click="_language">Eesti</a></li>
<li><a on-click="_language">Basque</a></li>
<li><a on-click="_language">Filipino</a></li>
<li><a on-click="_language">Français</a></li>
<li><a on-click="_language">Indonesian</a></li>
<li><a on-click="_language">Íslenska</a></li>
<li><a on-click="_language">Italiano</a></li>
<li><a on-click="_language">Lietuviškai</a></li>
<li><a on-click="_language">Nederlands</a></li>
<li><a on-click="_language">Norsk</a></li>
<li><a on-click="_language">Polski</a></li>
<li><a on-click="_language">Português</a></li>
<li><a on-click="_language">Română</a></li>
<li><a on-click="_language">Русский</a></li>
<li><a on-click="_language">Slovenský</a></li>
<li><a on-click="_language">Suomi</a></li>
<li><a on-click="_language">Svenska</a></li>
<li><a on-click="_language">ภาษาไทย</a></li>
<li><a on-click="_language">Türkçe</a></li>
<li><a on-click="_language">日本語</a></li>
<li><a on-click="_language">简体中文</a></li>
<li><a on-click="_language">繁體中文</a></li>
<li><a on-click="_language">한국어</a></li>
<li><a on-click="_language">Српски</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Raw
style.css
body{
background: #eee;
}
.container {
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:500;
background: #fff;
width: 100%;
height:55px;
display: flex;
justify-content: flex-end;
box-shadow: inset 0 1px 0 #f5f5f5, 0 1px 0px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.05);
}
.navigation {
display: flex;
margin:0;
list-style:none;
}
.navigation>li{
position:relative;
}
.navigation>li>a {
display:block;
padding:17px;
color:#000;
text-decoration:none;
}
.navigation span {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid rgb(66, 76, 85);
position: relative;
top: 10px;
margin-left: 3px;
}
.navigation>li>a:focus + .dropdown {
visibility: visible;
opacity: 1;
}
.dropdown {
right:0;
display: flex;
flex-wrap: wrap;
background: #fff;
list-style:none;
position:absolute;
visibility: hidden;
width: 300px;
padding:3px 0 0;
box-shadow: inset 0 1px 0 #f5f5f5, 0 1px 0px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.05);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.dropdown li a {
color: #000;
display: block;
width:126px;
text-decoration:none;
padding:6px 12px;
}
.dropdown li a:hover {
background:#F7F7F7;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment