Comment concevoir un menu de site web

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 :

À 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.

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%.

À 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.

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%.

À 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.

Comment l'installer :
Ajoutez deux blocs 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 after scrolling N pixels
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%.

À 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.

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, la couleur d'arrière-plan du menu et la couleur d'arrière-plan des éléments du menu.

Par exemple, vous pouvez appliquer les paramètres suivants :
Paramètres principaux → Comportement de la position du menu : Fixe lors du défilement.
Icône de menu → Couleur. Choisissez le noir.
Arrière-plan du menu → Couleur de l'arrière-plan du menu réduit. Le rendre transparent.
Arrière-plan du menu → Couleur de l'arrière-plan du menu développé . Choisissez le blanc.

Comment le mettre en place :

Ajoutez des éléments de sous-menu pour le bloc principal ou utilisez une combinaison de menu ME301 (ou tout autre bloc avec des éléments de menu) et ME601.

Éléments de sous-menu du bloc principal

Ajoutez n'importe quel bloc de menu contenant des éléments de menu à la page.

Allez dans l'onglet Contenu du bloc → Liste des éléments de menu → Ajouter des sous-éléments, et vous verrez les icônes plus qui apparaîtront près des éléments de menu.

Cliquez sur l'icône plus près d'un élément pour lequel vous devez ajouter un sous-élément, entrez un titre de sous-élément et attribuez un lien.

Cliquez à nouveau sur l'icône plus pour ajouter un nouveau sous-article.

Les sous-articles du menu s'affichent au survol sous la forme d'un menu déroulant. Dans les versions mobiles, vous pouvez ouvrir le menu en tapant dessus.

Important : l'élément de menu principal lui-même n'est pas cliquable. Si vous souhaitez le rendre cliquable, créez un sous-élément dupliqué dans le menu déroulant.

Bloc ME 601

Ajoutez le bloc ME301 à la page, configurez le menu comme décrit ci-dessus et ajoutez le bloc ME601 (Menu : deuxième niveau).

Le bloc ME601 vous permet d'ajouter des sous-éléments aux éléments du menu principal. Ils seront affichés au survol de la page sous la forme d'un menu déroulant. Dans les versions mobiles, vous pouvez ouvrir le menu en tapant dessus.

Comment ça marche :
1) Dans le bloc ME601, écrivez un lien qui ressemble à #submenu:more
2) Dans le menu principal : Dans le champ Lien, près de l'élément pour lequel vous voulez créer des sous-éléments, écrivez #submenu:more.

Important : l'élément du menu principal lui-même ne sera pas cliquable. Si vous souhaitez le rendre cliquable, créez un sous-article en double dans le menu déroulant.

Remarque : vous pouvez utiliser n'importe quel mot pour "#submenu:more", par exemple : #submenu:portfolio или #submenu:aboutus

À 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.

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 la page jusqu'au bas du panneau pour le trouver.

A quoi cela ressemble :
En cliquant sur le point dans le menu, vous accédez à un bloc spécifique de la page

A quoi cela peut servir :
Pour rediriger les utilisateurs vers une section spécifique de la page avec une grande quantité de contenu.

À quoi il ressemble :
Menu latéral déroulant qui contient des sections et des sous-sections. Le menu a une position fixe qui vous permet d'y accéder depuis n'importe quel endroit de la page.

À quoi il peut servir :
Il vous permet de créer une navigation détaillée pour les sections et sous-sections internes du site web, ainsi que d'ajouter une fonction de recherche pour les pages.

Comment l'installer :

Ajoutez le bloc ME901 à la page et configurez les styles d'affichage du menu à l'aide des paramètres du bloc.

Le bloc ME901 vous permet d'ajouter des sous-sections aux éléments du menu principal. Vous devez spécifier les liens vers les sous-sections dans l'onglet Contenu du bloc > Liste des éléments du menu.

En tant que lien, vous devez spécifier soit l'adresse complète de la page, y compris http://, soit l'adresse relative, c'est-à-dire le nom de la page (par exemple /page7890.html или /about).

Pour créer la navigation à l'intérieur de la page, vous pouvez utiliser des liens d'ancrage (tels que #contacts). Pour ajouter une ancre à la page, utilisez le bloc Lien d'ancrage de la catégorie Autres.

Le menu reste ouvert si la largeur de l'écran est supérieure à 1500 px.

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 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.

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.

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.

Vous pouvez créer votre propre menu dans Zero Block en configurant les éléments comme vous le souhaitez, puis en fixant le bloc.

Pour le fixer, allez dans l'édition des Paramètres du Zero Block → Position et débordement→ sélectionnez la valeur Fixe pour fixer le bloc.

Vous pouvez fixer le bloc en haut ou en bas de la page, ainsi que le configurer de manière à ce qu'il apparaisse en X px (Appear Offset). Dans ce cas, vous pouvez sélectionner une option pour l'apparence de l'animation - Fade in. Cela peut être utile, par exemple, si vous souhaitez que l'en-tête du site web apparaisse en quelques défilements et non en une seule fois.

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 !