/    /  Pure CSS – Vertical Menu

Pure CSS – Vertical Menu

In this tutorial, we will learn about creating the vertical Menu using Pure CSS. We need to use the class “pure-menu-vertical” to create the vertical menu.

As a part of this, we will use the class names “pure-menu-link” for creating the menu link and “pure-menu-item”, “pure-menu-heading” for creating the menu items and headings.

Below is the example to create horizontal menu.

Example:

<!DOCTYPE html>

<html> 

<head> 

<title>Pure CSS Vertical Menu</title>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

</head>

<style>

.pure-vmenu-width{

display: inline-block;

}

</style>

<body>

    <div class="pure-menu pure-vmenu-width">

        <ul class="pure-menu-list">

        <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>

        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Products</a></li>

        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>

            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Pricing</a></li>

            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>

            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Offers</a></li>

    </ul>

            </div>

</body>

</html>

Below is the output: