Wed Aug 17 2022
Vertical Menubar with Icon
CSS0 views
Try your Hands on Live Preview
Result Screenshot(s)
Reference:
Author:Geekboots
We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.
Try your Hands on Live Preview
<!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>Vertical Menu</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #1a2238;
}
nav {
position: fixed;
height: 350px;
left: 20px;
top: 0;
bottom: 0;
margin: auto 0;
background-color: #fefefe;
padding: 20px 10px;
border-radius: 30px;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
flex-flow: column;
height: 100%;
}
nav ul li {
width: 100%;
}
nav ul li a {
text-decoration: none;
color: #1a2238;
display: flex;
align-items: center;
cursor: pointer;
width: 100%;
transition: 0.2s all ease;
}
nav ul li a svg {
width: 30px;
height: 30px;
}
nav ul li a svg path {
transition: 0.2s all ease;
}
nav ul li a span {
position: absolute;
background-color: #fefefe;
padding: 2px 15px;
border-radius: 30px;
margin-left: 10px;
font-weight: 500;
font-size: 15px;
visibility: hidden;
opacity: 0;
transition: 0.2s all ease;
}
nav ul li a.active,
nav ul li a:hover {
color: #f15627;
}
nav ul li a.active span,
nav ul li a:hover span {
opacity: 1;
visibility: visible;
margin-left: 50px;
}
nav.active ul li a span {
position: relative;
opacity: 1;
visibility: visible;
margin-left: 0;
}
nav.active ul li a:hover span {
margin-left: 0;
}
</style>
<script>
function toggleMenu() {
var menuBar = document.getElementById('menuBar');
menuBar.classList.toggle('active');
}
</script>
</head>
<body>
<nav id="menuBar">
<ul>
<li>
<a href="javascript:toggleMenu()">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg>
<span>Menu</span>
</a>
</li>
<li>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" /></svg>
<span>Customer</span>
</a>
</li>
<li>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5zm2.5 3a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm6.207.293a1 1 0 00-1.414 0l-6 6a1 1 0 101.414 1.414l6-6a1 1 0 000-1.414zM12.5 10a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" clip-rule="evenodd" /></svg>
<span>Order</span>
</a>
</li>
<li>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" /></svg>
<span>Analysis</span>
</a>
</li>
<li>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.525a3.997 3.997 0 00.078-2.183l1.562-1.562C15.802 8.249 16 9.1 16 10zm-5.165 3.913l1.58 1.58A5.98 5.98 0 0110 16a5.976 5.976 0 01-2.516-.552l1.562-1.562a4.006 4.006 0 001.789.027zm-4.677-2.796a4.002 4.002 0 01-.041-2.08l-.08.08-1.53-1.533A5.98 5.98 0 004 10c0 .954.223 1.856.619 2.657l1.54-1.54zm1.088-6.45A5.974 5.974 0 0110 4c.954 0 1.856.223 2.657.619l-1.54 1.54a4.002 4.002 0 00-2.346.033L7.246 4.668zM12 10a2 2 0 11-4 0 2 2 0 014 0z" clip-rule="evenodd" /></svg>
<span>Support</span>
</a>
</li>
</ul>
</nav>
</body>
</html>