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

@ -7,6 +7,21 @@
<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>
body {
@ -23,6 +38,7 @@
navigation-bar a img {
opacity: 0.3;
height: 100%;
/* ... */
}

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

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