Otevírací navigace pomocí JS

4 years ago · 5691b7dcf3
parent 72d04a0518
commit 5691b7dcf3
2 changed files with 11 additions and 1 deletions
--- a/sass/style.scss
+++ b/sass/style.scss
@ -2,6 +2,8 @@ $header-width: 1400px;

 $main-width: 720px;

+.visible { display: initial; }
+
 body {
 	min-height: 100vh;
 	margin: 0;
@ -13,6 +15,10 @@ body {
 	a { text-decoration: none; }
 }

+nav {
+	display: none;
+}
+
 header {
 	display: flex;
 	justify-content: space-between;
--- a/templates/index.html
+++ b/templates/index.html
@ -8,10 +8,11 @@
 		<link rel="icon" href="/favicon.ico" type="image/x-icon">
 	</head>
 	<body>
+		<nav id="nav">navigace</nav>
 		<header>
 			<img src="/logo.png" alt="Logo">
 			<a href="{{ config.base_url }}"><h1>{{ config.title }}</h1></a>
-			<span id="menu">Menu</span>
+			<span id="menu" onclick="togglevisible('#nav')">Menu</span>
 		</header>
 		{% block content %}
 		<main id="index">
@ -29,4 +30,7 @@
 		</main>
 		{% endblock %}
 	</body>
+	<script>
+		function togglevisible(id){document.querySelector(id).classList.toggle("visible")}
+	</script>
 </html>