finished navbar

This commit is contained in:
janis
2022-11-04 12:59:44 +01:00
parent 5847297d34
commit 1a488cf029
3 changed files with 40 additions and 14 deletions

View File

@@ -1,21 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Home - janishutz.com</title> <title>About - janishutz.com</title>
<link rel="stylesheet" href="./mainstyle.css"> <link rel="stylesheet" href="./mainstyle.css">
</head> </head>
<body> <body>
<ul> <ul class="Menu">
<li><a href="#">Home</a></li> <li class="mainitems"><a href="./index.html">Home</a></li>
<li class="dropdown"> <li class="dropdown mainitems">
<a href="javascript:void(0)" class="dropbtn">Legal</a> <a href="#">Legal</a>
<div class="dropdown-content dropdown-animation"> <ul class="dropdown-menu">
<a href="./privacypolicy.html">Privacy Policy for apps</a> <li class="subitems"><a href="./privacypolicy.html">Privacy Policy for apps</a></li>
</div> </ul>
</li> </li>
<li><a href="./support.html">Support</a></li> <li class="mainitems"><a href="./support.html">Support</a></li>
<li><a href="./about.html">About me</a></li> <li class="mainitems"><a href="#">About me</a></li>
</ul> </ul>
<h1>About me</h1> <h1>About me</h1>

View File

@@ -9,15 +9,27 @@
<ul class="Menu"> <ul class="Menu">
<li class="mainitems"><a href="#">Home</a></li> <li class="mainitems"><a href="#">Home</a></li>
<li class="dropdown mainitems"> <li class="dropdown mainitems">
<a href="#">Legal</a> <a href="./projects.html">Projects</a>
<ul class="dropdown-menu">
<li class="subitems"><a href="./privacypolicy.html">QR & Barcode Insight</a></li>
<li class="subitems"><a href="./privacypolicy.html">StorageManager</a></li>
<li class="subitems"><a href="./privacypolicy.html">FSR Image & Video Upscaler Frontend</a></li>
<li class="subitems"><a href="./privacypolicy.html">MusicPlayer</a></li>
<li class="subitems"><a href="./privacypolicy.html">BiogasControllerApp</a></li>
</ul>
</li>
<li class="dropdown mainitems">
<a href="#">About</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li class="subitems"><a href="./privacypolicy.html">Privacy Policy for apps</a></li> <li class="subitems"><a href="./privacypolicy.html">Privacy Policy for apps</a></li>
<li class="mainitems"><a href="./about.html">About me</a></li>
</ul> </ul>
</li> </li>
<li class="mainitems"><a href="./support.html">Support</a></li> <li class="mainitems"><a href="./support.html">Support</a></li>
<li class="mainitems"><a href="./about.html">About me</a></li>
</ul> </ul>
<h1>Welcome to janishutz.com</h1> <h1>Welcome to janishutz.com!</h1>
<p>Learn more about my projects!</p>
<a href="./projects">Learn more</a>
</body> </body>
</html> </html>

View File

@@ -26,6 +26,8 @@ a {
} }
a:hover { a:hover {
animation-name: fadein;
animation-duration: 300ms;
background-color: darkblue; background-color: darkblue;
} }
@@ -56,9 +58,21 @@ a:hover {
} }
} }
@keyframes rotateMenu {
0% {
transform: rotateX(-90deg)
}
70% {
transform: rotateX(20deg)
}
100% {
transform: rotateX(0deg)
}
}
.dropdown:hover .dropdown-menu { .dropdown:hover .dropdown-menu {
display: block; display: block;
animation: growDown 300ms ease-in-out forwards; animation: rotateMenu 300ms ease-in-out forwards;
} }