Vous cherchez à optimiser votre site pour les mobiles et vous n'êtes pas convaincu par le menu façon Bootstrap ? Nous vous proposons ici une alternative grâce à UIkit qui propose de créer une barre de navigation dédiée sur support mobile...
UIkit, le framework CSS qui monte
L'utilisation de frameworks CSS est devenue une étape obligatoire dans la création de site internet, tant ils permettent d'accélérer les mises en page et la compatibilité entre les navigateurs. L'un d'entre eux, uikit est notamment utilisé par Yootheme pour concevoir ses produits.
Pour ceux d'entre vous qui connaissent Bootstrap, le principe est le même : un support CSS & Javascript permettant de créer rapidement des mises en page de qualité et couvrant la plupart des besoins actuels du web (barre de navigation, grid layout, pagination, boutons, etc).
Quelques différences subsistent entre les deux, notamment le fait que Bootstrap supporte IE8, alors que ce n'est pas le cas d'UIkit, mais si cette contrainte n'en est pas une pour vous (ou pour votre projet), alors vous avez tout intérêt à franchir le pas car UIkit propose des outils plus avancés, en particulier pour la navigation.
Barre de navigation avec UIkit
Pour permettre l'accès au menu d'un site, UIkit s'est largement inspiré des systèmes mobiles iOS et Android, et propose un menu latéral qui s'ouvre lors d'une simple pression sur l'icône à 3 traits :
Ce type de navigation est celui que l'on retrouve sur les applications mobiles Google comme YouTube ou Play Store, et il a fait ses preuves.
Intégration à Joomla
Afin de retrouver cette apparence dans Joomla, il faut que le menu soit construit avec les classes CSS d'UIkit, et pour cela on doit surcharger l'affichage par défaut, ou mieux ajouter un type de mise en page. Pour cela, il suffit de créer cette arborescence dans votre template Joomla :
/templates/[mon-template]/html/mod_menu/uikit.php
Et voici le contenu du fichier uikit.php :
<?php
/**
* uikit.php
*
* php version 5
*
* @category Joomla
* @package Joomla.Site
* @subpackage mod_menu
* @author Folcomedia
* @copyright 2014 Folcomedia
* @license http://www.opensource.org/licenses/mit-license.html MIT License
* @link http://www.folcomedia.fr
*/
defined('_JEXEC') or die;
/////////////// Menu PC / Tablette
echo '<nav class="uk-navbar" role="navigation">';
echo '<ul class="uk-navbar-nav uk-hidden-small"';
if ($params->get('tag_id') != null) {
$tag = $params->get('tag_id').'';
echo ' id="'.$tag.'"';
}
echo '>';
foreach ($list as $i => &$item) {
$class = 'item-'.$item->id;
if (in_array($item->id, $path)) {
$class .= ' uk-active';
}
elseif ($item->type == 'alias') {
$aliasToId = $item->params->get('aliasoptions');
if (count($path) > 0 && $aliasToId == $path[count($path) - 1]) {
$class .= ' uk-active';
}
}
if ($item->parent) {
$class .= ' uk-parent';
}
if ($item->shallower) {
$class .= ' last';
}
if (!empty($class)) {
$class = ' class="'.trim($class) .'"';
}
// Autres attributs
$attr = '';
if (strpos($class, 'uk-parent') !== FALSE) {
$attr = ' data-uk-dropdown';
}
echo '<li'.$class.$attr.'>';
// Render the menu item.
switch ($item->type) :
case 'separator':
case 'url':
case 'component':
case 'heading':
require JModuleHelper::getLayoutPath('mod_menu', 'default_'.$item->type);
break;
default:
require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
break;
endswitch;
// The next item is deeper.
if ($item->deeper) {
echo '<div class="uk-dropdown">';
echo '<ul class="uk-nav uk-nav-dropdown">';
}
// The next item is shallower.
elseif ($item->shallower) {
echo '</li>';
echo str_repeat('</ul></div></li>', $item->level_diff);
}
// The next item is on the same level.
else {
echo '</li>';
}
}
echo '</ul>';
echo '<a href="#uikid-'.$module->id.'" class="uk-visible-small" data-uk-offcanvas>';
echo '<span class="uk-navbar-toggle"></span> ';
echo '<span class="uk-navbar-toggle-link">'.JText::_('MENU').'</span>';
echo '</a>';
echo '</nav>';
/////////////// Menu Mobile
echo '<div id="uikid-'.$module->id.'" class="uk-offcanvas">';
echo '<div class="uk-offcanvas-bar">';
echo '<ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">';
foreach ($list as $i => &$item) {
$class = 'item-'.$item->id;
if (in_array($item->id, $path)) {
$class .= ' uk-active';
}
elseif ($item->type == 'alias') {
$aliasToId = $item->params->get('aliasoptions');
if (count($path) > 0 && $aliasToId == $path[count($path) - 1]) {
$class .= ' uk-active';
}
}
if ($item->parent) {
$class .= ' uk-parent';
}
if ($item->shallower) {
$class .= ' last';
}
if (!empty($class)) {
$class = ' class="'.trim($class) .'"';
}
// Autres attributs
$attr = '';
if (strpos($class, 'uk-parent') !== FALSE) {
$item->link = $item->flink = '#';
$attr = ' data-uk-nav';
}
echo '<li'.$class.$attr.'>';
// Render the menu item.
switch ($item->type) :
case 'separator':
case 'url':
case 'component':
case 'heading':
require JModuleHelper::getLayoutPath('mod_menu', 'default_'.$item->type);
break;
default:
require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
break;
endswitch;
// The next item is deeper.
if ($item->deeper) {
echo '<ul class="uk-nav-sub">';
}
// The next item is shallower.
elseif ($item->shallower) {
echo '</li>';
echo str_repeat('</ul></li>', $item->level_diff);
}
// The next item is on the same level.
else {
echo '</li>';
}
}
echo '</ul>';
echo '</div>';
echo '</div>';
Une fois le fichier enregistré, il faudra indiquer à Joomla d'utiliser ce type de mise en page pour l'affichage de votre menu.
Pour cela, rendez-vous en administration, dans la partie Extensions > Gestion des Modules, et cliquez sur le module responsable de l'affichage du menu.
Enfin, dans l'onglet « Paramètres avancés », modifiez le champ « Type de mise en page » pour sélectionner uikit, puis enregistrez.
Vous devriez alors obtenir un menu parfaitement responsive sur la partie publique de votre site.
N'hésitez pas à proposer des améliorations à ce script ou indiquez-nous les problèmes que vous avez pu rencontrer lors de la mise en place du menu.