smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-27 06:40:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: styling for dropdown

Browse source
This commit is contained in:
Mike 2024-01-09 14:13:03 -05:00
parent 700adae40c
commit 2aa9a437d1
3 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
dynamicProgrammingExamples/src/components/dropDown.js
View file

@ -37,10 +37,13 @@ class DropDown {
this.dropdownItems.style.fontSize = '18px'; this.dropdownItems.style.fontSize = '18px';
this.dropdownItems.style.position = 'absolute'; this.dropdownItems.style.position = 'absolute';
this.dropdownItems.style.top = '100px'; this.dropdownItems.style.top = '100px';
this.dropdownItems.style.background = '#E8E8E8'; this.dropdownItems.style.background = '#FFF';
this.dropdownItems.style.width = '100%'; this.dropdownItems.style.width = '100%';
this.dropdownItems.style.alignItems = 'center'; this.dropdownItems.style.alignItems = 'center';
// this.dropdownItems.style.padding = '15px'; this.dropdownItems.style.border = '1px solid black';
this.dropdownItems.style.color = 'black';
this.dropdownItems.style.boxSizing = 'border-box';
this.menu.forEach(e => { this.menu.forEach(e => {
const a = document.createElement('a'); const a = document.createElement('a');
@ -48,14 +51,16 @@ class DropDown {
a.textContent = e; a.textContent = e;
a.style.textDecoration = 'none'; a.style.textDecoration = 'none';
a.style.display = 'inline-block'; a.style.display = 'inline-block';
a.style.width = '100%'; a.style.width = 'calc(100% - 10px)';
a.style.textAlign = 'center'; a.style.textAlign = 'center';
a.style.padding = '5px'; a.style.padding = '5px';
// a.addEventListener('mouseover', () => { a.addEventListener('mouseover', () => {
// a.style.background = '#E8E8E8' a.style.background = '#E8E8E8';
// }) // a.style.background = 'black'
});
a.addEventListener('mouseleave', () => a.style.background = '#FFF');
this.dropdownItems.appendChild(a) this.dropdownItems.appendChild(a)
}) })
} }

1
dynamicProgrammingExamples/src/index.js
View file

@ -1,4 +1,5 @@
import { DropDown } from "./components/dropDown"; import { DropDown } from "./components/dropDown";
import './style.css';
const dropdown = new DropDown(['main', 'about', 'store', 'blog']); const dropdown = new DropDown(['main', 'about', 'store', 'blog']);

7
dynamicProgrammingExamples/src/style.css Normal file
View file

@ -0,0 +1,7 @@
a {
color: black;
}
a:hover {
color: black;
}