Création d'un menu de navigation à l'aide d'une liste non ordonnée et CSS, BIOSTALL
De loin le plus facile, le plus propre, le plus léger et le plus flexible pour créer un menu de navigation horizontale est d'utiliser une liste non ordonnée et le style avec CSS. Je vais vous montrer, en commençant par une liste standard, comment créer un menu entièrement fonctionnel, y compris la mise en forme et la fonctionnalité.
Pour créer une liste standard non ordonnée, nous utilisons le code HTML suivant:
Cela crée une liste qui ressemble à ceci:
huh pas très attrayant ou horizontal. La première chose que nous devons faire est d'appliquer une référence / ID à la liste et de créer une base CSS pour que notre code HTML se présente maintenant comme suit:
Et notre CSS ressemble à ceci:
OK bien. Vous devriez maintenant avoir une navigation qui ressemble à quelque chose comme:
Dans ce cas, nous faisons de bons progrès. Il est maintenant horizontal et un menu de navigation dans sa forme la plus primitive. Alors qu'est-ce que nous faisons ci-dessus?
liste-style-type: aucun
L'attribut « type liste de style » vous permet de définir le type de liste à utiliser. Par défaut, il utilise la balle noir, rond, mais cela peut être modifié pour utiliser un carré ou un cercle blanc. Dans ce cas nous avons fixé à « aucun » pour que nous ayons une liste simple sans symboles.
Maintenant, nous avons un menu simple en place, permet de se déplacer sur le rendant joli et ajouter un peu de mise en forme. Je veux ajouter une couleur d'arrière-plan, ajouter un peu de rembourrage et aligner le texte correctement. Pour ce faire, notre HTML reste le même mais notre CSS pourrait ressembler à:
En conséquence de ce qui précède notre menu a maintenant une couleur d'arrière-plan, texte mis en forme et le rembourrage. J'ai aussi ajouté une classe pour changer la couleur de fond quand quelqu'un roule sur l'un de nos éléments de menu. Nous devons maintenant avoir quelque chose qui ressemble à ceci: