Sécurité 

Menu élégant utilisant CSS. Menu CSS : menu déroulant horizontal en CSS

Bonjour, chers lecteurs de mon blog ! L'article d'aujourd'hui sera très utile pour les maquettistes débutants. Parce qu'aujourd'hui, nous allons créer un simple menu horizontal. Avant de passer directement à la mise en page, je voudrais dire quelques mots sur les raisons pour lesquelles j'ai décidé de choisir ce sujet particulier pour l'article.

En fait, tout est assez simple, alors que je réfléchissais au sujet de la prochaine leçon sur le site, j'ai commencé à me souvenir et à analyser mon expérience dans l'étude de la mise en page, ce à quoi j'ai dû faire face au stade initial de mon établissement en tant que maquettiste, ce qui m'était le plus incompréhensible en étudiant ce domaine etc. Je me suis posé toutes ces questions afin de mieux comprendre ce qui pourrait intéresser une personne qui débute sa carrière de maquettiste. Et personnellement, dès que j'ai commencé à étudier la mise en page, la plupart des questions se sont posées sur la disposition des différents menus, notamment lorsqu'il s'agit de menus à plusieurs niveaux. Et donc aujourd’hui nous allons parler du menu, et plus précisément du menu horizontal. Alors commençons !

Commençons par présenter notre menu horizontal !

Comme vous l'avez probablement deviné, la première chose que nous devons faire est de créer une page HTML avec un balisage standard et d'y connecter un fichier de style. Je ne m'attarderai pas sur cette étape en détail, car j'espère toujours que vous n'êtes pas un débutant au point de vous expliquer en détail ce que sont le corps et la tête et comment les styles sont connectés. Permettez-moi simplement de dire qu'en plus des styles de notre menu, j'écrirai la réinitialisation la plus simple dans le fichier CSS pour réinitialiser les styles et obtenir le même affichage des retraits dans tous les navigateurs. Voici à quoi ressemble ma réinitialisation la plus simple :

Nous ne dirons rien en détail sur la réinitialisation des styles, car il s'agit essentiellement d'un sujet pour un autre article. La seule chose que vous devez savoir sur le code décrit ci-dessus est que grâce à ce code, tous les éléments de page que nous allons écrire le seront. avoir la marge et les retraits réinitialisés à zéro, cela doit être fait pour que notre page soit la même dans tous les navigateurs.

Alors qu’avons-nous à ce stade ? Nous avons une page html avec un balisage standard :

Menu horizontal

Et nous avons un fichier de style connecté à cette page (pour moi c'est style.css), avec le contenu suivant :

L'étape suivante consiste à créer un balisage HTML pour notre menu.

Créer un balisage pour le menu

Dans notre balisage, nous utiliserons la nouvelle balise apparue en HTML5, j'ai décidé de vous habituer immédiatement aux nouvelles balises afin de suivre la tendance et le standard, pour ainsi dire, malgré le fait que les nouvelles balises HTML 5 ne soient pas supportées par. navigateurs plus anciens, je recommande toujours fortement de les utiliser dans votre mise en page, car tôt ou tard, vous devrez toujours y basculer, tout comme les concepteurs de mise en page sont passés à un moment donné de la mise en page tabulaire à la mise en page en blocs, c'est la réalité, il vaut mieux suivre la tendance !

Et puisque nous parlons déjà de la prise en charge des nouvelles balises HTML 5, afin que nous n'ayons pas de problèmes avec cela dans les anciens navigateurs, nous devons inclure une bibliothèque spéciale dans notre document - html5shiv. Cela se fait en insérant dans
la section head de votre page avec le code suivant :

Toutes les balises suivantes (et les autres balises liées à HTML5) seront perçues normalement par les anciens navigateurs.

Revenons directement à notre balisage. Ensuite, nous devons insérer une liste à puces dans notre balise, pour moi, cela ressemble à ceci :

  • Maison
  • À propos de nous
  • Portefeuille
  • Blogue
  • Contacts

Donc, il semble que nous en ayons fini avec le balisage, il est temps de commencer à écrire des styles, car maintenant notre menu n'a pas l'air très beau, c'est un euphémisme :

Styles d'écriture pour notre menu horizontal

Et donc, la première chose que nous devons faire lors de la création du menu est de supprimer les marqueurs de liste, nous n'en avons évidemment pas besoin, nous procédons comme ceci :

Ul( style de liste : aucun ; )

Après cela, notre menu ressemblera à ceci :

Je n'aime pas vraiment la façon dont notre menu est collé aux bords du navigateur, réparons cela :

Avec ce code, nous avons défini la largeur de notre menu, lui avons donné des marges supérieure et inférieure de 50 px et l'avons positionné au centre. Qui sait, si un élément bloc a une largeur, alors pour positionner cet élément strictement au centre il suffit de lui donner une marge externe (marge) à droite et à gauche avec la valeur auto.

L'étape suivante consiste enfin à rendre notre menu horizontal ; cela se fait en définissant les éléments ;

  • flottant:gauche

    Menu li( float:gauche; )

    L’ensemble de notre menu est désormais devenu horizontal.

    Si vous ne comprenez pas ce qui s'est exactement passé et ce que fait la propriété float, je vous recommande de rechercher des informations sur cette propriété sur Google et de l'étudier attentivement, car
    Pas une seule page de mise en page ne peut s’en passer, je peux vous le dire avec certitude. Bon, d'accord, continuons !

    Menu li a( display:block;/* Faire du lien un élément de bloc*/ padding:12px 20px;/* Définir le padding */ text-decoration: none; /* supprimer le soulignement */ color:#fff;/* définir la couleur des liens blanc */ background:#444;/* rendre la couleur d'arrière-plan sombre */ font:14px Verdana, sans-serif;/* définir la taille et le nom de la police */ )

    L’une des règles les plus importantes ici est display:block;. Le fait est que par défaut les liens sont des éléments en ligne et que les indentations sont appliquées différemment aux éléments en ligne dans différents navigateurs, il est donc conseillé de faire du lien un élément de bloc et de lui appliquer ensuite seulement les propriétés associées aux retraits externes ou internes. Maintenant, je ne veux pas vous encombrer d'informations inutiles ; au fil du temps, à l'aide d'exemples réels, vous comprendrez pourquoi une telle importance est mise ici.

    Voyons ce que nous avons obtenu, actualisez la page du navigateur et c'est parti ! :

    Comme vous pouvez le constater, ça n’a pas l’air mal, on peut dire qu’en principe, notre menu est prêt. La seule chose qu'il reste à faire est de régler la lumière des liens au survol, et il me semble que le menu sera plus beau avec des séparateurs entre les éléments.

    Commençons par les délimiteurs :

    Menu li( border-left:1px solid #666; ) .menu li:first-child( border-left:none; )

    Qu'avons-nous fait ici ? Oui, tout est très simple, nous fixons nos points (

  • ) bordure à gauche d'une taille de 1px et de couleur #666;. Quant au sélecteur .menu li:first-child, nous utilisons ici une pseudo-classe spéciale qui nous permet de sélectionner le premier élément enfant de la liste. Je recommande également de lire plus en détail sur les pseudo-classes sur Internet, vous apprendrez beaucoup de choses utiles.

    Voyons à nouveau ce que nous avons obtenu :

    À mon avis, c'est bien mieux avec des délimiteurs.

    Menu li a:hover( background:#888; )

    Encore une fois en utilisant une pseudo-classe spéciale, cette fois en survolant, nous définissons la couleur du lien lorsque nous le survolons, regardez :

    Je pense que c'est cool :) J'espère que vous vous retrouverez avec le même menu que le mien.

    C'est ici que je terminerai cette leçon, j'espère vraiment qu'elle vous a été utile et maintenant vous savez comment mettre en page un menu horizontal simple en utilisant du HTML et du CSS purs. Bien sûr, nous avons créé un menu à un niveau ; ce sera un peu plus compliqué avec un menu à deux niveaux (avec une liste imbriquée), mais c'est un sujet pour une autre leçon, c'est tout pour moi. Revenez, je serai heureux !!!

    Bonne journée à tous ceux qui lisent actuellement cette publication. Aujourd'hui, je veux vous parler de l'un des outils de création de sites Web dont aucune ressource Web ne peut se passer. Il s'agit du menu du site, ou comme on dit aussi du plan du site. Il existe aujourd'hui un nombre illimité de types et sous-types de menus.

    Les développeurs de boutiques en ligne, de blogs, de services éducatifs et d'autres ressources expérimentent et créent de plus en plus de cartes nouvelles et inhabituelles. Après avoir lu l'article, vous apprendrez en quels groupes principaux sont divisés tous les types de panneaux de navigation, vous pourrez essayer chacun d'eux et apprendre également à écrire du code de menu pour un site Web HTML. Passons maintenant aux choses sérieuses !

    Outils pour créer une barre de navigation

    Il existe plusieurs façons de créer un menu en langage de balisage. Leur concept de base est d'utiliser une liste non numérotée. Ainsi, en HTML 4, qui nous est familier, les développeurs écrivent des balises sur la page

    • Des questions ?

    Signaler une faute de frappe

    Texte qui sera envoyé à nos rédacteurs :

    Envoyer