Da vi skulle lave vores nye hjemmeside i Drupal ville vi gerne have lidt farve i menuen. Det blev til de farvede linier, man kan se her til venstre.

Baggrund
En Drupal menu bliver genereret internt i Drupal og så får man hele menuen serveret til brug i sin page.tpl.php fil, f.eks. kommer Navigation menuen ud i variablen $nav.
Desværre bliver de enkelte menupunkter ikke tildelt et unikt id, så det er lidt tricky at finde hvert menupunkt. Derudover genbruges nogle af klassenavnene i undermenuerne. Ialt ser vores venstre menu således ud:

<div id="block-menu-menu-halibut" class="block block-menu">
<div class="content">
   <ul class="menu">
      <li class="expanded first even">
         <a href="/hjemmeside">Hjemmeside</a>
         <ul class="menu">
            <li class="leaf first even">
               <a href="/hjemmeside/drupal">- Drupal CMS</a>
            </li>
            <li class="leaf last odd">
               <a href="/inspiration-til-en-ny-hjemmeside">
                  - Inspiration</a>
            </li>
         </ul>
      </li>
      <li class="expanded odd">
         <a href="/drift-af-hjemmeside">Webadministration</a>
         <ul class="menu">
            <li class="leaf first odd">
               <a href="/backup-og-opdatering-af-drupal">
                  - Back-up</a>
            </li>
            <li class="leaf last even">
               <a href="/sogemaskineoptimering">- SEO</a>
            </li>
         </ul>
      </li>
      <li class="expanded last odd">
         <a href="/open-source-software-i-din-virksomhed">
            Open Source</a>
         <ul class="menu">
            <li class="leaf first last even">
               <a href="/links">- Links</a>
            </li>
         </ul>
      </li>
   </ul>
</div>
</div>

Når nu Drupal ikke kan hjælpe os, må vi jo finde på noget andet. Dette andet er JQuery. JQuery er et JavaScript bibliotek, der især indeholder funktioner til at manipulere DOM'en, dvs. diverse HTML tags. Faktisk er JQuery en del af Drupal core, men det bliver ikke inkluderet automatisk, så det skal vi først have på plads. I page.tpl.php indsættes følgende linier:

<?php
   unset($js['core']['misc/jquery.js']);
   $js = drupal_add_js('misc/jquery.js', NULL, 'header');
   print drupal_get_js('header', $js);
?>

Nogle moduler inkluderer jquery.js, f.eks. Admin Menu, så først fjerner vi eventuelle inkluderinger. Derefter inkluderer vi jquery.js filen fra Drupal core. Nu er vi sikre på at have inkluderet jquery.js en og kun en gang.

JQuery
JQuery har mulighed for at vente på at HTML delen af siden (DOM'en) er loadet ind i browser. Det gøres ved nedenstående stump kode, hvor <VORES KODE> først bliver kørt når siden er loadet.

<script type = "text/javascript">

   $(document).ready(function(){
      <VORES KODE>
   });
</script>

Nu skal vi have fat på selve Drupal menuen. Første skridt er at finde div'en med id "block-menu-menu-halibut". Under den skal vi have fat i den første ul med klassen "menu". Og under den skal vi have fat i hvert barn. I JQuery ser det således ud (bemærk: linierne er ombrudte for at lette læsningen. De skal være på en linie i koden.):

$('#block-menu-menu-halibut ul.menu:nth-child(1)').
   children().slice(0,1)

Bemærk at slice(0,1) giver det første menupunkt, slice(1,2) det andet osv.
Nu har vi fat i det første menupunkt, "Hjemmeside" og underpunkter. Den skal have en venstre ramme og det gøres med JQuery metoden css:

css("border-left", "solid 2px #f36a32");

Den komplette kode for at finde og manipulere menupunktet er:

$('#block-menu-menu-halibut ul.menu:nth-child(1)').
   children().slice(0,1).
   css("border-left", "solid 2px #f36a32");

Den komplette kode for at finde og farvelægge de tre menupunkter er:

<script type = "text/javascript">
   $(document).ready(function(){
      $('#block-menu-menu-halibut ul.menu:nth-child(1)').
         children().slice(0,1).
         css("border-left", "solid 2px #f36a32");
      $('#block-menu-menu-halibut ul.menu:nth-child(1)').
         children().slice(0,1).
         css("margin-bottom", "10px");
      $('#block-menu-menu-halibut ul.menu:nth-child(1)').
         children().slice(0,1).
         css("padding-left", "5px");

      $('#block-menu-menu-halibut ul.menu:nth-child(1)').
         children().slice(1,2).
         css("border-left", "solid 2px #003888");
      $('#block-menu-menu-halibut ul.menu:nth-child(1)').
         children().slice(1,2).
         css("margin-bottom", "10px");
      $('#block-menu-menu-halibut ul.menu:nth-child(1)').
         children().slice(1,2).
         css("padding-left", "5px");

      $('#block-menu-menu-halibut ul.menu:nth-child(1)').
         children().slice(2,3).
         css("border-left", "solid 2px #a4381f");
      $('#block-menu-menu-halibut ul.menu:nth-child(1)').
         children().slice(2,3).
         css("margin-bottom", "10px");
      $('#block-menu-menu-halibut ul.menu:nth-child(1)').
         children().slice(2,3).
         css("padding-left", "5px");
   });
</script>

Ovenstående kan så varieres i det uendelige.