En side om Miljø, Elektronikk, Programmering og litt til
I denne oppgaven har jeg laget en kode som kan brukes dersom du ønsker en meny som går fra side til side. Dette kan være ønskelig når det er mange forskjellige temaer på en webside, for eksempel en butikk med mange varer, eller en blogg med mye innhold. Den går litt over det nivået som er forventet på IT1, men den er interessant og viktig.
<!DOCTYPE html><br>
<div class="meny">
<a href="index.php" style="color:black"><div class="meny_button">Hjem</div></a>
<div class="meny_button">Nyttige sider</div>
<div class="meny_links">
<div>
<h3>Oppslag</h3>
<a href="https://www.lokus.no/">Lokus</a><hr>
<a href="https://www.w3schools.com/default.asp">w3schools</a><hr>
<a href="https://stackoverflow.com/questions">stackoverflow</a><hr>
<a href="http://teledataschool.com/informasjonsteknologi/default.php">teledataschool</a><hr><br>
<h3>Software</h3>
<a href="http://www.wampserver.com/en/">wampserver</a><hr>
</div>
<div>
<h3>Skole</h3>
<a href="https://elvebakken.vgs.no/">Elvebakken</a><hr>
<a href="https://osloskolen.itslearning.com/main.aspx?TextURL=CourseCards">It's Learning</a><hr><br>
<h3>Nyheter</h3>
<a href="">NRK</a><hr>
<a href="https://www.nettavisen.no/nyheter/">Nettavisen</a><hr>
<a href="https://www.aftenposten.no/">Aftenposten</a><hr>
<a href="https://www.klassekampen.no/">Klassekampen</a><hr>
</div>
</div>
<div class="meny_button">Filmer</div>
<div class="meny_links">
<div>
<h3>FILM</h3>
<a href="favorittfilmer_show.php">Vis filmer</a>
<a href="favorittfilmer.php">Legg inn film</a>
</div>
</div>
<div class="meny_button">SQL</div>
<div class="meny_links">
<div>
<h3>Select</h3>
<a href="favorittfilmer_show.php">Vis filmer</a><hr>
<a href="../skiva/hovedside.php">Skiva</a><hr><br>
<h3>Insert</h3>
<a href="../filmklubben/hovedside.php">Filmklubben</a><hr>
<a href="favorittfilmer.php">Legg inn film</a><hr>
</div>
<div>
<h3>Oppgaver</h3>
<a href="../filmklubben/hovedside.php">Filmklubben</a><hr>
<a href="../skiva/hovedside.php">Skiva</a><hr><br>
</div>
</div>
<div class="meny_button">PHP</div>
<div class="meny_links">
<div>
<a href="kalkulator.php">Kalkulator</a>
</div>
</div>
<div class="meny_button">Prøver</div>
<div class="meny_links">
<div>
<a href="../prover/uke50/index.php">Uke 50, Insert/select</a>
<a href="../prover/uke5/index.php">Uke 5, delete/update</a>
</div>
.meny{
background-color: darkgray;
border: none;
}
.meny_button{
/*box-sizing: border-box;*/
width: 130px;
text-align: center;
font: 30px sans-serif, monocrom;
font-weight: 600;
padding: 16px 16px;
font-size: 16px;
cursor: pointer;
background-color: darkgray;
display: inline-block;
}
.meny_links{
display: none;
width: 1280px;
font: 15px sans-serif, monocrom;
font-weight: 400;
position: absolute;
z-index: 2;
background-color:snow;
padding: 20px;
cursor: pointer;
}
.meny_links a{
text-decoration: none;
color: black;
display: block;
padding: 6px 12px;
}
.meny_button:hover + .meny_links{
display: flex;
}
.meny_links:hover{
display: flex;
}
.meny_links a:hover{
margin-left: 10px;
color:darkcyan;
}
.meny_links div{
box-sizing: border-box;
padding: 30px;
width: 200px;
}
En video hvor jeg forklarer løsningen.