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 { .dropdown:hover .dropdown-menu {
display: block; display: block;
margin: 0;
animation: rotateMenu 300ms ease-in-out forwards; animation: rotateMenu 300ms ease-in-out forwards;
} }

View File

@@ -17,7 +17,6 @@
<a class="linkbutton" href="./projects.html">Projects</a> <a class="linkbutton" href="./projects.html">Projects</a>
<br><br><br> <br><br><br>
Note: This website is not completed yet and some pages are still missing! 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
</div>
</body> </body>
</html> </html>

View File

@@ -12,4 +12,18 @@ $(document).ready(function() {
$(".textlink").mouseleave(function() { $(".textlink").mouseleave(function() {
$(this).animate({"color": "black", "font-size": "100%"}, 200) $(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 * Date: 2022-08-26T17:52Z
*/ */
console.log("loaded jquery");
( function( global, factory ) { ( function( global, factory ) {
"use strict"; "use strict";

View File

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