Menú adaptable ao móbil en Drupal 8

mmenu.jpeg

Estes foron os pasos que dei para configurar o menú do paxina para que fose adaptable ao móbil. Como sempre, con seguridade de pode facer doutros xeitos, esta é unha máis:

1. Instalación do mógulo responsive_menu

https://www.drupal.org/project/responsive_menu

2. Instalación e activación dos módulos context e context UI

https://www.drupal.org/project/context

3. Instalación da librería mmenu

cd /var/www/html/tic/drupal/libraries
wget https://api.github.com/repos/FrDH/jQuery.mmenu/zipball
unzip zipball
mv mv FrDH-jQuery.mmenu-e5df2d3 mmenu

4. Instalación da librería hammerjs

wget https://api.github.com/repos/hammerjs/hammer.js/zipball
unzip zipball
mv hammerjs-hammer.js-563b5b1 hammerjs

5. Instalación da librería superfish

wget https://api.github.com/repos/joeldbirch/superfish/zipball
unzip
mv joeldbirch-superfish-442820e superfish

6. Activar responsive_menu

7. Comprobar que en Informes -> Informe de estado temos mmenu, hammersjs e superfish instalados.

8. No apartado de adminsitracion / responsive design, e dentro del en OFF CANVAS
Escribimos main e non Main Navigation, xa que main é o nome que lle da a máquina. Pódese observar na seguinte imaxe:

name-main.png

Onde pon marchine name:main

off-canvas.png

9. En Primary menu engadimos o bloque Responsive menu mobile icon

10. En unha páxina monoligüe, podemos activar o bloque horizontal-menu. Sen embargo, nunha páxina plurilingüe non actializa o menú cada vez que cambiamos de idioma, ao idioma desexado. Neste caso, non activamos o bloque horizontal menu, e introducimos o bloque Main Navigation. Pero a súa vez debemos de configurar con CSS a non visibilidade deste bloque no dispositivos máis pequenos, como nunha tablet ou ben nun smartphone. Engadiremos o seguinte código css:

@media screen and (min-width: 0px) and (max-width: 851px) {
 #block-mainnavigation { display: none; }  /* show it on small screens */
}

E tamén para ver a letras en cor branco

#block-mainnavigation ul li a
{ color: white; }

Non debemos de esquecer que ás veces, ao modificar o código css, debemos de valeirar a caché  para que se poida visualizar correctamente no móbil:

/admin/config/development/performance

valeirar.png