Comment concevoir un menu de site Web

Ce guide se concentre sur la conception du menu, à quoi ressemble le menu et comment il fonctionne. Si vous souhaitez apprendre à concevoir un menu de site Web, à l’afficher sur chaque page de votre site Web ou à créer un menu de navigation pour une page Web particulière, nous vous recommandons de lire un autre guide:

À quoi cela ressemble:
Un tel menu est épinglé en haut de la page pour ne pas distraire les visiteurs du site Web du contenu, et ils peuvent facilement le trouver si nécessaire car il est fixé à un endroit spécifique de la page.

Comment le configurer :

Ajoutez un bloc ME301 à la page et appliquez les paramètres suivants :

Paramètres principaux → comportement de position du menu : Absolu.
Arrière-plan du menu → Opacité de l’arrière-plan du menu : 0 %.

À quoi cela ressemble:
Un tel menu est toujours visible sur la page et est facilement accessible depuis n’importe quel endroit de la page. Il a généralement un fond transparent en haut de la page (sur la couverture) qui devient opaque sur le défilement.

Comment le configurer :

Ajoutez un bloc ME301 à la page et appliquez les paramètres suivants :

Paramètres principaux → comportement de position du menu : Corrigé sur le défilement.
Arrière-plan du menu → Couleur d’arrière-plan du menu. Pick une couleur.
Arrière-plan du menu → Opacité de l’arrière-plan du menu : 0 %.
Arrière-plan du menu → Opacité de l’arrière-plan du menu sur le défilement: 80%.

À quoi cela ressemble:
Ce menu est similaire à celui décrit ci-dessus. Ce qui le rend différent, c’est un autre menu apparaissant sur le défilement et présentant encore plus d’éléments. Par exemple, le menu de navigation supérieur contient un logo, quelques éléments de menu menant à différentes pages de site Web et des liens vers les médias sociaux. Lorsque l’utilisateur fait défiler la page, une autre barre de menus apparaît, avec un logo, un appel à l’action et un bouton de rappel.

Comment le configurer :
Ajoutez un bloc ME301 à la page et appliquez les paramètres suivants :

Menu Un (situé en haut de la page)
Paramètres principaux → Comportement de position du menu : Absolu.
Arrière-plan du menu → Opacité de l’arrière-plan du menu : 0 %.

Menu Deux (apparaissant sur le défilement)
Paramètres principaux → Comportement de la position du menu : Corrigé lors du défilement.
Paramètres principaux → menu Révéler lorsque la page est défilée vers le bas en pixels : 600px.
Arrière-plan du menu → Couleur d’arrière-plan du menu. Choisissez une couleur.
Arrière-plan du menu → Opacité de l’arrière-plan du menu: 70%.

À quoi cela ressemble:
Le menu hamburger est constitué des trois lignes horizontales en haut de l’écran. Lorsque l’utilisateur clique dessus, il s’ouvre pour révéler un menu de navigation.

Ce que vous pouvez l’utiliser pour:
Un tel menu est parfait pour votre site Web si vous voulez que les visiteurs se concentrent sur le contenu sans être distraits par d’autres éléments de conception. Le menu hamburger est généralement utilisé dans une version mobile du site Web. Vous pouvez configurer l’affichage du menu sur différents appareils.

Par exemple, vous pouvez opter pour un menu normal qui n’apparaît que sur la version de bureau de votre site Web et rendre le menu hamburger visible uniquement sur les appareils mobiles.

Comment le configurer :
Ajoutez un bloc ME401/402/403/404/405 à la page, configurez le comportement de position du menu, la couleur de l’icône de menu et la couleur du texte de l’élément de menu.

Par exemple, vous pouvez appliquer les paramètres suivants :
Paramètres principaux → comportement de position du menu : Corrigé sur le défilement.
L’élément de menu → Couleur. Choisissez le noir.
Arrière-plan du menu → Couleur d’arrière-plan du menu réduite. Rendez-le transparent.
Arrière-plan du menu → Couleur d’arrière-plan du menu développé. Choisissez le blanc.

À quoi il ressemble:
Un menu déroulant apparaît lorsque vous cliquez sur un élément de menu.

À quoi vous pouvez l'utiliser :
Grands sites Web avec une structure avancée.

Comment le configurer :
Ajoutez le bloc ME301 à la page, configurez un menu similaire à celui décrit ci-dessus, puis ajoutez des sous-éléments dans le panneau Contenu du bloc.

1. Ouvrez le panneau Contenu du bloc → éléments de menu → Ajouter des sous-éléments.
2. Cliquez sur l’icône plus à côté d’un élément, entrez un titre de sous-élément et attribuez un lien. Répétez l’opération jusqu’à ce que tous les sous-éléments nécessaires soient ajoutés.
3. Ouvrez le panneau Paramètres du bloc → Paramètres du sous-menu. Cochez la case « Afficher l’icône du menu de deuxième niveau ».

Veuillez noter que l’élément de menu principal lui-même ne sera pas cliquable. Si vous souhaitez le rendre cliquable, créez un sous-élément en double dans le menu déroulant.

À quoi il ressemble:
Un onglet actif permet aux utilisateurs de parcourir le contenu qui y est lié sans quitter la page Web.

Pour quoi vous pouvez l’utiliser :
Les onglets permettent d'afficher plusieurs catégories du même type de contenu comme par exemple différentes catégories d'œuvres au sein d'un portfolio.

Comment le configurer :
Ajoutez un bloc ME602 ou ME603 à la page. Vous pouvez utiliser ces blocs pour créer des onglets et afficher du contenu lorsque l’utilisateur clique sur un onglet dans la même page. Ci-dessous, vous devez ajouter des blocs dans une séquence qui changera lorsque l’utilisateur cliquera sur un onglet particulier.

Comment ça marche :
1. Ajoutez des titres d’onglet dans le panneau Contenu du bloc ME602 ou ME603.
2. Ajoutez les ID des blocs qui devraient être visibles lorsque vous cliquez sur l’onglet (séparez-les par une virgule, pas d’espace).

Remarque : Vous pouvez copier l’ID du bloc dans le panneau Paramètres du bloc : faites défiler vers le bas du panneau pour le trouver.

À quoi il ressemble:
Il affiche les articles dans le panier, les articles ajoutés aux favoris et un widget de recherche dans le menu près de la section de navigation.

À quoi vous pouvez l'utiliser :
Le menu est utile pourCatalogue des produitsutilisateurs pour afficher le panier d’achat, le widget de recherche de site Web et les favoris de manière concise.

Comment le configurer :
Ajoutez le bloc ME401 à la page →onglet Contenu → Panier, Recherche et Favoris → cochez les cases pour afficher les icônes dont vous avez besoin dans le menu.

Cochez la case « Ne pas afficher les boutons de widget natifs » pour afficher les icônes uniquement dans le menu.

Ajoutez ensuite le bloc de panier d'achat ST100, le bloc de widget de recherche T985 et le bloc de favoris ST110 et publiez la page.

Fait.

Cette fonction fonctionne pour tous les blocs de menu numérotés ME4XX.

Options d’affichage :
Si vous souhaitez afficher les deux icônes et le bouton du widget Favoris dans le menu, décochez la case « Ne pas afficher les boutons de widget natifs » dans l’onglet Contenu du bloc ME401.

Vous pouvez masquer l’icône du widget pour les blocs ST100 Panier d’achat et Recherche T985 - dans l’onglet « Plus de paramètres » des paramètres du bloc, cochez la case « Ne pas afficher le bouton du widget ». Publiez la page.

Fait! Trois icônes sont affichées dans le menu et il y a un widget séparé pour les Favoris. Vous pouvez configurer la visibilité du panier ou du widget de recherche de la même manière.

Voici quelques options clés de conception de menu. Si vous avez de nouvelles idées et souhaitez les partager, veuillez envoyer le lien vers votre site Web à team@tilda.cc avec la mention « Conception du menu » dans la ligne d'objet. Merci!

Bonne chance avec vos expériences de conception !