Maison >interface Web >js tutoriel >HTML, CSS et jQuery : créez un effet d'animation déroulant dans le menu de navigation

HTML, CSS et jQuery : créez un effet d'animation déroulant dans le menu de navigation

WBOYoriginal: 2023-10-27 15:22:441187parcourir

HTML, CSS et jQuery : créez un effet danimation déroulant dans le menu de navigation

Dans le développement Web, un effet de page attrayant peut augmenter la préférence des utilisateurs pour le site Web et améliorer l'expérience utilisateur. Parmi eux, la navigation dans les menus est l'un des éléments courants des sites Web. Nous pouvons ajouter des effets d'animation pour augmenter l'effet interactif des menus et rendre le site Web plus vivant.

Dans cet article, nous utiliserons HTML, CSS et jQuery pour créer un menu de navigation avec effet d'animation déroulant. Au cours des étapes suivantes, vous apprendrez à utiliser ces techniques pour créer un magnifique menu de navigation.

Première étape : Structure HTML

Tout d'abord, nous devons créer une structure HTML de base. À l'intérieur de la balise body, ajoutez un élément nav et définissez un élément ul avec un attribut de classe comme conteneur de menu, puis ajoutez quelques éléments li à l'intérieur comme options de menu.

<!DOCTYPE html>
<html>
<head>
    <title>导航菜单下拉动画效果</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <nav>
        <ul class="menu">
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">产品</a>
                <ul class="submenu">
                    <li><a href="#">产品1</a></li>
                    <li><a href="#">产品2</a></li>
                    <li><a href="#">产品3</a></li>
                </ul>
            </li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Étape 2 : Styles CSS

Maintenant, ajoutons des styles CSS pour définir l'apparence et les effets d'animation du menu. Tout d’abord, nous avons mis ul.menu的样式，使其具有水平排列的菜单项，并设置其子元素ul.submenu à l’état caché. Ensuite, définissez l'effet d'animation déroulante lorsque la souris survole en ajoutant le sélecteur de pseudo-classe : hover.

ul.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

ul.menu li {
    position: relative;
    padding: 10px;
    background-color: #f7f7f7;
}

ul.menu li:hover ul.submenu {
    display: block;
}

ul.menu li ul.submenu {
    display: none;
    list-style: none;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f7f7f7;
}

ul.menu li ul.submenu li {
    padding: 10px;
}

ul.menu li ul.submenu li:hover {
    background-color: #e1e1e1;
}

Étape 3 : interaction avec jQuery

Enfin, nous utilisons jQuery pour définir l'effet d'animation déroulante. En utilisant la méthode .slideToggle(), lorsque la souris survole un élément de menu, le sous-menu correspondant est développé ou réduit.

$(document).ready(function(){
    $(".menu li").hover(function(){
        $(this).find("ul.submenu").slideToggle("fast");
    });
});

Le code ci-dessus utilise la méthode .hover() de jQuery pour exécuter la fonction correspondante lorsque la souris survole l'élément .menu li. Dans la fonction, utilisez la méthode .find() pour rechercher l'élément ul.submenu correspondant et utilisez la méthode .slideToggle() pour développer ou réduire le sous-menu.

À ce stade, nous avons terminé la production de l'effet d'animation déroulant du menu de navigation. Vous pouvez modifier le style du menu en fonction de vos besoins et ajouter d'autres éléments et styles de sous-menu.

Résumé

En utilisant HTML, CSS et jQuery, nous avons créé un menu de navigation avec effet d'animation déroulant. Cet effet d'animation peut offrir aux utilisateurs une expérience interactive plus riche et améliorer la qualité et l'attrait du site Web.

Grâce à cet exemple, vous pouvez avoir une compréhension approfondie de la coopération entre HTML, CSS et jQuery, et comment utiliser ces technologies pour créer des effets de page sympas. J'espère que cet article vous sera utile dans votre apprentissage et votre pratique du développement Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery css html class 选择器伪类 ul li

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser le framework Layui pour développer une application d'analyse d'investissement prenant en charge les cotations boursières en temps réelArticle suivant：Comment utiliser le framework Layui pour développer une application d'analyse d'investissement prenant en charge les cotations boursières en temps réel

Articles Liés

Voir plus