3 Dots Dropdown Menu HTML CSS

3 Dots Dropdown Menu HTML CSS
Code Snippet:More Button & Dropdown Menu
Author: Ryan Morr
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 7,471
License: MIT
Edit Code online: View on CodePen
Read More

This code implements a 3 Dots Dropdown Menu using HTML, CSS, and JavaScript. It creates a button with three dots, and when clicked, it displays a menu with different options. The JavaScript code handles the visibility of the menu when clicking the button. It’s helpful for adding a user-friendly dropdown menu to a web page.

Furthermore, it provides a neat and compact dropdown menu, saving space and improving the user experience. You can use this code on your website to enhance user interaction.

How to Create 3 Dots Dropdown Menu in HTML CSS

1. First of all, load the Normalize CSS by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. In your HTML file, create a container div that will hold the dropdown button and menu. Inside this container, add a button element with the class "more-btn" and three spans with the class "more-dot". These dots represent the menu trigger.

<div class="container">
    <div class="more">
        <button id="more-btn" class="more-btn">
            <span class="more-dot"></span>
            <span class="more-dot"></span>
            <span class="more-dot"></span>
        </button>
        <div class="more-menu">
            <div class="more-menu-caret">
                <div class="more-menu-caret-outer"></div>
                <div class="more-menu-caret-inner"></div>
            </div>
            <ul class="more-menu-items" tabindex="-1" role="menu" aria-labelledby="more-btn" aria-hidden="true">
                <li class="more-menu-item" role="presentation">
                    <button type="button" class="more-menu-btn" role="menuitem">Share</button>
                </li>
                <li class="more-menu-item" role="presentation">
                    <button type="button" class="more-menu-btn" role="menuitem">Copy</button>
                </li>
                <li class="more-menu-item" role="presentation">
                    <button type="button" class="more-menu-btn" role="menuitem">Embed</button>
                </li>
                <li class="more-menu-item" role="presentation">
                    <button type="button" class="more-menu-btn" role="menuitem">Block</button>
                </li>
                <li class="more-menu-item" role="presentation">
                    <button type="button" class="more-menu-btn" role="menuitem">Report</button>
                </li>
            </ul>
        </div>
    </div>
</div>

Modify the menu items to suit your specific needs. You can change the text and functionality of each button by editing the HTML within the <ul class="more-menu-items"> element.

3. Now, add the following CSS to your project to customize the appearance of the dots menu. The following CSS code includes styles for the buttons, dots, and dropdown menu.

/* Page */
.cd__main{
    position: relative;
   min-height: 640px;
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.more-menu {
    width: 100px;
}

/* More Button / Dropdown Menu */

.more-btn,
.more-menu-btn {
    background: none;
    border: 0 none;
    line-height: normal;
    overflow: visible;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    width: 100%;
    text-align: left;
    outline: none;
    cursor: pointer;
}

.more-dot {
    background-color: #aab8c2;
    margin: 0 auto;
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 1px;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.more-menu {
    position: absolute;
    top: 100%;
    z-index: 900;
    float: left;
    padding: 10px 0;
    margin-top: 9px;
    background-color: #fff;
    border: 1px solid #ccd8e0;
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
    opacity: 0;
    transform: translate(0, 15px) scale(.95);
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    pointer-events: none;
}

.more-menu-caret {
    position: absolute;
    top: -10px;
    left: 12px;
    width: 18px;
    height: 10px;
    float: left;
    overflow: hidden;
}

.more-menu-caret-outer,
.more-menu-caret-inner {
    position: absolute;
    display: inline-block;
    margin-left: -1px;
    font-size: 0;
    line-height: 1;
}

.more-menu-caret-outer {
    border-bottom: 10px solid #c1d0da;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: auto;
    left: 0;
    top: 0;
    width: auto;    
}

.more-menu-caret-inner {
    top: 1px;
    left: 1px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #fff;
}

.more-menu-items {
    margin: 0;
    list-style: none;
    padding: 0;
}

.more-menu-item {
    display: block;
}

.more-menu-btn {
    min-width: 100%;
    color: #66757f;
    cursor: pointer;
    display: block;
    font-size: 13px;
    line-height: 18px;
    padding: 5px 20px;
    position: relative;
    white-space: nowrap;
}

.more-menu-item:hover {
    background-color: #489fe5;
}

.more-menu-item:hover .more-menu-btn {
    color: #fff;
}

.more-btn:hover .more-dot,
.show-more-menu .more-dot {
    background-color: #516471;
}

.show-more-menu .more-menu {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    pointer-events: auto;
}

4. Finally, include the following JavaScript code to handle the menu’s functionality. This code listens for a click on the button and toggles the menu’s visibility.

var el = document.querySelector('.more');
var btn = el.querySelector('.more-btn');
var menu = el.querySelector('.more-menu');
var visible = false;

function showMenu(e) {
    e.preventDefault();
    if (!visible) {
        visible = true;
        el.classList.add('show-more-menu');
        menu.setAttribute('aria-hidden', false);
        document.addEventListener('mousedown', hideMenu, false);
    }
}

function hideMenu(e) {
    if (btn.contains(e.target)) {
        return;
    }
    if (visible) {
        visible = false;
        el.classList.remove('show-more-menu');
        menu.setAttribute('aria-hidden', true);
        document.removeEventListener('mousedown', hideMenu);
    }
}

btn.addEventListener('click', showMenu, false);

That’s all! hopefully, you have successfully created the 3 Dots Dropdown Menu. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X