Skip to content
DropDown menu
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit a3b3d56 Jun 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
screenshots Styles update. Readme update. Mar 29, 2019
.gitignore initial commit Mar 26, 2019
LICENSE Initial commit Mar 26, 2019
changelog.txt Update styles. Added option "selector". Updated readme. Mar 30, 2019
dots-menu.css Update styles Mar 30, 2019
dots-menu.js Fix for drop-right Jun 21, 2019
index.html Update styles. Added option "selector". Updated readme. Mar 30, 2019
package.json Update styles. Added option "selector". Updated readme. Mar 30, 2019
readme.md

readme.md

DotsMenu

  • Latest version: 1.0.2
  • Licence: MIT

Demo

http://wdevblog.net.ru/dots-menu/

Screenshots

DropMenu - screenshot #1

DropMenu - screenshot #2

Usage

<link href="dots-menu.css" rel="stylesheet">
<script src="dots-menu.js"></script>
<script>
    var dotsMenu = new DotsMenu();
</script>
<div class="dots-menu-container">
    <ul class="dots-menu">
        <li class="nav-item">
            <a href="#1" class="nav-link">
                Top item #1
            </a>
        </li>
        <li class="nav-item active">
            <a href="#2" class="nav-link">
                Top #2 parent active
            </a>
            <ul>
                <li class="nav-item">
                    <a href="#1-1" class="nav-link">
                        Item #1
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#1-2" class="nav-link">
                        Item #2
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

Class "dots-menu-fluid" for full width:

<div class="dots-menu-container">
    <ul class="dots-menu dots-menu-fluid">
        ...
    </ul>
</div>

Options

  • dotsMenuButtonWidth - The width of the drop-down button. Default: 50.
  • mobileViewWindowWidth - The width of the window for the mobile menu view. Default: 576.
  • dotsMenuButtonPosition - The position of the button drop-down menu. Default: 'right'.
  • selector - Menu selector. Default: '.dots-menu'.

Example with options:

<script>
    var dotsMenu = new DotsMenu({
        dotsMenuButtonWidth: 50,
        mobileViewWindowWidth: 576,
        dotsMenuButtonPosition: 'right',
        selector: '.dots-menu'
    });
</script>
You can’t perform that action at this time.