How TO – Vertical Menu

Vertical Menu

Try it Yourself

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
.vertical-menu {
width: 200px;
}

.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}

.vertical-menu a:hover {
background-color: #ccc;
}

.vertical-menu a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>

<h1>Vertical Menu</h1>

</body>
</html>

How To Create a Vertical Button Group

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
.vertical-menu {
width: 200px;
}

.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}

.vertical-menu a:hover {
background-color: #ccc;
}

.vertical-menu a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>

<h1>Vertical Menu</h1>

</body>
</html>

Vertical Scroll Menu

Set a specific height and add the overflow property if you want a vertical scroll menu:

Example

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
.vertical-menu {
width: 200px;
height: 150px;
overflow-y: auto;
}

.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}

.vertical-menu a:hover {
background-color: #ccc;
}

.vertical-menu a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>

<h1>Vertical Scroll Menu</h1>

</body>
</html>

Previous

Next