├── .gitignore
├── screenshots
    ├── screenshot01.png
    └── screenshot02.png
├── package.json
├── changelog.txt
├── LICENSE
├── readme.md
├── dots-menu.css
├── index.html
└── dots-menu.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | 
4 | 


--------------------------------------------------------------------------------
/screenshots/screenshot01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andchir/dots-menu/HEAD/screenshots/screenshot01.png


--------------------------------------------------------------------------------
/screenshots/screenshot02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andchir/dots-menu/HEAD/screenshots/screenshot02.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dots-menu",
 3 |   "version": "1.1.0",
 4 |   "description": "",
 5 |   "main": "index.html",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "menu",
11 |     "twitch",
12 |     "responsive"
13 |   ],
14 |   "author": "Andchir <andchir@gmail.com>",
15 |   "license": "MIT"
16 | }
17 | 


--------------------------------------------------------------------------------
/changelog.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | Changelog
 3 | ---------
 4 | 
 5 | 1.1.1
 6 | - Scroll drop down menu on mobile devices (fixedMode).
 7 | 
 8 | 1.1.0
 9 | - New style with rounded borders.
10 | 
11 | 1.0.4
12 | - Open on click form mobiles fix.
13 | - Added options "rightSpace".
14 | 
15 | 1.0.3
16 | - Styles update
17 | 
18 | 1.0.2
19 | - Updated styles.
20 | - Added option "selector".
21 | 
22 | 1.0.1
23 | - Added option "dotsMenuButtonPosition".
24 | 
25 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 andchir
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | DotsMenu
 2 | ========
 3 | 
 4 | - Latest version: 1.1.1
 5 | - Licence: MIT
 6 | 
 7 | Demo
 8 | ----
 9 | 
10 | [http://wdevblog.net.ru/dots-menu/](http://wdevblog.net.ru/dots-menu/)
11 | 
12 | Screenshots
13 | -----------
14 | 
15 | ![DropMenu - screenshot #1](https://raw.githubusercontent.com/andchir/dots-menu/master/screenshots/screenshot01.png?raw=true "DropMenu - screenshot #1")
16 | 
17 | ![DropMenu - screenshot #2](https://raw.githubusercontent.com/andchir/dots-menu/master/screenshots/screenshot02.png?raw=true "DropMenu - screenshot #2")
18 | 
19 | Usage
20 | -----
21 | 
22 | ~~~
23 | <link href="dots-menu.css" rel="stylesheet">
24 | <script src="dots-menu.js"></script>
25 | <script>
26 |     var dotsMenu = new DotsMenu();
27 | </script>
28 | ~~~
29 | 
30 | ~~~
31 | <div class="dots-menu-container">
32 |     <ul class="dots-menu">
33 |         <li class="nav-item">
34 |             <a href="#1" class="nav-link">
35 |                 Top item #1
36 |             </a>
37 |         </li>
38 |         <li class="nav-item active">
39 |             <a href="#2" class="nav-link">
40 |                 Top #2 parent active
41 |             </a>
42 |             <ul>
43 |                 <li class="nav-item">
44 |                     <a href="#1-1" class="nav-link">
45 |                         Item #1
46 |                     </a>
47 |                 </li>
48 |                 <li class="nav-item">
49 |                     <a href="#1-2" class="nav-link">
50 |                         Item #2
51 |                     </a>
52 |                 </li>
53 |             </ul>
54 |         </li>
55 |     </ul>
56 | </div>
57 | ~~~
58 | 
59 | Class "dots-menu-fluid" for full width:
60 | ~~~
61 | <div class="dots-menu-container">
62 |     <ul class="dots-menu dots-menu-fluid">
63 |         ...
64 |     </ul>
65 | </div>
66 | ~~~
67 | 
68 | Options
69 | -------
70 | 
71 | - **dotsMenuButtonWidth** - The width of the drop-down button. _Default: 50_.
72 | - **mobileViewWindowWidth** - The width of the window for the mobile menu view. _Default: 576_.
73 | - **dotsMenuButtonPosition** - The position of the button drop-down menu. _Default: 'right'_.
74 | - **selector** - Menu selector. _Default: '.dots-menu'_.
75 | - **rightSpace** - The empty space on the right in px. _Default: 0_.
76 | - **fixedMode** - The dropdown menu will scroll to fit the screen size of the mobile device. You can also use CSS class "dots-menu-container-fixed" for "dots-menu-container". _Default: false_.
77 | 
78 | Example with options:
79 | ~~~
80 | <script>
81 |     var dotsMenu = new DotsMenu({
82 |         dotsMenuButtonWidth: 50,
83 |         mobileViewWindowWidth: 576,
84 |         fixedMode: false,
85 |         dotsMenuButtonPosition: 'right',
86 |         selector: '.dots-menu'
87 |     });
88 | </script>
89 | ~~~
90 | 


--------------------------------------------------------------------------------
/dots-menu.css:
--------------------------------------------------------------------------------
  1 | 
  2 | /* dots-menu */
  3 | .dots-menu-container { height: 50px; padding: 0 5px; position: relative; background-color: #fff; overflow: hidden; }
  4 | .dots-menu-container:after { content: ''; display: block; clear: both; }
  5 | .dots-menu-container * { box-sizing: border-box; }
  6 | .dots-menu-container-fixed { position: fixed; width: 100%; top: 0; left: 0; }
  7 | .dots-menu { width: 960px; max-width: 100%; min-height: 50px; list-style-type: none; padding: 0; margin: 0 auto; box-sizing: border-box; }
  8 | .dots-menu-fluid { max-width: 100%; width: 100%; }
  9 | .dots-menu > .nav-item { display: block; float: left; padding: 7px 3px; margin: 0; position: relative; }
 10 | .dots-menu > .nav-item > .nav-link { line-height: 1.2; display: block; position: relative; padding: 8px 16px; border-radius: 14px; text-decoration: none; color: #777; transition: background-color 300ms; }
 11 | .dots-menu > .nav-item.nav-item-parent > .nav-link {  }
 12 | .dots-menu > .nav-item:hover > .nav-link,
 13 | .dots-menu > .nav-item:hover > .nav-link { background-color: #eee; border-color: #eee; color: #585858; }
 14 | .dots-menu .nav-item:hover > ul { display: block; }
 15 | .dots-menu > .nav-item.active > .nav-link { background-color: #3d7fd1; color: #fff; }
 16 | .dots-menu .nav-item-hidden { position: fixed; top: -300px; left: -300px; }
 17 | 
 18 | .dots-menu ul { width: 220px; position: absolute; left: 0; top: 100%; padding: 7px 0; margin: 0; list-style-type: none; z-index: 500; display: none; }
 19 | .dots-menu ul li { line-height: 1.5; width: 100%; padding: 3px 7px; margin: 0; position: relative; border-left: 1px solid #cbcbcb; border-right: 1px solid #cbcbcb; background-color: #fff; }
 20 | .dots-menu ul li:first-child { padding-top: 7px; border-top: 1px solid #cbcbcb; border-top-left-radius: 20px; border-top-right-radius: 20px; }
 21 | .dots-menu ul li:last-child { padding-bottom: 7px; border-bottom: 1px solid #cbcbcb; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
 22 | .dots-menu ul li .nav-link { display: block; width: 100%; padding: 8px 16px; border-radius: 14px; background-color: #fff; color: #777; text-decoration: none; transition: background-color 300ms; }
 23 | .dots-menu ul li:hover > .nav-link { background-color: #e9e9e9; color: #585858; }
 24 | .dots-menu ul li.active > .nav-link { background-color: #e9e9e9; color: #000; }
 25 | .dots-menu ul ul { left: 100%; top: -7px; margin: 0; }
 26 | 
 27 | /* arrow */
 28 | .dots-menu > .nav-item.nav-item-parent > .nav-link:before,
 29 | .dots-menu > .nav-item.nav-item-parent > .nav-link:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 7px 7px 0 7px; border-color: #eee transparent transparent transparent; position: absolute; left: 50%; bottom: -5px; margin-left: -7px; transition: bottom 300ms, background-color 300ms; }
 30 | .dots-menu > .nav-item.nav-item-parent:hover > .nav-link:before { bottom: -14px; border-color: #fff transparent transparent transparent; }
 31 | .dots-menu > .nav-item.nav-item-parent:hover > .nav-link:after { bottom: -7px; border-color: #eee transparent transparent transparent; }
 32 | .dots-menu > .nav-item.nav-item-parent.active:hover > .nav-link:before { bottom: -14px; }
 33 | .dots-menu > .nav-item.nav-item-parent.active:hover > .nav-link:after { bottom: -7px; }
 34 | .dots-menu > .nav-item.nav-item-parent.active > .nav-link:after { border-color: #3d7fd1 transparent transparent transparent; }
 35 | .dots-menu > .nav-item.nav-item-parent.active > .nav-link:before { border-color: #ffffff transparent transparent transparent; }
 36 | 
 37 | .dots-menu ul .nav-item.nav-item-parent > .nav-link:before { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 7px; border-color: transparent transparent transparent #d6d6d6; position: absolute; right: 7px; top: 50%; margin: -7px 0 0 0; transition: right 300ms, border-color 300ms; }
 38 | .dots-menu ul .nav-item.nav-item-parent.active > .nav-link:before { right: 14px; }
 39 | .dots-menu ul .nav-item.nav-item-parent:hover > .nav-link:before { right: 0; border-color: transparent transparent transparent #e9e9e9; }
 40 | .dots-menu ul .nav-item.nav-item-parent:hover:before,
 41 | .dots-menu ul .nav-item.nav-item-parent:hover:after { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 8px;  border-color: transparent transparent transparent #cbcbcb; position: absolute; right: -8px; top: 50%; margin: -8px 0 0 0; z-index: 502; }
 42 | .dots-menu ul .nav-item.nav-item-parent:hover:after { border-color: transparent transparent transparent #fff; right: -7px; z-index: 503; }
 43 | 
 44 | /* drop-right */
 45 | .dots-menu .nav-item.drop-right ul { right: 0; left: auto; }
 46 | .dots-menu .nav-item.drop-right ul ul { right: 100%; left: auto; }
 47 | .dots-menu .nav-item.drop-right ul .nav-item.nav-item-parent > .nav-link:before { right: auto; left: 7px; border-width: 7px 7px 7px 0;  border-color: transparent #e9e9e9 transparent transparent; transition: left 300ms, border-color 300ms; }
 48 | .dots-menu .nav-item.drop-right ul .nav-item.nav-item-parent.active > .nav-link:before { left: 2px; }
 49 | .dots-menu .nav-item.drop-right ul .nav-item.nav-item-parent:hover > .nav-link:before { left: 0; }
 50 | .dots-menu .nav-item.drop-right ul .nav-item.nav-item-parent:hover:before { border-width: 7px 7px 7px 0; border-color: transparent #cbcbcb transparent transparent; left: -8px; }
 51 | .dots-menu .nav-item.drop-right ul .nav-item.nav-item-parent:hover:after { border-width: 7px 7px 7px 0; border-color: transparent #fff transparent transparent; left: -7px; }
 52 | 
 53 | /* dots-menu-drop */
 54 | .dots-menu.dots-menu-drop { position: absolute; right: 0; top: 0; width: 50px; height: 50px; display: none; background-color: transparent; }
 55 | .dots-menu.dots-menu-drop > .nav-item { position: absolute; right: 0; top: 0; width: 50px; height: 100%; background-color: transparent; }
 56 | .dots-menu.dots-menu-drop > .nav-item > .nav-link { position: absolute; right: 5px; top: 5px; z-index: 500; border-radius: 50%; padding: 0; width: 40px; height:40px; background-color: #eee; }
 57 | .dots-menu.dots-menu-drop > .nav-item > .nav-link:before,
 58 | .dots-menu.dots-menu-drop > .nav-item > .nav-link:after { display: none; }
 59 | .dots-menu.dots-menu-drop:hover > .nav-item > .nav-link:before,
 60 | .dots-menu.dots-menu-drop > .nav-item-parent-visible > .nav-link:before { border-color: #fff transparent transparent transparent; bottom: -12px; display: block; }
 61 | .dots-menu.dots-menu-drop:hover > .nav-item > .nav-link:after { /*bottom: -6px; display: block;*/ }
 62 | .dots-menu.dots-menu-drop:before,
 63 | .dots-menu.dots-menu-drop:after,
 64 | .dots-menu.dots-menu-drop > li:first-child { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #cacaca; position: absolute; top: 50%; z-index: 501; margin: -3px 0 0 -3px; pointer-events: none; }
 65 | .dots-menu.dots-menu-drop:hover:before,
 66 | .dots-menu.dots-menu-drop:hover:after,
 67 | .dots-menu.dots-menu-drop:hover > li:first-child { background-color: #b4b4b4; }
 68 | .dots-menu.dots-menu-drop > li:first-child { right: 22px; }
 69 | .dots-menu.dots-menu-drop:before { right: 12px; }
 70 | .dots-menu.dots-menu-drop:after { right: 32px; }
 71 | 
 72 | /* dots-menu-drop left */
 73 | .dots-menu.dots-menu-drop.dots-menu-drop-left { position: relative; float: left; margin-right: 1px; }
 74 | .dots-menu.dots-menu-drop.dots-menu-drop-left > li:first-child { left: 25px; }
 75 | .dots-menu.dots-menu-drop.dots-menu-drop-left:before { left: 14px; }
 76 | .dots-menu.dots-menu-drop.dots-menu-drop-left:after { left: 36px; }
 77 | .dots-menu.dots-menu-drop.dots-menu-drop-left > .nav-item > .nav-link { left: 5px; right: 0; }
 78 | 
 79 | @media (max-width: 576px) {
 80 |     .dots-menu { min-height: 0; }
 81 |     .dots-menu > .nav-item:not(.nav-item-hidden) { position: static; }
 82 |     .dots-menu .nav-item:hover > ul { display: none; }
 83 |     .dots-menu > li > ul { padding: 7px; overflow: hidden; overflow-y: auto; }
 84 |     .dots-menu ul { width: 100%; }
 85 |     .dots-menu ul li:hover > .nav-link { background-color: #e9e9e9; }
 86 |     .dots-menu ul .nav-item.nav-item-parent > .nav-link { position: relative; padding: 12px 50px 12px 18px; }
 87 |     .dots-menu ul .nav-item.nav-item-parent > .nav-link:before { content: ''; display: block; border: 0; width: 30px; height: 30px; border-radius: 50%; padding: 0; position: absolute; left: auto; right: 9px; bottom: auto; top: 50%; margin-top: -15px; background-color: #cbcbcb; }
 88 |     .dots-menu ul .nav-item.nav-item-parent > .nav-link:after { content: ''; display: block;  width: 0; height: 0; border-style: solid; border-width: 7px 7px 0 7px; border-color: #eee transparent transparent transparent; position: absolute; left: auto; right: 18px; bottom: auto; top: 50%; margin-top: -2px; transition: margin-top 300ms, border-top-color 300ms; }
 89 |     .dots-menu ul .nav-item.nav-item-parent:hover > .nav-link:before { left: auto; right: 9px; }
 90 |     .dots-menu ul .nav-item.nav-item-parent:hover > :after { left: auto; right: 18px; bottom: auto; top: 50%; }
 91 |     .dots-menu ul .nav-item.nav-item-parent:hover:before,
 92 |     .dots-menu ul .nav-item.nav-item-parent:hover:after { display: none; }
 93 |     .dots-menu ul .nav-item.nav-item-parent.active > .nav-link:before { right: 9px; }
 94 | 
 95 |     .dots-menu ul .nav-item.nav-item-parent.nav-item-parent-visible > .nav-link:after { margin-top: 0; border-top-color: #a9a9a9; }
 96 | 
 97 |     .dots-menu ul ul { position: static; padding-bottom: 0; }
 98 |     .dots-menu.dots-menu-drop:not(.dots-menu-drop-left) { width: 100%; height: 50px; }
 99 |     .dots-menu.dots-menu-drop,
100 |     .dots-menu.dots-menu-drop.dots-menu-drop-left { position: static; }
101 |     .dots-menu.dots-menu-drop > .nav-item { position: static; float: right; margin-right: -5px; cursor: pointer; }
102 |     .dots-menu.dots-menu-drop > .nav-item ul { width: 100%; cursor: default; }
103 |     .dots-menu .nav-item.drop-right ul .nav-item.nav-item-parent > .nav-link:before,
104 |     .dots-menu .nav-item.drop-right ul .nav-item.nav-item-parent:hover > .nav-link:before { left: auto; right: 9px; }
105 | 
106 |     .dots-menu .nav-item-visible { display: block !important; }
107 |     .dots-menu .nav-item-parent-visible > ul { display: block !important; }
108 | }
109 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6 |     <meta name="description" content="">
  7 |     <meta name="author" content="">
  8 |     <title>Dots Menu</title>
  9 | 
 10 |     <style>
 11 |         body { padding: 65px 0 0 0; margin: 0; background-color: #ddd; font-family: sans-serif; box-sizing: border-box; }
 12 |         .container { width: 960px; max-width: 100%; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
 13 |     </style>
 14 | 
 15 |     <link href="dots-menu.css?v=1.1.1" rel="stylesheet">
 16 |     <script src="dots-menu.js?v=1.1.1"></script>
 17 |     <script>
 18 |         var dotsMenu = new DotsMenu({fixedMode: true});
 19 |     </script>
 20 | 
 21 | </head>
 22 | <body>
 23 | 
 24 | <header>
 25 |     <div class="dots-menu-container dots-menu-container-fixed">
 26 |         <ul class="dots-menu">
 27 |             <li class="nav-item">
 28 |                 <a href="#1" class="nav-link">
 29 |                     Top item #1
 30 |                 </a>
 31 |             </li>
 32 |             <li class="nav-item active">
 33 |                 <a href="#2" class="nav-link">
 34 |                     Top #2 parent active
 35 |                 </a>
 36 |                 <ul>
 37 |                     <li class="nav-item">
 38 |                         <a href="#1-1" class="nav-link">
 39 |                             Item #1
 40 |                         </a>
 41 |                     </li>
 42 |                     <li class="nav-item">
 43 |                         <a href="#1-2" class="nav-link">
 44 |                             Item #2
 45 |                         </a>
 46 |                     </li>
 47 |                     <li class="nav-item">
 48 |                         <a href="#1-3" class="nav-link">
 49 |                             Item #3 - parent very very very very long
 50 |                         </a>
 51 |                         <ul>
 52 |                             <li class="nav-item">
 53 |                                 <a href="#1-3-1" class="nav-link">
 54 |                                     Item #1
 55 |                                 </a>
 56 |                             </li>
 57 |                             <li class="nav-item">
 58 |                                 <a href="#1-3-2" class="nav-link">
 59 |                                     Item #2
 60 |                                 </a>
 61 |                             </li>
 62 |                             <li class="nav-item">
 63 |                                 <a href="#1-3-3" class="nav-link">
 64 |                                     Item #3
 65 |                                 </a>
 66 |                             </li>
 67 |                             <li class="nav-item">
 68 |                                 <a href="#1-3-4" class="nav-link">
 69 |                                     Item #4
 70 |                                 </a>
 71 |                             </li>
 72 |                         </ul>
 73 |                     </li>
 74 |                     <li class="nav-item active">
 75 |                         <a href="#1-4" class="nav-link">
 76 |                             Item #4 - parent active
 77 |                         </a>
 78 |                         <ul>
 79 |                             <li class="nav-item">
 80 |                                 <a href="#1-4-1" class="nav-link">
 81 |                                     Item #1
 82 |                                 </a>
 83 |                             </li>
 84 |                             <li class="nav-item">
 85 |                                 <a href="#1-4-2" class="nav-link">
 86 |                                     Item #2
 87 |                                 </a>
 88 |                             </li>
 89 |                             <li class="nav-item">
 90 |                                 <a href="#1-4-3" class="nav-link">
 91 |                                     Item #3
 92 |                                 </a>
 93 |                             </li>
 94 |                             <li class="nav-item active">
 95 |                                 <a href="#1-4-4" class="nav-link">
 96 |                                     Item #4 - parent active
 97 |                                 </a>
 98 |                                 <ul>
 99 |                                     <li class="nav-item">
100 |                                         <a href="#1-4-4-1" class="nav-link">
101 |                                             Item #1
102 |                                         </a>
103 |                                     </li>
104 |                                     <li class="nav-item active">
105 |                                         <a href="#1-4-4-2" class="nav-link">
106 |                                             Item #2 active
107 |                                         </a>
108 |                                     </li>
109 |                                     <li class="nav-item">
110 |                                         <a href="#1-4-4-3" class="nav-link">
111 |                                             Item #3
112 |                                         </a>
113 |                                     </li>
114 |                                     <li class="nav-item">
115 |                                         <a href="#1-4-4-4" class="nav-link">
116 |                                             Item #4
117 |                                         </a>
118 |                                     </li>
119 |                                 </ul>
120 |                             </li>
121 |                         </ul>
122 |                     </li>
123 |                 </ul>
124 |             </li>
125 |             <li class="nav-item">
126 |                 <a href="#3" class="nav-link">
127 |                     Top item #3
128 |                 </a>
129 |             </li>
130 |             <li class="nav-item active">
131 |                 <a href="#4" class="nav-link">
132 |                     Top #4 active
133 |                 </a>
134 |             </li>
135 |             <li class="nav-item">
136 |                 <a href="#5" class="nav-link">
137 |                     Top item #5
138 |                 </a>
139 |             </li>
140 |             <li class="nav-item">
141 |                 <a href="#6" class="nav-link">
142 |                     Top item #6 parent
143 |                 </a>
144 |                 <ul>
145 |                     <li class="nav-item">
146 |                         <a href="#" class="nav-link">
147 |                             Item #1
148 |                         </a>
149 |                     </li>
150 |                     <li class="nav-item">
151 |                         <a href="#" class="nav-link">
152 |                             Item #2 - parent
153 |                         </a>
154 |                         <ul>
155 |                             <li class="nav-item">
156 |                                 <a href="#" class="nav-link">
157 |                                     Item #1
158 |                                 </a>
159 |                             </li>
160 |                             <li class="nav-item">
161 |                                 <a href="#" class="nav-link">
162 |                                     Item #2
163 |                                 </a>
164 |                             </li>
165 |                             <li class="nav-item">
166 |                                 <a href="#" class="nav-link">
167 |                                     Item #3
168 |                                 </a>
169 |                             </li>
170 |                         </ul>
171 |                     </li>
172 |                 </ul>
173 |             </li>
174 |         </ul>
175 |     </div>
176 | </header>
177 | 
178 | <main role="main">
179 |     <div class="container">
180 | 
181 |         <p>
182 |             DropMenu<br>
183 |             <a href="https://github.com/andchir/dots-menu" target="_blank">https://github.com/andchir/dots-menu</a>
184 |         </p>
185 |         <p>
186 |         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula condimentum libero quis aliquam. Donec a libero non nunc tristique lobortis ac a quam. Vestibulum velit mi, convallis id accumsan sit amet, accumsan id elit. Proin vel urna non urna ultricies aliquam et quis tortor. Mauris vulputate ullamcorper cursus. Donec non erat fringilla, porta orci a, sagittis magna. Donec odio ante, venenatis sit amet turpis ac, sodales laoreet felis. Praesent rutrum commodo enim, id varius odio euismod a. Donec varius tellus et molestie pretium.
187 |         </p>
188 |         <p>
189 |         Nulla tristique blandit nisl, vel luctus lorem convallis elementum. Etiam molestie, metus mattis tincidunt ullamcorper, sapien ex scelerisque ex, ut malesuada purus risus sit amet eros. Praesent condimentum nunc neque, quis ullamcorper risus vehicula nec. Suspendisse potenti. Nam eget commodo urna, id dictum tellus. Integer eu diam semper, rhoncus sem id, laoreet leo. Donec et eros erat.
190 |         </p>
191 |         <p>
192 |         Proin vitae nisi vel risus vulputate cursus non ut nisi. Phasellus pellentesque id dolor non vehicula. Donec faucibus dolor vitae posuere aliquet. Vestibulum neque augue, tempus eu fermentum ut, sodales nec nunc. Vivamus varius tellus eget cursus egestas. Praesent porta neque id neque cursus, blandit tincidunt justo mollis. Etiam volutpat ipsum sed ligula fermentum dapibus.
193 |         </p>
194 |         <p>
195 |         Morbi mi ipsum, interdum ullamcorper lacus cursus, sagittis scelerisque lacus. Integer vitae ipsum a felis porttitor tincidunt sit amet volutpat dui. Curabitur ligula nulla, interdum vel eros quis, tincidunt varius justo. Praesent auctor arcu at ligula luctus, id volutpat dolor sagittis. Duis urna odio, tincidunt lacinia nulla eu, tincidunt facilisis tortor. Sed iaculis ipsum nisi, nec dapibus dolor blandit sit amet. Fusce suscipit mattis mauris, a condimentum risus accumsan ut. Donec in volutpat lectus. Donec lacinia consequat nisi, at efficitur turpis luctus vel. Pellentesque sollicitudin bibendum neque nec faucibus. Vestibulum lobortis, felis sit amet vulputate suscipit, purus felis ultrices est, quis tempor erat risus vitae sem. Phasellus aliquet eleifend nisi, vitae hendrerit quam tincidunt id.
196 |         </p>
197 |         <p>
198 |         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in turpis eget justo vulputate mattis. Aenean rhoncus eros eu purus pulvinar, at semper magna consequat. Curabitur mollis turpis et augue malesuada, sed vestibulum velit mattis. Ut ultricies condimentum lectus ac laoreet. Nulla viverra orci risus, non laoreet enim sollicitudin in. Fusce in rhoncus purus. Morbi tempor risus nisi, a dignissim massa pellentesque sit amet. Vestibulum feugiat nisi nec ipsum varius, eu semper purus rutrum. Aliquam ornare ante vitae diam mattis, id congue felis vestibulum.
199 |         </p>
200 |         <p>
201 |             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula condimentum libero quis aliquam. Donec a libero non nunc tristique lobortis ac a quam. Vestibulum velit mi, convallis id accumsan sit amet, accumsan id elit. Proin vel urna non urna ultricies aliquam et quis tortor. Mauris vulputate ullamcorper cursus. Donec non erat fringilla, porta orci a, sagittis magna. Donec odio ante, venenatis sit amet turpis ac, sodales laoreet felis. Praesent rutrum commodo enim, id varius odio euismod a. Donec varius tellus et molestie pretium.
202 |         </p>
203 |         <p>
204 |             Nulla tristique blandit nisl, vel luctus lorem convallis elementum. Etiam molestie, metus mattis tincidunt ullamcorper, sapien ex scelerisque ex, ut malesuada purus risus sit amet eros. Praesent condimentum nunc neque, quis ullamcorper risus vehicula nec. Suspendisse potenti. Nam eget commodo urna, id dictum tellus. Integer eu diam semper, rhoncus sem id, laoreet leo. Donec et eros erat.
205 |         </p>
206 |         <p>
207 |             Proin vitae nisi vel risus vulputate cursus non ut nisi. Phasellus pellentesque id dolor non vehicula. Donec faucibus dolor vitae posuere aliquet. Vestibulum neque augue, tempus eu fermentum ut, sodales nec nunc. Vivamus varius tellus eget cursus egestas. Praesent porta neque id neque cursus, blandit tincidunt justo mollis. Etiam volutpat ipsum sed ligula fermentum dapibus.
208 |         </p>
209 |         <p>
210 |             Morbi mi ipsum, interdum ullamcorper lacus cursus, sagittis scelerisque lacus. Integer vitae ipsum a felis porttitor tincidunt sit amet volutpat dui. Curabitur ligula nulla, interdum vel eros quis, tincidunt varius justo. Praesent auctor arcu at ligula luctus, id volutpat dolor sagittis. Duis urna odio, tincidunt lacinia nulla eu, tincidunt facilisis tortor. Sed iaculis ipsum nisi, nec dapibus dolor blandit sit amet. Fusce suscipit mattis mauris, a condimentum risus accumsan ut. Donec in volutpat lectus. Donec lacinia consequat nisi, at efficitur turpis luctus vel. Pellentesque sollicitudin bibendum neque nec faucibus. Vestibulum lobortis, felis sit amet vulputate suscipit, purus felis ultrices est, quis tempor erat risus vitae sem. Phasellus aliquet eleifend nisi, vitae hendrerit quam tincidunt id.
211 |         </p>
212 |         <p>
213 |             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in turpis eget justo vulputate mattis. Aenean rhoncus eros eu purus pulvinar, at semper magna consequat. Curabitur mollis turpis et augue malesuada, sed vestibulum velit mattis. Ut ultricies condimentum lectus ac laoreet. Nulla viverra orci risus, non laoreet enim sollicitudin in. Fusce in rhoncus purus. Morbi tempor risus nisi, a dignissim massa pellentesque sit amet. Vestibulum feugiat nisi nec ipsum varius, eu semper purus rutrum. Aliquam ornare ante vitae diam mattis, id congue felis vestibulum.
214 |         </p>
215 |     </div>
216 | </main>
217 | 
218 | </body>
219 | </html>
220 | 


--------------------------------------------------------------------------------
/dots-menu.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * DotsMenu https://github.com/andchir/dots-menu
  3 |  * @version 1.1.1
  4 |  * @author Andchir <andchir@gmail.com>
  5 |  * @license: MIT
  6 |  */
  7 | (function (factory) {
  8 | 
  9 |     if (typeof define === 'function' && define.amd) {
 10 | 
 11 |         // AMD. Register as an anonymous module.
 12 |         define([], factory);
 13 | 
 14 |     } else if (typeof exports === 'object') {
 15 | 
 16 |         // Node/CommonJS
 17 |         module.exports = factory();
 18 | 
 19 |     } else {
 20 | 
 21 |         // Browser globals
 22 |         window.DotsMenu = factory();
 23 |     }
 24 | 
 25 | }(function( ){
 26 | 
 27 |     'use strict';
 28 | 
 29 |     return function (options) {
 30 | 
 31 |         var self = this;
 32 | 
 33 |         this.isInitialized = false;
 34 | 
 35 |         var mainOptions = {
 36 |             dotsMenuButtonWidth: 50,
 37 |             mobileViewWindowWidth: 576,
 38 |             rightSpace: 0,
 39 |             fixedMode: false,
 40 |             dotsMenuButtonPosition: 'right',
 41 |             selector: '.dots-menu'
 42 |         };
 43 | 
 44 |         /**
 45 |          * Initialize
 46 |          */
 47 |         this.init = function () {
 48 |             this.extend(mainOptions, options);
 49 |             this.onReady(function() {
 50 |                 self.updateMenuParentClass();
 51 |                 self.dotsDropDownInit();
 52 |                 self.onResize();
 53 |                 self.isInitialized = true;
 54 |             });
 55 |             window.addEventListener('resize', this.onResize.bind(this));
 56 |         };
 57 | 
 58 |         /**
 59 |          * Initialize dots drop down menu
 60 |          */
 61 |         this.dotsDropDownInit = function () {
 62 |             var menuParentContainer, dotsMenu, menuArr = document.querySelectorAll(mainOptions.selector);
 63 |             menuArr.forEach(function(menuEl) {
 64 |                 menuParentContainer = menuEl.parentNode;
 65 |                 menuParentContainer.style.overflow = 'visible';
 66 |                 // Add drop-menu
 67 |                 dotsMenu = self.createElement('ul', {
 68 |                     className: 'dots-menu dots-menu-drop dots-menu-drop-' + mainOptions.dotsMenuButtonPosition,
 69 |                     innerHTML: '<li></li>'
 70 |                 });
 71 |                 if (mainOptions.dotsMenuButtonPosition === 'right' && mainOptions.rightSpace) {
 72 |                     dotsMenu.style.right = mainOptions.rightSpace + 'px';
 73 |                 }
 74 |                 self.append(dotsMenu, self.createElement('li', {
 75 |                     className: 'nav-item' + (mainOptions.dotsMenuButtonPosition === 'right' ? ' drop-right' : ''),
 76 |                     innerHTML: '<span class="nav-link"></span><ul></ul>'
 77 |                 }));
 78 |                 self.append(menuParentContainer, dotsMenu, (mainOptions.dotsMenuButtonPosition === 'left'));
 79 |                 if (dotsMenu.querySelector('li > span.nav-link')) {
 80 |                     dotsMenu.querySelector('li > span.nav-link').addEventListener('click', function(e) {
 81 |                         e.preventDefault();
 82 |                         
 83 |                         // Close other
 84 |                         var parents = document.querySelectorAll(mainOptions.selector + ':not(.dots-menu-drop)');
 85 |                         parents.forEach(function(parent) {
 86 |                             parent.querySelectorAll('.nav-item-parent.nav-item-parent-visible').forEach(function (liEl) {
 87 |                                 liEl.classList.remove('nav-item-parent-visible');
 88 |                             })
 89 |                         });
 90 |                         // Open drop-down menu
 91 |                         e.target.parentNode.classList.toggle('nav-item-parent-visible');
 92 |                         self.updateDropHeight(Array.from(e.target.parentNode.querySelectorAll('ul'))[0], dotsMenu);
 93 |                     }, false);
 94 |                 }
 95 |             });
 96 |         };
 97 |     
 98 |         /**
 99 |          * Update drop menu height
100 |          * @param dropMenuEl
101 |          * @param parent
102 |          */
103 |         this.updateDropHeight = function(dropMenuEl, parent) {
104 |             if (!mainOptions.fixedMode) {
105 |                 return;
106 |             }
107 |             var windowWidth = window.innerWidth;
108 |             var windowHeight = window.innerHeight;
109 |             var menuParentContainer = parent.parentNode;
110 |             var isMobileSize = windowWidth <= mainOptions.mobileViewWindowWidth;
111 |     
112 |             if (isMobileSize) {
113 |                 dropMenuEl.style.height = windowHeight - (menuParentContainer.getBoundingClientRect()['height']) + 'px';
114 |             } else {
115 |                 dropMenuEl.style.height = 'auto';
116 |             }
117 |         };
118 | 
119 |         /**
120 |          * Add special CSS classes to menu
121 |          * @param parents
122 |          */
123 |         this.updateMenuParentClass = function(parents) {
124 |             if (!parents) {
125 |                 parents = Array.from(document.querySelectorAll(mainOptions.selector));
126 |             }
127 |             
128 |             parents.forEach(function(parent) {
129 |                 Array.from(parent.querySelectorAll('li.nav-item')).forEach(function(liEl) {
130 |                     if (liEl.querySelectorAll('ul').length > 0 && liEl.className.indexOf('nav-item-parent') === -1) {
131 |                         liEl.classList.add('nav-item-parent');
132 |                         liEl.querySelector('a').addEventListener('click', function(e) {
133 |                             if (!liEl.classList.contains('nav-item-parent')) {
134 |                                 return;
135 |                             }
136 |                             var currentLiEl = e.target.parentNode,
137 |                                 dropMenu = currentLiEl.querySelector('ul'),
138 |                                 clientX = e.clientX,
139 |                                 elRect = e.target.getBoundingClientRect(),
140 |                                 windowWidth = window.innerWidth;
141 |                             if (!dropMenu
142 |                                 || windowWidth > mainOptions.mobileViewWindowWidth
143 |                                 || (liEl.parentNode !== parent && clientX < elRect.width - 50)) {
144 |                                     return;
145 |                             }
146 |                             e.preventDefault();
147 |                             
148 |                             if (liEl.parentNode === parent) {
149 |                                 self.updateDropHeight(dropMenu, parent);
150 |                                 // Close other
151 |                                 var prnts = Array.from(document.querySelectorAll(mainOptions.selector));
152 |                                 prnts.forEach(function(prnt) {
153 |                                     prnt.querySelectorAll('li.nav-item-parent').forEach(function(el) {
154 |                                         if (el !== currentLiEl) {
155 |                                             el.classList.remove('nav-item-parent-visible');
156 |                                         }
157 |                                     });
158 |                                 });
159 |                             }
160 |                             // Open drop-down menu
161 |                             currentLiEl.classList.toggle('nav-item-parent-visible');
162 |                         });
163 |                     }
164 |                 });
165 |             });
166 |         };
167 | 
168 |         /**
169 |          * On window resize
170 |          */
171 |         this.onResize = function () {
172 |             var elRect, liFirstlevelArr, menuParentContainer, dotsMenu, dotsMenuDrop, menuRect,
173 |                 menuArr = document.querySelectorAll(mainOptions.selector+':not(.dots-menu-drop)');
174 |             
175 |             menuArr.forEach(function(menuEl) {
176 |                 menuRect = menuEl.getBoundingClientRect();
177 |                 menuParentContainer = menuEl.parentNode;
178 |                 dotsMenu = menuParentContainer.querySelector('.dots-menu-drop');
179 |                 dotsMenuDrop = dotsMenu.querySelector('.nav-item > ul');
180 |                 dotsMenuDrop.innerHTML = '';
181 | 
182 |                 liFirstlevelArr = Array.prototype.slice.call(menuEl.childNodes);
183 |                 liFirstlevelArr = liFirstlevelArr.filter(function (el) {
184 |                     return el.tagName && el.tagName.toLowerCase() === 'li';
185 |                 });
186 | 
187 |                 var posLeft = 0, dropCount = 0, visibleNumber = 0;
188 |                 liFirstlevelArr.forEach(function(liEl, index) {
189 |                     elRect = liEl.getBoundingClientRect();
190 |                     if (index === 0) {
191 |                         posLeft = elRect.left;
192 |                         posLeft += elRect.width;
193 |                         liEl.classList.remove('drop-right');
194 |                         visibleNumber++;
195 |                         return;
196 |                     }
197 |                     if (posLeft + elRect.width + mainOptions.dotsMenuButtonWidth + mainOptions.rightSpace > menuRect.left + menuRect.width) {
198 |                         liEl.classList.add('nav-item-hidden');
199 |                         if (!document.getElementById('drop-menu-item-' + index)) {
200 |                             var dropLi = self.append(dotsMenuDrop, self.createElement('li', {
201 |                                 id: 'drop-menu-item-' + index,
202 |                                 className: liEl.className,
203 |                                 innerHTML: liEl.innerHTML
204 |                             }));
205 |                             dropLi.classList.remove('nav-item-hidden');
206 |                             dropLi.classList.remove('nav-item-parent');
207 |                             dropLi.querySelectorAll('li.nav-item').forEach(function(el) {
208 |                                 el.classList.remove('nav-item-parent');
209 |                             });
210 |                         }
211 |                         dropCount++;
212 |                     } else {
213 |                         visibleNumber++;
214 |                         liEl.classList.remove('nav-item-hidden');
215 |                         var dropItem = document.getElementById('drop-menu-item-' + index);
216 |                         if (dropItem) {
217 |                             self.removeEl(dropItem);
218 |                         }
219 |                     }
220 |                     liEl.classList.remove('drop-right');
221 |                     posLeft += elRect.width;
222 |                 });
223 | 
224 |                 if (visibleNumber > 1) {
225 |                     liFirstlevelArr[visibleNumber - 1].classList.add('drop-right');
226 |                 }
227 | 
228 |                 if (dropCount > 0) {
229 |                     self.updateMenuParentClass([dotsMenu]);
230 |                     dotsMenu.style.display ='block';
231 |                 } else {
232 |                     dotsMenu.style.display ='none';
233 |                 }
234 |             });
235 |         };
236 | 
237 |         /**
238 |          * On document ready
239 |          * @param fn
240 |          */
241 |         this.onReady = function (fn) {
242 |             if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading'){
243 |                 fn();
244 |             } else {
245 |                 document.addEventListener('DOMContentLoaded', fn);
246 |             }
247 |         };
248 | 
249 |         /**
250 |          * Extend object
251 |          * @param obj
252 |          * @param props
253 |          */
254 |         this.extend = function (obj, props) {
255 |             for (var prop in props) {
256 |                 if (props.hasOwnProperty(prop)) {
257 |                     obj[prop] = props[prop];
258 |                 }
259 |             }
260 |             return obj;
261 |         };
262 | 
263 |         /**
264 |          * Set styles
265 |          * @param el
266 |          * @param styles
267 |          */
268 |         this.css = function (el, styles) {
269 |             this.forEachObj(styles, function (key, val) {
270 |                 el.style[key] = val;
271 |             });
272 |         };
273 | 
274 |         /**
275 |          * Remove HTML element
276 |          * @param {HTMLElement} el
277 |          */
278 |         this.removeEl = function (el) {
279 |             el.parentNode.removeChild(el);
280 |         };
281 | 
282 |         /**
283 |          * Create element from properties object
284 |          * @param tagName
285 |          * @param attributes
286 |          * @param css
287 |          * @returns {Element}
288 |          */
289 |         this.createElement = function (tagName, attributes, css) {
290 |             var el = document.createElement(tagName);
291 |             if (attributes) {
292 |                 this.forEachObj(attributes, function (key, val) {
293 |                     if (val !== null) {
294 |                         if (['className', 'innerHTML', 'outerHTML', 'innerText'].indexOf(key) > -1) {
295 |                             el[key] = val;
296 |                         } else {
297 |                             el.setAttribute(key, val);
298 |                         }
299 |                     }
300 |                 });
301 |             }
302 |             if (css) {
303 |                 this.forEachObj(css, function (key, val) {
304 |                     el.style[key] = val;
305 |                 });
306 |             }
307 |             return el;
308 |         };
309 | 
310 |         /**
311 |          * Append child element
312 |          * @param selector
313 |          * @param element
314 |          * @param prepend
315 |          * @returns {*}
316 |          */
317 |         this.append = function (selector, element, prepend) {
318 |             prepend = prepend || false;
319 |             var parents = typeof selector === 'string'
320 |                 ? document.querySelectorAll(selector)
321 |                 : [selector];
322 |             Array.prototype.forEach.call(Object.keys(parents), function (key) {
323 |                 if (typeof parents[key] === 'object') {
324 |                     if (prepend) {
325 |                         parents[key].insertBefore(element, parents[key].firstChild);
326 |                     } else {
327 |                         parents[key].appendChild(element);
328 |                     }
329 |                 }
330 |             });
331 |             return element;
332 |         };
333 | 
334 |         /**
335 |          * For each object
336 |          * @param obj
337 |          * @param callback
338 |          * @returns {*}
339 |          */
340 |         this.forEachObj = function (obj, callback) {
341 |             for (var prop in obj) {
342 |                 if (obj.hasOwnProperty(prop)) {
343 |                     callback(prop, obj[prop]);
344 |                 }
345 |             }
346 |             return obj;
347 |         };
348 | 
349 |         this.init();
350 |     }
351 | 
352 | }));
353 | 


--------------------------------------------------------------------------------