Skip to content

Instantly share code, notes, and snippets.

@AnonyFriday

AnonyFriday/index.html

Last active March 2, 2022 13:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AnonyFriday/8f70e608c81f8ef92c4778ab5a6e8a8f to your computer and use it in GitHub Desktop.
Save AnonyFriday/8f70e608c81f8ef92c4778ab5a6e8a8f to your computer and use it in GitHub Desktop.
Download ZIP
CSS Multi-level Menu
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header>
<nav>
<h1>Multi Level Menu</h1>
<ul class="menu">
<li><a href="">Menu</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Content</a></li>
<li>
<a href="">Computers</a>
<ul class="menu--sub-1">
<li><a href="">Contact 1</a></li>
<li><a href="">Contact 2</a></li>
<li><a href="">Contact 3</a></li>
<li><a href="">Contact 4</a></li>
<li><a href="">Contact 5</a>
<ul class="menu--sub-2">
<li><a href="">Contact 1</a></li>
<li><a href="">Contact 2</a></li>
<li><a href="">Contact 3</a></li>
<li><a href="">Contact 4</a></li>
<li><a href="">Contact 5</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Contact</a>
<ul class="menu--sub-1">
<li><a href="">Contact 1</a></li>
<li><a href="">Contact 2</a></li>
<li><a href="">Contact 3</a></li>
<li><a href="">Contact 4</a></li>
<li>
<a href="">Contact 5</a>
<ul class="menu--sub-2">
<li><a href="">Contact 1</a></li>
<li><a href="">Contact 2</a></li>
<li><a href="">Contact 3</a></li>
<li><a href="">Contact 4</a></li>
<li><a href="">Contact 5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
Raw
multi-menu.scss
header > nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #43aea3;
color: aliceblue;
padding: 0px 100px;
}
.menu {
font-size: 0;
li {
display: inline-block;
position: relative;
}
a {
display: inline-block;
line-height: 50px;
padding: 0 30px;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
color: white;
transition: background-color 0.22s ease, color 0.22s ease;
}
&--sub-1 {
display: none;
}
&--sub-2 {
display: none;
}
// Effects
li a:hover {
background-color: antiquewhite;
color: black;
}
// Open Menu level 1
> li:hover .menu--sub-1 {
display: inline-block;
position: absolute;
left: 0;
top: 100%;
animation: slideup 0.3s ease;
}
// Open Menu level 2
.menu--sub-1 > li:hover .menu--sub-2 {
display: inline-block;
width: 200px;
position: absolute;
left: 100%;
top: 0;
animation: slideleft 0.3s ease;
li:first-child {
margin-top: 0;
}
}
}
// Styles for Menu Level 1 & 2
.menu--sub-1,
.menu--sub-2 {
a {
border-left: 8px solid black;
width: 200px;
overflow: hidden;
}
li {
background-color: #43aea3;
margin-top: 5px;
}
}
// Animated Keyframes
@keyframes slideup {
0% {
opacity: 0;
transform: translateY(18px);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes slideleft {
0% {
opacity: 0;
transform: translateX(18px);
}
100% {
opacity: 1;
transform: none;
}
}
Raw
reset.scss
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100vh;
}
a {
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment