Green World
En side om Milj√ł, Elektronikk, Programmering og litt til
Elektronisk infrastruktur Raspberry PI Informasjonsteknologi Matematikk
Elektronisk infrastruktur Raspberry PI Informatikk 1
Steng X

Stor meny

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.

HTML - Kode

<!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>

CSS - Kode

.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;
}

Video av l√łsningen

En video hvor jeg forklarer l√łsningen.