Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add action-menu #744

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add action-menu #744

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions submissions/igarok88/action-menu/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Action menu</title>
</head>
<body>
<div class="action container">
<main class="action__sidebar">
<ul></ul>
</main>
<div class="action__content"></div>
</div>
<script src="script.js"></script>
</body>
</html>
59 changes: 59 additions & 0 deletions submissions/igarok88/action-menu/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 += `<li>${item.title}</li>`;
});

const actionSidebarLi = document.querySelectorAll(".action__sidebar li");
actionSidebarLi[0].classList.add("active");

const actionContent = document.querySelector(".action__content");

actionContent.innerHTML = `
<h2>${content[0].title}</h2>
<p>${content[0].content}</p>
`;

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 = `
<h2>${content[index].title}</h2>
<p>${content[index].content}</p>
`;
}
});
});
42 changes: 42 additions & 0 deletions submissions/igarok88/action-menu/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}