Skip to content

Commit 36988f5

Browse files
realorrealor
committed
Add drop-down menu to template.
1 parent 9208b2a commit 36988f5

6 files changed

Lines changed: 322 additions & 63 deletions

File tree

‎src/_includes/base.njk‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎src/_includes/template.njk‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>BIMROCKET | {{ title }}</title>
7+
<link rel="stylesheet" href="/css/styles.css">
8+
</head>
9+
<body>
10+
<header>
11+
<a href="/"><img src="/img/bimrocket.svg" alt="bimrocket" class="logo"></a>
12+
<nav>
13+
<button class="menu-toggle">☰</button>
14+
<ul id="menu">
15+
<li><a href="/">Home</a></li>
16+
<li class="submenu">
17+
<a href="#">Product</a>
18+
<ul>
19+
<li><a href="/features">Features</a></li>
20+
<li><a href="#">Desarrollo</a></li>
21+
<li><a href="#">Soporte</a></li>
22+
</ul>
23+
</li>
24+
<li class="submenu">
25+
<a href="#">Documentation</a>
26+
<ul>
27+
<li><a href="/install">Install</a></li>
28+
<li><a href="/configuration">Configuration</a></li>
29+
</ul>
30+
</li>
31+
<li><a href="/">Contacto</a></li>
32+
</ul>
33+
</nav>
34+
</header>
35+
36+
<div class="content">
37+
<main>
38+
<div>{{ page.url}}</div>
39+
40+
{{ content | safe }}
41+
</main>
42+
43+
<footer>
44+
<p>BIMROCKET</p>
45+
</footer>
46+
</div>
47+
48+
<script>
49+
const toggle = document.querySelector(".menu-toggle");
50+
const menu = document.getElementById("menu");
51+
52+
toggle.addEventListener("click", () =>
53+
{
54+
menu.classList.toggle("active");
55+
});
56+
57+
const content = document.querySelector(".content");
58+
content.addEventListener("click", () =>
59+
{
60+
menu.classList.remove("active");
61+
clearDrops();
62+
});
63+
64+
const links = document.querySelectorAll(".submenu > a");
65+
for (let link of links)
66+
{
67+
link.addEventListener("click", event =>
68+
{
69+
event.preventDefault();
70+
clearDrops();
71+
link.parentElement.classList.toggle("drop");
72+
});
73+
}
74+
75+
function clearDrops()
76+
{
77+
const links = [...document.querySelectorAll(".submenu.drop")];
78+
for (let link of links)
79+
{
80+
link.classList.remove("drop");
81+
}
82+
}
83+
84+
</script>
85+
</body>
86+
</html>

0 commit comments

Comments
 (0)