Le menu déroulant vertical est très pratique - il permet d'économiser de l'espace sur la page Web, tout en facilitant la navigation sur le site. Essayez de créer un menu déroulant basé sur CSS - Feuilles de style en cascade. Si vous n'êtes pas encore un expert en création de code CSS, utilisez le service purecssmenu.com. Vous devez sélectionner un type de menu, personnaliser son apparence, puis l'adapter à votre propre site. Le service lui-même générera le code nécessaire, que vous insérez ensuite dans les fichiers de votre site.
Instructions
Étape 1
Inscrivez-vous sur le site purecssmenu.com, sinon vous ne pourrez pas télécharger le menu créé. Cliquez sur le bouton Modèles sur le côté gauche de la page. Ci-dessous, vous verrez plusieurs petites fenêtres avec des modèles de menu déroulant, en cliquant sur ce qui chargera un aperçu à droite dans la fenêtre Aperçu. Choisissez un modèle qui convient à votre site
Étape 2
Personnalisez la police et la couleur du menu: utilisez l'onglet Paramètres. Dans le champ Police, sélectionnez une police, une taille de police, si nécessaire, souligné et gras. Dans le champ Couleurs, définissez l'arrière-plan du menu, la couleur de la police et les couleurs du survol de la police et de l'arrière-plan
Étape 3
Ouvrez l'onglet Éléments pour gérer les éléments de menu. Si vous cliquez sur le bouton Effacer la corbeille, les exemples d'éléments sont effacés et vous pouvez créer les vôtres. Pour ce faire, appuyez sur le bouton Ajouter un élément plus - l'élément sera ajouté à la fin du menu. Le bouton Ajouter un élément suivant est utilisé pour ajouter un élément après l'heure actuellement sélectionnée. Le bouton Ajouter un sous-élément crée un élément de sous-menu pour la sélection. Par conséquent, pour supprimer un élément, utilisez le bouton Supprimer l'élément
Étape 4
Faites attention au champ Paramètres de l'article en bas du site. Dans la ligne Texte, spécifiez le nom de l'élément de menu, dans la ligne Lien - l'url de la page vers laquelle cet élément mènera. Dans la ligne Astuce, vous pouvez laisser une description de l'article, qui s'affichera lorsque vous survolerez le lien. La ligne Cible est utilisée pour déterminer la manière d'ouvrir la page vers laquelle mène le lien. Le paramètre _self sur cette ligne ouvre la page dans la même fenêtre de navigateur que la fenêtre actuelle
Étape 5
Une fois la configuration du menu terminée, téléchargez-le - cliquez sur le bouton Télécharger en bas à droite de la page (cette fonction est disponible après inscription sur le site). Sélectionnez un dossier sur votre disque dur où le fichier d'archive sera enregistré. Déballez-le. Vous devrez copier le code requis du fichier purecssmenu.html dans le fichier modèle CSS de votre site. Ouvrez le fichier purecssmenu.html avec un éditeur de texte et copiez le code entre les balises et dans le modèle CSS de votre site (ce fichier a une extension.css et ressemble à file.css). Collez maintenant le code dans votre fichier de modèle de site (thèmes) - le code de purecssmenu.html entre les commentaires et à la place du code de menu normal. Pour ce faire, vous devez être au moins un peu familiarisé avec la programmation. Assurez-vous de coller le code dans le bon fichier et de l'enregistrer.
