Menu a tendrina (dropdown) di Bootstrap per cambiare lingua

  • 13 Ago 2014
  • Drupal 7, Bootstrap

Quando si sviluppa un sito multilingua con Drupal, automaticamente viene creato un blocco con il nome Language switcher che serve al visitatore per cambiare la lingua del sito. Questo blocco semplicemente visualizza un link per ogni lingua attiva in forma di elenco HTML.

Tra i componenti di Bootstrap si trova il menu a tendina (dropdown in inglese). Il codice HTML per l'implementazione è molto semplice:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Quindi, per implementare questo tipo di menu in Drupal, bisogna modificare il codice HTML del blocco Language switche.

Modificare il theme del blocco locale

Creare un file di nome block--locale--language.tpl.php nella cartella che soprascrive i templates predefiniti. Per un sub-theme di Bootstrap il percorso sarebbe themes/bootstrap_subtheme/theme/block/block--locale--language.tpl.php

In questo file si dovrà implementare il codice HTML di Bootstrap

<?php 
  global $language;
?>
<section id="<?php print $block_html_id; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
  <div class="dropdown">
    <a data-close-others="false" data-delay="1000" data-hover="dropdown" data-toggle="dropdown" class="dropdown-toggle" href="#">
    <span class="glyphicon glyphicon-globe"></span> <?php print $language->native; ?> <b class="caret"></b>
    </a>
<?php 
  // add bootstrap class
  $content = str_replace('<ul class="', '<ul class="dropdown-menu ', $content);
  print $content;
?>
  <div>
</section> <!-- /.block -->

Drupal - Bootstrap - Dropdown

Collegamenti esterni