From 6d9d1624761fc131e718c8f7b90de7e7f5f7e75a Mon Sep 17 00:00:00 2001 From: igor Date: Fri, 7 Oct 2022 22:09:05 +0200 Subject: [PATCH] add action-menu --- submissions/igarok88/action-menu/index.html | 19 +++++++ submissions/igarok88/action-menu/script.js | 59 +++++++++++++++++++++ submissions/igarok88/action-menu/style.css | 42 +++++++++++++++ 3 files changed, 120 insertions(+) create mode 100644 submissions/igarok88/action-menu/index.html create mode 100644 submissions/igarok88/action-menu/script.js create mode 100644 submissions/igarok88/action-menu/style.css diff --git a/submissions/igarok88/action-menu/index.html b/submissions/igarok88/action-menu/index.html new file mode 100644 index 0000000000..5c9baa2713 --- /dev/null +++ b/submissions/igarok88/action-menu/index.html @@ -0,0 +1,19 @@ + + + + + + + + Action menu + + +
+
+
    +
    +
    +
    + + + diff --git a/submissions/igarok88/action-menu/script.js b/submissions/igarok88/action-menu/script.js new file mode 100644 index 0000000000..e68568a4ab --- /dev/null +++ b/submissions/igarok88/action-menu/script.js @@ -0,0 +1,59 @@ +const content = [ + { + title: "Головна", + content: + "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam velit cupiditate molestias. Eius eligendi repellat modi. Eveniet doloremque ducimus magni.", + }, + { + title: "Про нас", + content: + "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore ut eveniet nostrum recusandae rerum ea. Incidunt necessitatibus velit cupiditate quae possimus minus id quod quia delectus voluptatum tenetur expedita fugit maxime, impedit architecto nam iusto quas tempore! Libero reiciendis vero recusandae corrupti ex unde animi similique ipsa laboriosam voluptatem. Explicabo?", + }, + { + title: "Підтримка", + content: + "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe placeat adipisci quos sed recusandae voluptatem ea, tempore ad, similique a, excepturi tenetur necessitatibus cumque quidem perspiciatis. Quasi voluptate quo aspernatur!", + }, + { + title: "Доставка", + content: + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, et soluta reprehenderit veniam distinctio deleniti ut suscipit quod earum minus saepe unde quis voluptates? Inventore illum iste aperiam quas? Dolorem repellendus omnis corporis molestias veniam. Quibusdam temporibus quas molestias debitis.", + }, + { + title: "Гарантії", + content: + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt repudiandae officia commodi vitae laboriosam eveniet tempore debitis error recusandae ut unde temporibus, sunt corrupti maiores eaque, aliquam consequuntur accusantium. Necessitatibus adipisci excepturi dolore facere cum sunt quam libero asperiores, tempora blanditiis in aut repellendus optio id obcaecati, incidunt doloremque dicta, quas dolor quasi ratione consectetur expedita repellat? Quaerat, cum. Tempora?", + }, +]; + +const actionSidebarUl = document.querySelector(".action__sidebar ul"); + +content.forEach((item) => { + actionSidebarUl.innerHTML += `
  • ${item.title}
    • `; +}); + +const actionSidebarLi = document.querySelectorAll(".action__sidebar li"); +actionSidebarLi[0].classList.add("active"); + +const actionContent = document.querySelector(".action__content"); + +actionContent.innerHTML = ` +

    ${content[0].title}

    +

    ${content[0].content}

    + `; + +actionSidebarUl.addEventListener("click", (e) => { + actionSidebarLi.forEach((item) => { + item.classList.remove("active"); + }); + e.target.classList.add("active"); + + actionSidebarLi.forEach((item, index) => { + if (item.closest(".active")) { + actionContent.innerHTML = ` +

    ${content[index].title}

    +

    ${content[index].content}

    + `; + } + }); +}); diff --git a/submissions/igarok88/action-menu/style.css b/submissions/igarok88/action-menu/style.css new file mode 100644 index 0000000000..4113f4fdb5 --- /dev/null +++ b/submissions/igarok88/action-menu/style.css @@ -0,0 +1,42 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial; + color: white; +} +.container { + max-width: 1200px; + margin: 0 auto; +} +.action { + display: flex; +} +.action__sidebar { + background-color: rgb(48, 175, 192); + width: 300px; + height: 100vh; + padding: 15px 0; +} +.action__sidebar li { + cursor: pointer; + padding: 15px; +} +.action__sidebar li.active { + background-color: rgb(96, 95, 148); +} +.action__sidebar li:hover { + background-color: rgb(95, 148, 131); +} +.action__content { + background-color: rgb(79, 189, 154); + width: 100%; + height: 100vh; + padding: 15px; +} +.action__content h2 { + padding: 10px 0; +} +.action__content p { + padding: 10px 0; +}