CSS Navigation Menu

HTML
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
SCSS
html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; background: #2c3e50; background: linear-gradient(to left, #2c3e50, #3498db); font-family: 'Montserrat', sans-serif; display: flex; justify-content: center; align-items: center; } nav { width: 400px; background: #eee; box-shadow: 10px 10px 50px -8px rgba(0, 0, 0, 0.75); ul { list-style: none; margin: 0px; padding: 0px; } li { float: none; width: 100%; a { display: block; width: 100%; padding: 20px; border-left: 5px solid; position: relative; letter-spacing: 3px; z-index: 2; text-decoration: none; color: #444; box-sizing: border-box; &:hover { border-bottom: 0px; color: #fff; } } &:first-child a { border-left: 10px solid #00416D; } &:nth-child(2) a { border-left: 10px solid #2D7DBC; } &:nth-child(3) a { border-left: 10px solid #52BDF2; } &:last-child a { border-left: 10px solid #75D4F2; } a { &:after { content: ""; height: 100%; left: 0; top: 0; width: 0px; position: absolute; transition: all 0.3s ease 0s; z-index: -1; } &:hover:after { width: 100%; } } &:first-child a:after { background: #00416D; } &:nth-child(2) a:after { background: #2D7DBC; } &:nth-child(3) a:after { background: #52BDF2; } &:last-child a:after { background: #75D4F2; } } }
JAVASCRIPT
Expand for more options Login