Comment concevoir un menu de site web
Options de conception des menus, personnalisation, conseils et exemples
Découvrez 7 modèles de menus de sites web, apprenez à les personnaliser et découvrez comment les utiliser.
Ce guide se concentre sur la conception du menu, c'est-à-dire sur son aspect et son fonctionnement. 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 :
Le menu de navigation est une liste de liens qui mènent à différentes pages de votre site web ou à des sections spécifiques d'une page web particulière. Il aide les visiteurs du site web à naviguer entre les pages du site ou entre les différentes sections d'une page spécifique.
Conseils généraux
>
Le menu doit aider les visiteurs du site à trouver l'information rapidement et facilement.
>
Le menu doit être concis
>
Réduire au minimum le nombre d'éléments du menu
>
Ne pas ajouter plus de cinq éléments de menu à une barre de navigation
>
Les menus ne doivent pas comporter plus d'un mot.
>
Il est préférable que ce mot soit court
>
Ne surchargez pas la barre de navigation du menu car elle ne doit pas distraire l'utilisateur du contenu de votre site web.
Exemples de bons menus
OPTIONS DE CONCEPTION DU MENU
Menu statique transparent sur la couverture
À quoi cela ressemble-t-il ?
Ce type de 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 en cas de besoin car il est fixé à un endroit spécifique de la page.
Ce type de 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 en cas de besoin car il est fixé à un endroit spécifique de la page.
Comment le mettre en place:
Ajoutez un bloc ME301 à la page et appliquez les paramètres suivants :
Paramètres principaux → Comportement de la position du menu : Absolu.
Arrière-plan du menu → Opacité de l'arrière-plan du menu : 0%.
Ajoutez un bloc ME301 à la page et appliquez les paramètres suivants :
Paramètres principaux → Comportement de la position du menu : Absolu.
Arrière-plan du menu → Opacité de l'arrière-plan du menu : 0%.
Cliquez ici pour voir un exemple de menu statique transparent sur le site web
OPTIONS DE CONCEPTION DU MENU
Menu fixe
À quoi cela ressemble-t-il ?
Ce type de menu est toujours visible sur la page et est facilement accessible à partir de n'importe quel endroit de la page. Il présente généralement un arrière-plan transparent en haut de la page (sur la couverture) qui devient opaque lors du défilement.
Ce type de menu est toujours visible sur la page et est facilement accessible à partir de n'importe quel endroit de la page. Il présente généralement un arrière-plan transparent en haut de la page (sur la couverture) qui devient opaque lors du défilement.
Comment le mettre en place :
Ajoutez un bloc ME301 à la page et appliquez les paramètres suivants :
Paramètres principaux → Comportement de la position du menu : Fixed on scroll.
Menu background → Menu background color. Choisissezune couleur.
Menu background → Opacité de l'arrière-plan du menu : 0%.
Menu background → Opacité de l'arrière-plan du menu lors du défilement : 80%.
Ajoutez un bloc ME301 à la page et appliquez les paramètres suivants :
Paramètres principaux → Comportement de la position du menu : Fixed on scroll.
Menu background → Menu background color. Choisissezune couleur.
Menu background → Opacité de l'arrière-plan du menu : 0%.
Menu background → Opacité de l'arrière-plan du menu lors du défilement : 80%.
Cliquez ici pour voir un exemple de menu fixe sur le site web
OPTIONS DE CONCEPTION DU MENU
Menu fixé en haut de la page,
Menu apparaissant lors du défilement de la page
Menu apparaissant lors du défilement de la page
À quoi cela ressemble-t-il ?
Ce menu est similaire à celui décrit ci-dessus. Ce qui le différencie, c'est qu'un autre menu apparaît lors du défilement et qu'il comporte 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 du site web et quelques liens vers des médias sociaux. Lorsque l'utilisateur fait défiler la page, une autre barre de menu apparaît, avec un logo, un appel à l'action et un bouton de rappel.
Ce menu est similaire à celui décrit ci-dessus. Ce qui le différencie, c'est qu'un autre menu apparaît lors du défilement et qu'il comporte 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 du site web et quelques liens vers des médias sociaux. Lorsque l'utilisateur fait défiler la page, une autre barre de menu apparaît, avec un logo, un appel à l'action et un bouton de rappel.
Comment l'installer :
Ajoutez un bloc ME301 à la page et appliquez les paramètres suivants :
Menu One (situé en haut de la page)
Main settings → Menu position behavior : Absolu.
Arrière-plan du menu → Opacité de l'arrière-plan du menu : 0%.
Menu Deux (apparaissant lors du défilement)
Paramètres principaux → Comportement de la position du menu : Fixed on scroll.
Main settings → Reveal menu when the page is scroll down in pixels : 600px.
Fond du menu → Couleur du fond du menu. Choisissez une couleur.
Menu background → Opacité de l'arrière-plan du menu : 70%.
Ajoutez un bloc ME301 à la page et appliquez les paramètres suivants :
Menu One (situé en haut de la page)
Main settings → Menu position behavior : Absolu.
Arrière-plan du menu → Opacité de l'arrière-plan du menu : 0%.
Menu Deux (apparaissant lors du défilement)
Paramètres principaux → Comportement de la position du menu : Fixed on scroll.
Main settings → Reveal menu when the page is scroll down in pixels : 600px.
Fond du menu → Couleur du fond du menu. Choisissez une couleur.
Menu background → Opacité de l'arrière-plan du menu : 70%.
Cliquez ici pour voir les exemples de ces menus sur un site web
OPTIONS DE CONCEPTION DU MENU
Menu hamburger
À quoi cela ressemble-t-il ?
Le menu hamburger se compose de 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 à quoi il peut servir :
Ce type de menu convient parfaitement à votre site web si vous souhaitez 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 paramétrer l'affichage du menu sur différents appareils.
Par exemple, vous pouvez opter pour un menu normal qui n'apparaîtra que sur la version de bureau de votre site web et faire en sorte que le menu hamburger ne soit visible que sur les appareils mobiles.
Le menu hamburger se compose de 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 à quoi il peut servir :
Ce type de menu convient parfaitement à votre site web si vous souhaitez 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 paramétrer l'affichage du menu sur différents appareils.
Par exemple, vous pouvez opter pour un menu normal qui n'apparaîtra que sur la version de bureau de votre site web et faire en sorte que le menu hamburger ne soit visible que sur les appareils mobiles.
Comment l'installer :
Ajoutez un bloc ME401/402/403/404/405 à la page, configurez le comportement de la position du menu, la couleur de l'icône du 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 la position du menu : Fixe lors du défilement.
Élément de menu → Couleur. Choisissez le noir.
Arrière-plan du menu → Couleur de l'arrière-plan du menu réduit. Le rendre transparent.
Menu background → Expanded menu background color (couleur d'arrière-plan du menu développé) . Choisissez le blanc.
Ajoutez un bloc ME401/402/403/404/405 à la page, configurez le comportement de la position du menu, la couleur de l'icône du 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 la position du menu : Fixe lors du défilement.
Élément de menu → Couleur. Choisissez le noir.
Arrière-plan du menu → Couleur de l'arrière-plan du menu réduit. Le rendre transparent.
Menu background → Expanded menu background color (couleur d'arrière-plan du menu développé) . Choisissez le blanc.
Cliquez ici pour voir un exemple de menu de hamburger sur le site web
OPTIONS DE CONCEPTION DU MENU
Menu à plusieurs niveaux
À quoi cela ressemble-t-il ?
Un menu déroulant apparaît lorsque vous cliquez sur un élément de menu.
Ce pour quoi vous pouvez l'utiliser :
Grands sites web avec une structure avancée.
Un menu déroulant apparaît lorsque vous cliquez sur un élément de menu.
Ce pour quoi vous pouvez l'utiliser :
Grands sites web avec une structure avancée.
Comment l'installer :
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, saisissez 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 du menu principal lui-même ne sera pas cliquable. Si vous souhaitez le rendre cliquable, créez un sous-élément dupliqué dans le menu déroulant.
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, saisissez 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 du menu principal lui-même ne sera pas cliquable. Si vous souhaitez le rendre cliquable, créez un sous-élément dupliqué dans le menu déroulant.
Cliquez ici pour voir un exemple de menu à plusieurs niveaux sur le site web
OPTIONS DE CONCEPTION DU MENU
Onglets
À quoi cela ressemble-t-il ?
Un onglet actif permet aux utilisateurs de parcourir le contenu qui lui est lié sans quitter la page web.
Utilisation possible :
Les onglets permettent d'afficher plusieurs catégories d'un même type de contenu, par exemple différentes catégories d'œuvres dans un portfolio.
Un onglet actif permet aux utilisateurs de parcourir le contenu qui lui est lié sans quitter la page web.
Utilisation possible :
Les onglets permettent d'afficher plusieurs catégories d'un même type de contenu, par exemple différentes catégories d'œuvres dans un portfolio.
Comment l'installer :
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.
Fonctionnement :
1. Ajoutez des titres d'onglets dans le panneau Contenu du bloc ME602 ou ME603.
2. Ajoutez les ID des blocs qui doivent être visibles lorsque vous cliquez sur l'onglet (séparez-les par une virgule, sans espace).
Remarque : vous pouvez copier l'ID du bloc dans le panneau Paramètres du bloc - faites défiler jusqu'au bas du panneau pour le trouver.
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.
Fonctionnement :
1. Ajoutez des titres d'onglets dans le panneau Contenu du bloc ME602 ou ME603.
2. Ajoutez les ID des blocs qui doivent être visibles lorsque vous cliquez sur l'onglet (séparez-les par une virgule, sans espace).
Remarque : vous pouvez copier l'ID du bloc dans le panneau Paramètres du bloc - faites défiler jusqu'au bas du panneau pour le trouver.
Cliquez ici pour voir un exemple de ce menu sur le site web
OPTIONS DE CONCEPTION DU MENU
Menu avec panier, recherche et favoris
À quoi cela ressemble-t-il ?
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 peut-il servir ?
Le menu est utile pour le Catalogue de produits pour afficher le panier d'achat, le widget de recherche du site web et les favoris de manière concise.
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 peut-il servir ?
Le menu est utile pour le Catalogue de produits pour afficher le panier d'achat, le widget de recherche du 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 des widgets natifs" pour n'afficher les icônes que dans le menu.
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 des widgets natifs" pour n'afficher les icônes que dans le menu.
Ajoutez ensuite le bloc panier d'achat ST100, le bloc widget de recherche T985 et le bloc Favoris ST110 et publiez la page.
Terminé.
Cette fonction fonctionne pour tous les blocs de menu numérotés ME4XX.
Cette fonction fonctionne pour tous les blocs de menu numérotés ME4XX.
Cliquez ici pour voir un exemple de ce menu sur le site web
Options d'affichage :
Si vous souhaitez afficher les icônes et le bouton du widget Favoris dans le menu, décochez la case "Don't show native widget buttons" dans l'onglet Content du bloc ME401.
Si vous souhaitez afficher les icônes et le bouton du widget Favoris dans le menu, décochez la case "Don't show native widget buttons" dans l'onglet Content du bloc ME401.
Vous pouvez masquer l'icône du widget pour les blocs ST100 Panier d'achat et T985 Recherche - dans l'onglet "Plus de paramètres" du bloc Paramètres, cochez la case "Ne pas afficher le bouton du widget". Publier la page.
C'est 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 d'achat ou du widget de recherche de la même manière.
Cliquez ici pour voir un exemple de ce menu sur le site web
Voici quelques options clés pour la conception des menus. Si vous avez de nouvelles idées et souhaitez les partager, veuillez envoyer le lien vers votre site web à team@tilda.cc en indiquant "Conception de menu" dans l'objet du message. Merci !
Bonne chance pour vos expériences de conception !
Bonne chance pour vos expériences de conception !
Le site web dont vous rêvez commence ici.
