24 Scripts Html Css Gratuits Pour La Ralisation De Superbes Menus Pour Vos Sites. : Outils-Web.Com – Guitare Classique Rue De Rome

Loto Dans Le Var Aujourd Hui
Sunday, 25 August 2024

Déc 03, 2021 Fatima Z. 3minutes de lecture L'expérience utilisateur et le temps de chargement d'un site sont des facteurs clés de votre réussite. Il est très important pour vous (et vos visiteurs) d'avoir un site web rapide. C'est pourquoi il vous est important de ne pas surcharger votre site avec du Javascript inutile. Mais alors comment faire un joli menu? Il ne vous sera pas nécessaire d'utiliser JavaScript pour ça. Aujourd'hui, on peut créer un menu déroulant en utilisant seulement HTML et CSS. Easy-Micro [ SCRIPT JAVASCRIPT - Menu déroulant ] - Formations informatiques pour entreprises. C'est ce que nous vous apprendrons dans ce tutoriel! Allons-y 😉 Ce dont vous aurez besoin Avant de créer un menu déroulant en HTML/CSS, vous aurez besoin des éléments suivants: L'accès à votre panneau de contrôle d' hébergement Étape 1 – Création d'un fichier HTML Tout d'abord, vous devez créer un fichier HTML vierge. Dans ce tutoriel, nous allons créer un nouveau fichier nommé. Nous utiliserons le Gestionnaire de fichiers (dans Hostinger) pour cela. Cependant, vous pouvez faire la même chose en utilisant un client FTP (créez le fichier directement sur votre ordinateur et envoyez le sur votre FTP).

Script Menu Déroulant Code

Étape 3 – Application de CSS et création d'un effet de déroulement Nous allons bonifier notre code HTML en utilisant les règles CSS suivantes:. boutonmenuprincipal { background-color: #e83737; color: white; border: none; cursor: pointer; padding:20px; margin-top:20px; font-size: 30px;}. boutonmenuprincipal:hover { background-color: #ff4444;}. dropdown { position: relative; display: inline-block;}. dropdown-child { display: none; background-color: #f28c8c; min-width: 50px;}. dropdown-child a { padding: 20px; text-decoration: none; display: block;}. dropdown:hover. Script menu déroulant code. dropdown-child { display: block;} Comme vous pouvez voir la classe. dropdown-child a un affichage de règle CSS: none. Cependant, dès que la souris de l'utilisateur passe sur l'élément du menu parent (. dropdown: hover) alors le contenu passe en display: block. Cela crée un effet de liste déroulante pour notre menu. Voici à quoi ressemblera votre fichier: Dans cet exemple, nous utilisons une feuille de style interne qui signifie que le CSS est placé dans le même fichier que le HTML.

-- jQuery first, then, then Bootstrap JS -->