Chrome Extension

Create a simple Vertical menu using CSS Example 1

A simple example of creating vertical menu using CSS and HTML. We have created different examples for the same. This is one of them.
.v_menu {
    border: 1px solid #ddd;
    width: 250px;
    margin: 0;
    padding: 5px;
    border-radius: 10px;
}
.v_menu li {
    display: block;
}
.v_menu li a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    border-radius: 10px;
    color: #000;
    font-size: 15px;
}
.v_menu li a.active {
    background: #000;
    color: #fff;
}
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

Firstly, we need to create HTML markup to create out simple vertical menu. You can copy below HTML code for that.

HTML code

<ul class="v_menu">
    <li><a href="#" class="active">My Account</a></li>
    <li><a href="#">All Products</a></li>
    <li><a href="#">Customer Help</a></li>
    <li><a href="#">My Orders</a></li>
    <li><a href="#">Logout</a></li>
</ul>

CSS code

Paste below code in your CSS to style your vertical menu and create it.

.v_menu {
    border: 1px solid #ddd;
    width: 250px;
    margin: 0;
    padding: 5px;
    border-radius: 10px;
}
.v_menu li {
    display: block;
}
.v_menu li a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    border-radius: 10px;
    color: #000;
    font-size: 15px;
}
.v_menu li a.active {
    background: #000;
    color: #fff;
}

Live Demo

Below is the live demo that you can check.

Was this helpful?
0 Comments