[tuto] Design - menu pour mobile/tablette
Publié : 24 févr. 2019, 00:09
Bonsoir,
Je vous propose un menu simple pour mobile ou tablette facilement adaptable à ses besoins.
Il permet de se créer un menu rapidement et de le faire évoluer facilement.
Le rendu donne ceci :
Pour l'adapter à son propre menu, il suffit de respecter les étapes suivantes :
- Copier menu.css dans /html/montheme (depuis le plugin "Outil de développement" par exemple)
- Si utilisation d'icônes perso.
-- Copier les images des icônes perso. dans /montheme/images
-- Créer la liste des icônes perso. en css /montheme/menu.css
-- Modifier les liens vers les icônes (ex : <i class="icon-design-jeedom"></i>)
- Si utilisation des icônes fontawesome standards
-- Modifier les liens vers les icônes (ex : <i class="fas fa-igloo"></i>)
(Liste des icônes disponibles ici : https://fontawesome.com/icons?d=gallery)
- Si pas d'utilisation des icônes fontawesome standards
-- Supprimer le lien vers font-awesome.min.css (pour alléger le chargement de la page)
- Dans le code HTML inséré dans le design :
-- Modifier l'arborescence du menu pour adapter le contenu à ses besoins
-- Pour chaque appel à "gotoPlan(XXX);", modifier XXX par l'identifiant de votre page Design cible.
-- Dans le mode Design, pour chaque page du menu, passer en mode édition, puis ajouter "Texte/html" puis copier/coller ce code HTML
Je n'ai pas mis les images pour chaque lien du menu pour ne pas alourdir le zip (mais elles doivent être récupérables depuis le post du menu F$B33)
Je vous propose un menu simple pour mobile ou tablette facilement adaptable à ses besoins.
Il permet de se créer un menu rapidement et de le faire évoluer facilement.
Le rendu donne ceci :
Pour l'adapter à son propre menu, il suffit de respecter les étapes suivantes :
- Copier menu.css dans /html/montheme (depuis le plugin "Outil de développement" par exemple)
- Si utilisation d'icônes perso.
-- Copier les images des icônes perso. dans /montheme/images
-- Créer la liste des icônes perso. en css /montheme/menu.css
-- Modifier les liens vers les icônes (ex : <i class="icon-design-jeedom"></i>)
- Si utilisation des icônes fontawesome standards
-- Modifier les liens vers les icônes (ex : <i class="fas fa-igloo"></i>)
(Liste des icônes disponibles ici : https://fontawesome.com/icons?d=gallery)
- Si pas d'utilisation des icônes fontawesome standards
-- Supprimer le lien vers font-awesome.min.css (pour alléger le chargement de la page)
- Dans le code HTML inséré dans le design :
-- Modifier l'arborescence du menu pour adapter le contenu à ses besoins
-- Pour chaque appel à "gotoPlan(XXX);", modifier XXX par l'identifiant de votre page Design cible.
-- Dans le mode Design, pour chaque page du menu, passer en mode édition, puis ajouter "Texte/html" puis copier/coller ce code HTML
Je n'ai pas mis les images pour chaque lien du menu pour ne pas alourdir le zip (mais elles doivent être récupérables depuis le post du menu F$B33)