HTML-koden til menuen

Herunder ser du html-koden til den menu, der går igen på alle sider i dette eksempel websted.

Der er tale om en uordnet liste, der indeholder tre indlejrede uordnede lister.

HTML-koden er ikke så interessant som det stylesheet, der formaterer listerne. Det er nelig ved hjælp af stylesheet formdeklarationer, jeg sørger for, at de rette undermenuer vises eller skjules alt efter hvilket faneblad, der er aktiveret.

Du skal i den forbindelse bemærke, at hovedmenuens listepunkter samt de indlejrede lister er forsynede med forskellige id'er og classes, som jeg skal bruge i formateringen.

Hvad der ikke fremgår af denne html-kode er, at body-markøren på hver side er forsynet med en class-attribut, med en værdi der angiver, hvilken sektion af webstedet, siden hører til. på denne side således <body class="sektion1">

<div id="menukasse">
<ul id="menu">
  <li id="nav1"><a href="index.html">Home</a>
    <ul id="subnav1">
      <li><a href="htmlkode.html">HTML-kode</a></li>
      <li><a href="csskode.html">CSS-kode</a></li>
    </ul> 
  </li>
  <li id="nav2"><a href="indre.html">Indre planeter</a>
    <ul class="sub" id="subnav2">
      <li><a href="merkur.html">Merkur</a></li>
      <li><a href="venus.html">Venus</a></li>
      <li><a href="jorden.html">Jorden</a></li>
      <li><a href="mars.html">Mars</a></li>
    </ul>
  </li>
  <li id="nav3"><a href="aster.html">Asteroiderne</a></li>
  <li id="nav4"><a href="ydre.html">Ydre planeter</a>
    <ul id="subnav4">
      <li><a href="jupiter.html">Jupiter</a></li>
      <li><a href="saturn.html">Saturn</a></li>
      <li><a href="uranus.html">Uranus</a></li>
      <li><a href="neptun.html">Neptun</a></li>
      <li><a href="pluto.html">Pluto</a></li>
    </ul>
  </li>
  <li id="nav5"><a href="kometskyen.html">Kometskyen</a></li>
  <li id="nav6"><a href="../index.php">
    Retur til artiklen</a></li>
</ul>
</div>

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct.

Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam.

Webdesign - illustreret håndbog
Webdesign med XHTML

– 2 gode bøger om webdesign
Køb dem hos forlaget Globe A/S