Barre horizontale avec effet de survol en html5, css3 et bootstrap

Qu'avons nous besoin?

Un serveur local (je vous ai déjà dit que j'utilise Xampp)
·
UNE éditeur de code (utilisez le texte sublime 3)

Étape 1

Je vais commencer par aller dans le répertoire de mon serveur local et créer un nouveau dossier pour stocker ce projet, je vais l'appeler "menu_hover" à l'intérieur et en ajouter un autre pour contenir les fichiers css.

AGRANDIR

AGRANDIR

Étape 2

Maintenant dans notre éditeur de code nous allons commencer par ajouter une nouvelle structure html5 à laquelle j'ajouterai les feuilles de style correspondant au bootstrap à partir de leurs adresses CDN afin de ne pas occuper de place sur notre serveur, j'ajouterai également une feuille de style, appelée "style .css" qui sera stocké dans notre dossier "css" créé précédemment…
Plus tard, nous enregistrerons ce fichier sous le nom "menu.html" dans le dossier "menu_hover" créé à l'étape 1.

AGRANDIR

Étape 3

Maintenant, nous allons ajouter une étiquette à notre "menu.html" et nous allons établir comment il sera affiché à l'écran en définissant ses propriétés dans le fichier style.css …

AGRANDIR

AGRANDIR

Comme vous le verrez dans le css, j'ai ajouté une "couleur de fond: vert" c'est uniquement à des fins d'orientation pour voir la taille et la position de l'en-tête sur l'écran, vous pouvez jouer avec les tailles, la police et autres selon votre préférences … oui en ce moment nous le voyons dans notre navigateur nous aurions quelque chose comme ça …

AGRANDIR

Étape 4

Je souhaite que mon menu soit composé de 4 liens, pour y parvenir au sein du label j'en rajouterai 4Avec la classe "box_menu" pour les identifier j'ajouterai à chacun un identifiant croissant de "un" à "quatre".

AGRANDIR

Étape 5

Dans notre fichier style.css, nous ajouterons les propriétés de la classe "box_menu" et des calques "un, deux, trois et quatre".

Étape 6

Nous allons commencer par définir le comportement de la classe "box_menu" en établissant une position relative, rappelons que dans ce cas nous aurons 4 liens et que la couche qui les contient, c'est-à-dire occupe 80% de l'écran, nous allons donc besoin d'eux à 4 éléments avec la classe box_menu occupent 100% de l'espace disponible à l'intérieur, pour cela nous allons prendre 100% et le diviser par le nombre de liens ou d'éléments que nous voulons placer, car dans ce cas il y en a 4 alors ce serait 100/4 = 25, car notre classe "box_menu" devrait donc avoir une largeur de 25%. Nous allons également lui donner un arrêt à 100% et lui dire de flotter vers la gauche afin que les éléments soient vus côte à côte.

AGRANDIR

Étape 7

Plus tard, nous définirons la couleur d'arrière-plan avec laquelle nous allons afficher chacun des éléments, à l'étape 4, nous ajoutons l'identifiant de un à quatre maintenant dans notre css, nous définirons à quoi ressemblera chacun de ces calques. pour cela, nous allons faire ce qui suit …

AGRANDIR

Cela nous donnera le résultat suivant :

AGRANDIR

Comme vous pouvez le voir nous avons déjà délimité les espaces de chaque élément et sa couleur de fond, vous pouvez utiliser les codes couleurs selon vos goûts, dans ce cas car ce n'est pas un site avec un thème spécifique mais un test j'ai utilisé ces comme une démonstration …

Étape 8

Eh bien, revenons au document "menu.html" tel que nous l'avons laissé à l'étape 4, nous allons maintenant procéder à l'ajout des icônes et du texte que notre menu aura. Pour cela, nous n'allons pas utiliser d'images mais nous allons pour nous aider un peu avec le bootstrap et nous utiliserons les icônes du package "Font Awesome", pour cela nous allons dans le navigateur et accédons au web https : // fortawesome… .o / Font-Awesome / cliquez sur le "Commencer " et descendez jusqu'à la section " EASIEST: BootstrapCDN by MaxCDN ".

AGRANDIR

Je vais copier le lien CDN vers la feuille de style Font Awesome et le coller dans l'en-tête de mon document "menu.html"

AGRANDIR

Avec cela, nous pouvons maintenant utiliser les icônes Font Awesome dans notre conception, mais nous devons maintenant choisir les icônes que nous allons placer. Pour cela, nous retournons sur leur site Web et localisons le menu "Icônes".

AGRANDIR

Nous recherchons dans la longue liste l'icône qui nous intéresse et nous cliquons dessus.

AGRANDIR

Lorsque nous cliquons, cela nous amènera à une autre fenêtre dans laquelle nous pouvons voir le code pour insérer cette icône dans notre conception.

AGRANDIR

Nous le copions simplement et allons dans notre "menu.html" et le collons dans lede la manière suivante…

AGRANDIR

AGRANDIR

Nous allons également ajouter un nom en dessous qui est centré …

AGRANDIR

Voyons à quoi cela ressemble dans notre navigateur …

AGRANDIR

Nous voyons que nous avons déjà ajouté une icône et un texte centré donc nous répétons cette étape pour les 3 éléments restants.

AGRANDIR

Étape 9

Les icônes sont assez petites, je vais augmenter leur taille 3 fois, pour cela je vais ajouter une classe "fa-3x".

AGRANDIR

AGRANDIR

Étape 10

Maintenant je vais modifier un peu le fichier css pour compléter l'effet, je vais commencer par modifier la classe "box_menu" en alignant le texte au centre et en lui donnant un display = "block";

AGRANDIR

Étape 11

Plus tard, j'écrirai une classe pour contrôler à quoi ressembleront les icônes, dans laquelle je définirai qu'elles sont affichées en blanc, qu'elles ont un bord arrondi autour d'elles et qu'elles ont une animation de transition …

AGRANDIR

Étape 12

Concernant les textes sur l'étiquette

Je vais les placer en blanc et je vais réduire un peu l'opacité en ajoutant également un léger effet d'animation vers le bas.

AGRANDIR

Étape 13

Maintenant, je vais définir comment nos éléments se comporteront au survol et j'y ajouterai une petite animation pour adoucir l'effet.

AGRANDIR

Une fois cela fait, nous pouvons dire que nous avons fini de concevoir l'effet, il nous suffit maintenant d'ajouter les liens comme vous le souhaitez, je commente que cet effet peut également être utilisé pour placer des images qui ont un texte descriptif en dessous, comme Par exemple, un portfolio professionnel, une galerie ou un catalogue de produits, tout est laissé à votre imagination…
À la fin Je vous laisse un .zip avec le code sourceSi vous avez aimé ce tutoriel, laissez votre commentaire, s'il y avait quelque chose qui n'était pas clair n'hésitez pas à me demander, si vous souhaitez un tutoriel sur un sujet précis, faites le moi savoir…
J'espère que cela vous sera utile, cordialement…

Fichier avec code source… Vous avez aimé et aidé ce Tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif