Skip to content

Instantly share code, notes, and snippets.

@rudrathegreat

rudrathegreat/index.html

Created December 31, 2020 04:08
Show Gist options
  • Save rudrathegreat/a0133d2491bf7eb37f9c49d11575614e to your computer and use it in GitHub Desktop.
Save rudrathegreat/a0133d2491bf7eb37f9c49d11575614e to your computer and use it in GitHub Desktop.
Download ZIP
Dropdown-Example_1
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<title>Education Model Navigation</title>
</head>
<body>
<header>
<nav class="nav">
<ul class="nav-list">
<li class="nav-list-element">
<a class="nav-link">Home</a>
</li>
<li class="nav-list-element">
<button class="nav-link">Local Food Production</button>
<div class="submenu">
<ul>
<li><a href="#">How to Make a Vegetable Garden</a></li>
<li><a href="#">Learn how to Cook</a></li>
<li><a href="#">Composting, Worm Farming and Food waste</a></li>
<li><a href="#">Seeds and Seedlings</a></li>
<li><a href="#">Crop Rotation, Cover Crops and Food Forests</a></li>
<li><a href="#">Keeping Chickens, Bee Keeping</a></li>
</ul>
</div>
</li>
<li class="nav-list-element">
<button class="nav-link">Transport</button>
<div class="submenu">
<ul>
<li><a href="#">Cycling</a></li>
<li><a href="#">Taking Public Transport</a></li>
<li><a href="#">Working from Home</a></li>
<li><a href="#">Car Pooling or Car Sharing</a></li>
<li><a href="#">Electric Cars</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</header>
</body>
</html>
Raw
style.css
* {
margin:0;
padding:0;
}
body {
background:#ddd;
font-family:'Roboto', sans-serif;
font-size:1.5vw;
text-transform:uppercase;
font-weight:700;
}
:root {
--clr-light:#fff;
--clr-dark:#000;
}
header {
width:100%;
height:13vh;
background:rgba(0,0,0,0.8);
color:var(--clr-light);
position:fixed;
top:0;
left:0;
}
.nav {
width:100%;
height:100%;
}
.nav-list {
display:flex;
gap:3em;
height:100%;
list-style:none;
align-items:center;
margin-left:calc(15vw - 1em);
}
.nav-list-element {
height:100%;
display:flex;
align-items:center;
justify-content:center;
padding: 0 1em;
position:relative;
}
.nav-link {
display:inline-block;
background:none;
border:none;
font-family:'Roboto', sans-serif;
text-transform:uppercase;
color:var(--clr-light);
font-size:1.25vw;
font-weight:700;
}
.nav-list-element:hover {
background:var(--clr-light);
}
.nav-list-element:hover > .nav-link {
color:var(--clr-dark);
}
.nav-link:focus ~ div {
transform:scale(1,1);
transition:transform 0.3s ease-in-out;
transform-origin:top;
}
.nav-link:focus ~ div ul {
opacity:1;
pointer-events:all;
transition:opacity 0.2s ease-in-out 0.4s;
}
.nav-link:focus ~ div a:hover {
color:#375F29;
}
.submenu {
display:block;
width:100%;
position:absolute;
top:13vh;
padding:3vh 2vw;
left:0;
background:#eee;
transform:scale(1,0);
transition:transform 0.3s ease-in-out 0.3s;
transform-origin:bottom;
}
.submenu ul {
display:flex;
flex-direction:column;
gap:3vh;
opacity:0;
transition:opacity 0.2s ease-in-out;
}
.submenu a {
font-size:1.25vw;
color:#555;
text-transform:none;
text-decoration:none;
font-weight:400;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment