added code to highlight current page

This commit is contained in:
janis
2022-11-24 13:41:41 +01:00
parent 4b221dbf77
commit faf6d9090d
5 changed files with 23 additions and 7 deletions

View File

@@ -70,6 +70,7 @@
.dropdown:hover .dropdown-menu {
display: block;
margin: 0;
animation: rotateMenu 300ms ease-in-out forwards;
}

View File

@@ -17,7 +17,6 @@
<a class="linkbutton" href="./projects.html">Projects</a>
<br><br><br>
Note: This website is not completed yet and some pages are still missing!
</div>
Note: This website is not completed yet and some pages are still missing! The design will also change to something more appealing in the future
</body>
</html>

View File

@@ -12,4 +12,18 @@ $(document).ready(function() {
$(".textlink").mouseleave(function() {
$(this).animate({"color": "black", "font-size": "100%"}, 200)
})
setTimeout(highlightLocation, 200)
});
function highlightLocation () {
let pagename = $(location).attr('pathname')
if (pagename.slice(0, 8) == "/project") {
$('#projects').css("background-color", "darkblue")
} else if (pagename.slice(0, 6) == "/about") {
$('#about').css("background-color", "darkblue")
} else if (pagename == "/" || pagename == "/index.html") {
$('#home').css("background-color", "darkblue")
} else if (pagename == "/support.html") {
$('#support').css("background-color", "darkblue")
}
}

2
js/jquery.js vendored
View File

@@ -11,6 +11,8 @@
*
* Date: 2022-08-26T17:52Z
*/
console.log("loaded jquery");
( function( global, factory ) {
"use strict";

View File

@@ -6,9 +6,9 @@
</head>
<body>
<ul class="Menu">
<li class="mainitems"><a class="menubutton" href="/index.html">Home</a></li>
<li class="mainitems"><a class="menubutton" id="home" href="/index.html">Home</a></li>
<li class="dropdown mainitems">
<a class="menubutton" href="/projects.html">Projects</a>
<a class="menubutton" id="projects" href="/projects.html">Projects</a>
<ul class="dropdown-menu">
<li class="subitems"><a class="menubutton" href="/projects/qrinsight.html">QR & Barcode Insight</a></li>
<li class="subitems"><a class="menubutton" href="/projects/storagemanager.html">StorageManager</a></li>
@@ -18,12 +18,12 @@
</ul>
</li>
<li class="dropdown mainitems">
<a class="menubutton" href="#">About</a>
<a class="menubutton" id="about" href="#">About</a>
<ul class="dropdown-menu">
<li class="subitems"><a class="menubutton" href="/privacypolicy.html">Privacy Policy for apps</a></li>
<li class="subitems"><a class="menubutton" href="/about.html">About me</a></li>
</ul>
</li>
<li class="mainitems"><a class="menubutton" href="/support.html">Support</a></li>
<li class="mainitems"><a class="menubutton" id="support" href="/support.html">Support</a></li>
</ul>
</body>