Initial commit, completed project

README.md

@@ -0,0 +1,30 @@
+# odin-simple-dropdown
+
+Simple dropdown menu - click on button makes the menu appear :)
+
+My first npm package with the-odin-project :D
+
+## usage
+
+install: `npm i odin-simple-dropdown`
+
+import in your project:
+
+`import dropdownMenu from "odin-simple-dropdown"`
+
+the default style is at `./node_modules/odin-simple-dropdown/style.css` and is imported at `index.js` in the same location
+
+### syntax
+
+`dropdownMenu(btnTitle, ...elements)`
+
+### example
+
+`dropdownMenu("Dropdown!", "Home", "About", "Contact")`
+
+it returns a dom node that you can append using append/appendChild
+
+## license
+
+ISC
+

index.js

@@ -0,0 +1,28 @@
+import "./style.css"
+
+export default function dropdownMenu(btnTitle, ...elements) {
+    const dropdownMenuHTML = document.createElement("div");
+    dropdownMenuHTML.classList.add('menu');
+
+    const btn = document.createElement("button");
+    btn.setAttribute("type", "button");
+    btn.classList.add("btn-dropdown");
+    btn.textContent = btnTitle;
+    dropdownMenuHTML.append(btn);
+
+    const menuDropdownElement = document.createElement("div");
+    menuDropdownElement.classList.add("menu-dropdown", "hidden")
+
+    const ul = document.createElement("ul");
+    elements.forEach(element => {
+        let li = document.createElement("li");
+        li.textContent = element;
+        ul.append(li);
+    });
+    menuDropdownElement.append(ul);
+    
+    dropdownMenuHTML.append(menuDropdownElement);
+    btn.addEventListener("click", () => menuDropdownElement.classList.toggle('hidden'))
+
+    return dropdownMenuHTML;
+}

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "odin-simple-dropdown",
+  "version": "1.0.1",
+  "description": "Simple dropdown menu",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "dropdown",
+    "menu",
+    "simple",
+    "js",
+    "html",
+    "css",
+    "theodinproject"
+  ],
+  "author": "NetMan",
+  "license": "ISC"
+}

style.css

@@ -0,0 +1,66 @@
+.menu {
+    position: relative;
+    width: max-content;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.btn-dropdown {
+    background-color: #6b6;
+    color: #fff;
+    font-size: 1.4rem;
+    padding: 12px;
+    border-radius: 10px;
+    cursor: pointer;
+    border: 1px solid #595;
+    outline: none;
+    transition: 0.08s background-color ease-in-out;
+}
+
+.btn-dropdown:hover {
+    background-color: #7c7;
+}
+
+.btn-dropdown:active {
+    background-color: #7b7;
+}
+
+.menu-dropdown {
+    position: absolute;
+    border: 1px solid #ccc;
+    color: #666;
+    left: 0;
+    font-size: 1.2rem;
+    min-width: 90%;
+    text-align: left;
+    top: 100%;
+    box-sizing: border-box;
+    padding: 4px;
+    border-radius: 10px;
+    transition: opacity 0.2s ease-in-out;
+    z-index: 10;
+    background-color: #fff;
+}
+
+.menu-dropdown ul {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.menu-dropdown li {
+    cursor: pointer;
+    transition: 0.1s color ease-in-out;
+}
+
+.menu-dropdown li:hover {
+    color: #444;
+}
+
+.hidden {
+    transition: all 0.2s ease-in-out;
+    opacity: 0;
+    z-index: -10;
+}