pure-css
  1. pure-css-menus
PreviousNext

Pure CSS Menus

Pure CSS offers a variety of CSS menu styles that can help you create beautiful and functional navigation menus for your website or web application.

Use

Pure CSS menus are used to create navigation menus that are easy to use and visually appealing. They can be customized to fit your website's branding, and include options like dropdown menus, hover effects, and more.

Advantage

One of the main advantages of using Pure CSS menus is that they are easy to implement and lightweight, which means they won't slow down your website's load times. Additionally, they offer a variety of styles and customization options, allowing you to create menus that match your website's overall design aesthetic.

Example

Here is an example of using a Pure CSS dropdown menu.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My Pure CSS Dropdown Menu</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/menus/3.1.0/menus-core.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/menus/3.1.0/menus-dropdown.min.css">
    </head>
    <body>
        <div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
            <a href="#" class="pure-menu-heading pure-menu-link">My Website</a>
            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
                <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
                    <a href="#" id="menuLink1" class="pure-menu-link">Products</a>
                    <ul class="pure-menu-children">
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Product 1</a></li>
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Product 2</a></li>
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Product 3</a></li>
                    </ul>
                </li>
                <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">About Us</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact Us</a></li>
            </ul>
        </div>
    </body>
</html>
Try Playground

Vertical Menu

Pure.CSS provides vertical menus by default.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My Pure CSS Dropdown Menu</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/menus/3.1.0/menus-core.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/menus/3.1.0/menus-dropdown.min.css">
    </head>
    <body>
        <div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
            <a href="#" class="pure-menu-heading pure-menu-link">My Website</a>
            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
                <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
                    <a href="#" id="menuLink1" class="pure-menu-link">Products</a>
                    <ul class="pure-menu-children">
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Product 1</a></li>
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Product 2</a></li>
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Product 3</a></li>
                    </ul>
                </li>
                <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">About Us</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact Us</a></li>
            </ul>
        </div>
    </body>
</html>
Try Playground

Summary

Pure CSS menus offer a variety of styles and customization options that can help you create beautiful and functional navigation menus for your website or web application. With their lightweight nature and easy implementation, they are a great choice for any project that requires a navigation menu.

GridDropdowns
Published on: