janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added a nav menu

Browse Source
This commit is contained in:
janis
2022-12-14 12:17:13 +01:00
parent 0c651e3f28
commit 7112b26d24
4 changed files with 50 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
website/css/menustyle.css Normal file
View File

@@ -0,0 +1,27 @@
.Topmenu {
width: 101vw;
padding: 0.3%;
background-color: blue;
margin-left: -1%;
margin-top: -1%;
}
.menubody {
width: 90%;
margin-top: 1.5%;
margin-left: 5%;
}
.Menu {
display: inline-flex;
justify-content: center;
align-content: center;
width: 80vw;
height: 100%;
}
.menubutton {
text-decoration: none;
background-color: none;
color: white;
}

4
website/index.html
View File

@@ -6,7 +6,8 @@
<link rel="stylesheet" href="./css/style.css">
<!--<link rel="stylesheet" href="./css/dark_hljs.css">-->
<!--I am using jquery for the fancy typing animation and button animations (plus loading of the navbar and footer)-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="./js/index.js"></script>
<!--I will be using highlight.js to highlight the syntax, but I still need to figure out how to use it.-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js" integrity="sha512-bgHRAiTjGrzHzLyKOnpFvaEpGzJet3z4tZnXGjpsCcqOnAH6VGUx9frc5bcIhKTVLEiCO6vEhNAgx5jtLUYrfA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
@@ -82,6 +83,5 @@
</div>
</div>
<div id="footer"></div>
<script>hljs.highlightAll();</script>
</body>
</html>

4
website/js/index.js Normal file
View File

@@ -0,0 +1,4 @@
$(document).ready(function () {
$('#navbar').load('nav.html')
console.log("ok")
});

17
website/nav.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/menustyle.css">
</head>
<body>
<div class="Topmenu">
<div class="menubody">
<a href="/"><img class="logo" src="../apple-touch-icon.png"></a>
<ul class="Menu">
<li class="mainitems"><a class="menubutton" id="docs" href="docs/index.html">Documentation</a></li>
<li class="mainitems"><a class="menubutton" id="download" href="download.html">Download</a></li>
</ul>
</div>
</div>
</body>