0178 meny javascript

I en meny på en hemsida visas det oftast vilken sidan man för tillfället befinner sig på. Detta kan lösas på flera sätt med bara HTML och CSS, men olika webbsidor kan då inte ha identisk kod för menyn. Det gör att det blir svårt att klippa och klistra.

HTML- och CSS-kod för en enkel meny visas nedan. Vi befinner oss på sidan 2. Länken markeras som grön.

  <!-- html-kod -->
  <a href="sida-1.html">sida 1</a>

  <!-- class sätts till selected för att visa att vi är på denna sida -->
  <a class="selected" href="sida-2.html">sida 2</a>

  <a href="sida-3.html">sida 3</a>

  /* CSS-kod */
  .selected {
      background-color: green;
  }

Koden ovan finns i filen sida-2.html. I koden i filerna sida-1.html och sida-3.html flyttas class="selected" till respektive a-tagg. Menyn ser alltså olika ut på de olika sidorna. Genom att använda JavaScript kan man låta HTML-koden vara samma på alla sidor, men ett JavaScript lägger till koden då sidan laddas i webbläsaren.

Tekniken används på följande sida.

HTML-kod med JavaScript

Koden för sidan finns på GitHub. Här finns den som ren HTML-kod. Nedan visas den som en blandning av HTML- och PHP-kod.

PHP-version med JavaScript

Koden för sidan finns på GitHub. Koden är delvis skriven i PHP, så det är lättare att studera koden i webbläsaren på sidan i stycket ovan.

Uppgift för C - A

Gör en ny mapp 0178-flex-menu-js i mappen webbutveckling och lägg till följande filer.

  index.html
  huvudsida.html
  bilder.html
  kontakt.html
  meny.js
  style.css

Gör en meny där man kan komma mellan de olika sidorna.

Stila menyn så att den blir tjusig.

Se till att det alternativ som man håller musen över stilas annorlunda.

Se till att det visas på vilken sida man befinner sig.

Se till att HTML- och CSS-koden validerar. Lägg upp på webbhotellet. Skapa en länk från startsidan.