Green World
En side om Infrastruktur, Programmering, Matematikk og litt til
Hjem
Elektronisk infrastruktur
Informasjonsteknologi
Matematikk
Raspberry PI

Lage menyer i HTML og CSS

Det er helt nÞdvendig Ä ha menyer pÄ Websider, slik at det er mulig Ä navigere rundt pÄ de forskjellige sidene, eller Þnsker at noe tekst eller bilde skal komme frem nÄr du tar musen over eller klikker pÄ det. Den mest vanlige mÄten Ä lage menyer pÄ er noe som kalles "Tabs" og med det kan vi lage vertikale eller horisontale menyer i alle tenkelige varianter. Jeg skal vise frem noen her.

Horisontal meny

Den horisontale menyen er helt klart den vanligste og mest brukte menyen som finnes. PÄ min side som du er inne pÄ nÄ bruker jeg det. Det er flere mÄter Ä lage en slik meny pÄ, men den enkleste er ved hjelp av en "inline-block" hvis du vil ha den pÄ venstre side.

Lage en horisontal meny med inline-block HTML-kode

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
  div.menu {
   background-color: #333;
   white-space: nowrap;
  }

  div.menu a {
   display: inline-block;
   color: white;
   text-align: center;
   padding: 14px;
   text-decoration: none;
  }

  div.menu a:hover {
   background-color: #777;
  }
 </style>
</head>
<body>

 <div class="menu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
 </div>

 <h2>Horizontal Scrollable Menu</h2>
 <p>Resize the browser window to see the effect.</p>

</body>
</html>