Section Menu : découvrez la puissance qui se cache derrière

Ecrit par le Vendredi 14 Novembre 2014

Section Menu : découvrez la puissance qui se cache derrière
Aujourd'hui, je voudrais prendre le temps de vous parler d'une nouvelle section que nous avons ajoutée récemment dans GoodBarber. Elle s'appelle Menu, et elle a été créée dans un seul objectif : vous donner la possibilité de créer une navigation multi-niveaux dans votre app.

9 modes de navigation

Section Menu : découvrez la puissance qui se cache derrière
Menu est une section qui s'utilise pour donner accès à d'autres sections.

Menu dispose de 9 modes de navigation différents. Nos designers ont créé quatre styles, déclinés en deux versions, et nos développeurs ont ajouté, comme c'est désormais la coutume, un mode html totalement libre pour les geeks :
- Visual / Visual color
- uneGrid / uneGrid color
- Grid / Grid color
- List / List color
- html

Mais avant de designer la section Menu, il faut au préalable y ajouter du contenu. Voyons cela immédiatement.

Sous-sections

Section Menu : découvrez la puissance qui se cache derrière
Commencez par ajouter une section Menu dans votre app, à partir du menu Contenu de votre backoffice. Menu fonctionne comme toutes les autres sections. Donnez lui un nom et positionnez là où vous le souhaitez dans votre navigation principale.

Une fois que la section Menu a été ajoutée, vous verrez dans le panel contextuel qu'il est possible d'y ajouter des sous-sections. Passez la souris sur la section Menu et cliquez sur le bouton vert pour Ajouter une section.

Vous pouvez ajouter n'importe quel type de section à l'intérieur d'une section Menu, y compris une section Menu, dans l'éventualité où vous auriez besoin d'une navigation profonde dans votre application.

Beautiful design

Section Menu : découvrez la puissance qui se cache derrière
Maintenant que vous avez ajouté des sections dans votre section Menu, voyons ce qu'il est possible de faire au niveau du design.

Allez dans Design > Avancé, et cliquez sur le nom de votre section Menu.


Dans un premier temps, vous êtes invité à choisir un mode de navigation. Voyez chaque mode de navigation comme une "porte d'entrée" vers les sous-sections de votre application. En fonction du style que vous voulez donner à cette "porte d'entrée", vous choisirez un mode de navigation dans lequel vous ajoutez votre propres images (comme dans l'exemple ci-dessus), ou bien un mode couleurs + icônes (exemple ci-dessous)

Section Menu : découvrez la puissance qui se cache derrière

Paramètres contextuels

Section Menu : découvrez la puissance qui se cache derrière
Les options de personnalisation dépendent du mode de navigation que vous avez choisi. 

Pour vous donnez une idée des nombreuses possibilités de paramétrage, prenons comme exemple l'image ci-dessus.

Dans cet exemple :
- j'ai choisi le mode de navigation Grid
- j'ai 5 sections dans mon Menu
- j'ai ajouté une image perso pour chacunes des sections
- j'ai décidé d'afficher le titre de mes sections
- j'ai mis une image en arrière plan (notez que l'image sera différente dans la version tablette de mon app)

Peut-être qu'une petite vidéo serait une bonne idée pour vous montrez plus en détails comment ça fonctionne. Qu'en pensez-vous ?



@Matthieu il n'y a pas vraiment de migration à faire pour transformer une section article avec des filtres de contenus (catégories) en une section menu.
Il faut créer une nouvelle section menu, et ensuite y ajouter autant de nouvelles sections articles, filtrées sur les contenus souhaités.

Effectivement, pour bénéficier de la nouvelle section Menu, il est nécessaire de re-compiler (re-générer) votre application, afin qu'elle tourne sous la dernière version du moteur GoodBarber.
Comme à chaque re-compilation, il faudra envoyer une mise à jour de l'app sur les stores.
http://blog.goodbarber.com
Bonjour,

Beau travail de la part de toute l'équipe. En tous cas, je suis très satisfait de l'ensemble. Continuez comme ça. Bonne continuation ;)

Cordialement,
http://www.maghrebnaute.com/
Bonsoir c'est le top vraiment !
http://sunna-magazine.com
J'ai trouvé la solution. Il faut jouer avec "afficher dedans" et ce pour chaque article.

Et de plus, pour mettre en prod' cette nouvelle feature, il faut re-générer l'appli', soit un délai d'attente de 1 semaine pour les plus chanceux...

Pas fameux tout ça !!
C'est juste parfait !

Mais comment on fait pour migrer une section de type Article avec catégories ?

J'ai vu que on peut juste changer l’arborescence.

Merci d'avance.

Entrez votre adresse email