manuth/zhaw-moba2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Solve navigation bar task

Browse source
This commit is contained in:
Manuel Thalmann 2024-03-15 10:52:34 +01:00
parent 2b54da80b1
commit 81bbfab569
2 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
Tasks/Task 01/navibar/navibar.html
View file

@ -6,6 +6,21 @@
<title>Navibar Demo</title> <title>Navibar Demo</title>
<script src="navibar.js"></script> <script src="navibar.js"></script>
<navigation-bar>
<a href="#home">
<img src="./imgs/home.png" />
</a>
<a href="#sitemap">
<img src="./imgs/map.png" />
</a>
<a href="#buy-coffee">
<img src="./imgs/coffee.png" />
</a>
<a href="#settings">
<img src="./imgs/settings.png" />
</a>
</navigation-bar>
<style> <style>
@ -23,6 +38,7 @@
navigation-bar a img { navigation-bar a img {
opacity: 0.3; opacity: 0.3;
height: 100%;
/* ... */ /* ... */
} }

7
Tasks/Task 01/navibar/navibar.js
View file

@ -6,14 +6,17 @@ class CustomNavigationBar extends HTMLElement {
<style> <style>
div.navibar { div.navibar {
align-items: center; align-items: center;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
background-color: #ccc; background-color: #ccc;
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100%;
} }
::slotted(a) { ::slotted(a) {
display: block;
text-align: center; text-align: center;
margin: 10px;
height: 10vh;
} }
</style> </style>
<div class="navibar"> <div class="navibar">