Menú adaptable ao móbil en Drupal 8
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:
Onde pon marchine name:main
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
