Dropdown-meny i Twitter Bootstrap

Dersom du ønsker å benytte standard dropdown-meny i Twitter Bootstrap sammen med eRedaktør, har vi et par linjer jQuery som vil hjelpe deg.

I Twitter Bootstrap (per august 2012) krever standard dropdown-meny at en har med visse klasser og html-strenger for å angi hvordan den skal se ut. Ettersom eRedaktør bare skriver ut en tilnærmet ren liste i trestruktur, får en ikke med disse klassene som standard. For å løse dette kan en legge til følgende linjer med jQuery:

// Legger til css-klasser for å generere dropdown-menyen
// av eRedaktør as, 2012

var ul = $('.navbar .nav');

if (ul.length) 
{
  //1.nivå
  ul.find('li:last-child').addClass('last');

  //2.nivå
  ul.children('li').children('ul').addClass('dropdown-menu').parent().addClass('dropdown').find('a:first').append('<b class="caret"> </b>');

  //3.nivå
  ul.children('li').children('ul').children('li').children('ul').addClass('dropdown-menu sub-menu').parent().find('a:first').append('<span class="icon-chevron-right icon-white"></span>'); ;
}

Det som skjer da, er at det legges på de klassene som kreves for nedtrekksmeny i tre nivå, der første nivå er det som vises før en holder musen over menyen (eller evt trykker på den).