Le menu vertical du site est une fonction très pratique qui permet d'économiser de l'espace et de naviguer facilement dans la ressource. Vous pouvez le faire en vous basant sur des feuilles de style CSS en cascade ou en utilisant des outils spéciaux.
Instructions
Étape 1
Ouvrez le site purecssmenu.com et enregistrez-vous dessus, sinon vous ne pourrez pas créer et télécharger le menu créé. Sur le côté gauche, trouvez le bouton Modèles et cliquez dessus. Ci-dessous, il y aura de petites fenêtres avec des modèles de menus verticaux. Cliquez dessus un par un et visualisez-les dans la fenêtre Aperçu. Choisissez le modèle qui convient le mieux à votre site.
Étape 2
Définissez la police et la couleur du menu à l'aide de l'onglet Paramètres. Vous pouvez sélectionner une police et sa taille dans le champ Police. Si nécessaire, précisez souligné/gras. Définissez l'arrière-plan (arrière-plan) du menu vertical dans le champ Couleurs, définissez la couleur de la police et la couleur d'arrière-plan au survol (fonthover / backgroundhover).
Étape 3
Accédez au menu Éléments pour gérer les éléments de menu. Cliquer sur le bouton Effacer effacera les exemples d'éléments afin que vous puissiez créer les vôtres. Il suffit de cliquer sur la touche AddItem plus pour ajouter un élément à la fin du menu. En utilisant le bouton AddNextItem, vous pouvez ajouter un élément qui suivra après l'heure actuellement sélectionnée. Le bouton AddSubitem dans le menu crée un élément imbriqué pour l'élément sélectionné. Pour supprimer une ligne, utilisez le bouton RemoveItem.
Étape 4
Ouvrez les paramètres de l'élément (ItemParameters) en bas du site. Saisissez un nom pour l'élément de menu dans la ligne Texte et son adresse Web dans Lien. La ligne Astuce est responsable de la description de l'élément, affichée lorsque le curseur survole le lien. La section Cible définit comment la page est ouverte. Avec le paramètre _self, la page peut être configurée pour s'ouvrir dans la fenêtre actuelle du navigateur.
Étape 5
Téléchargez le menu prêt à l'emploi en cliquant sur le bouton Télécharger en bas de la page. Copiez le code correspondant situé dans le fichier purecssmenu.html dans le fichier modèle CSS: au début et à la fin. Assurez-vous de coller le code correct et enregistrez le fichier.
