diff --git a/components/Box/Box.css b/components/Box/Box.css index e69de29..bcf6e0f 100644 --- a/components/Box/Box.css +++ b/components/Box/Box.css @@ -0,0 +1,50 @@ +.Box { + display: flex; + flex-direction: row; + border: 2px solid black; +} + +.Box__DropdownBtn { + display: inline-block; + font-size: 17px; + height: 55px; + margin: 20px 0 0 21px; + border: 2px solid black; +} + +.Box__DropdownContent { + display: none; + position: absolute; + background-color: #f9f9f9; + margin: 80px 0 0 20px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; + border: 2px black solid; +} + +.Box__Links { + display: block; + background: hidden; + text-align: left; + color: black; + padding: 12px 20px 12px; +} + +.Box__Links:visited { + color: purple; +} + +.Box__Links:hover { + color: blue; +} + +.Box__Header { + margin-left: 532px; + font-size: 37px; +} + +/* Show the dropdown menu */ +.show { + display: block; +} + diff --git a/components/Section/Section.css b/components/Section/Section.css index e69de29..0103272 100644 --- a/components/Section/Section.css +++ b/components/Section/Section.css @@ -0,0 +1,11 @@ +.Box__Section { + border: 2px solid black; +} + +.Section__h2 { + margin: 12px 10px 0 15px; +} + +.Section__p { + margin-left: 15px; +} \ No newline at end of file diff --git a/index.html b/index.html index 39167c5..ceaf8d3 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,56 @@ - - - Introduction to the DOM - - - - - \ No newline at end of file + + + + Introduction to the DOM + + + + + + + + +
+ +
+ Lambda + Google + MDN +
+

Header

+
+ + + +
+
+

Placeholder

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Fusce risus nibh, gravida nec felis quis, facilisis facilisis + lectus. Nulla ac orci pretium, condimentum orci quis, accumsan + nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at + viverra risus hendrerit quis. Fusce imperdiet tristique tortor + non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin + vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique + et elit at consequat. In hac habitasse platea dictumst. +

+
+
+

Placeholder

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Fusce risus nibh, gravida nec felis quis, facilisis facilisis + lectus. Nulla ac orci pretium, condimentum orci quis, accumsan + nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at + viverra risus hendrerit quis. Fusce imperdiet tristique tortor + non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin + vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique + et elit at consequat. In hac habitasse platea dictumst. +

+
+
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..5c0b2c9 --- /dev/null +++ b/index.js @@ -0,0 +1,25 @@ +// Variables +let dropDown = document.querySelector('.Box__DropdownContent'); +let dropButton = document.querySelector('.Box__DropdownBtn'); +let childDropdown = dropDown.children; // stores a tags + +// Dropdown constructor + // classList: This property is useful to add, remove and toggle CSS classes on an element. + // toggle: Toggles between a class name for an element. + // Toggles the links from display: block to none +class Dropdown { + constructor(el) { + this.element = el; + } + showContent() { + dropDown.classList.toggle("show"); + } +} + +// Makes new Dropdown, with the method showContent(); +childDropdown = Array.from(childDropdown).map(element => { + return new Dropdown(element); +}) + +// Target = dropButton, event = 'click', listener = 'showContent()' +dropButton.addEventListener('click', childDropdown[0].showContent); diff --git a/markups/Desktop-activeDropdown.png b/markups/Desktop-activeDropdown.png index 7f93805..07adb1e 100644 Binary files a/markups/Desktop-activeDropdown.png and b/markups/Desktop-activeDropdown.png differ diff --git a/styles.css b/styles.css index 997c895..5984476 100644 --- a/styles.css +++ b/styles.css @@ -6,3 +6,5 @@ body { min-width: 300px; margin: 0; } + +