Maison > interface Web > tutoriel CSS > le corps du texte

Comment utiliser CSS3 pour implémenter un menu déroulant de navigation (code complet ci-joint)

坏嘻嘻
Libérer: 2018-09-26 17:54:31
original
5464 Les gens l'ont consulté

Dans la structure actuelle des pages Web, la barre de menus de navigation occupe une position très importante, car elle peut non seulement afficher des exemples, mais également vous donner l'impression la plus intuitive du contenu. Comme nous le savons tous, en HTML

    < ;li>
Le menu peut être noté, puis nous pouvons coopérer avec CSS3 pour implémenter le menu déroulant de navigation. Ce que cet article vous apporte, c'est comment utiliser CSS3 pour implémenter un menu déroulant de navigation. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le principe de l'utilisation de CSS3 pour implémenter le menu déroulant de navigation

Tout d'abord, utilisez le

  • Pour créer le menu, nous utiliserons une instruction de survol, c'est-à-dire que lorsque la souris survole une certaine zone, elle déclenchera l'affichage du menu de niveau inférieur. Know est l'attribut display. Nous utiliserons les propriétés de block et none pour afficher et masquer le menu déroulant. Ensuite, nous définirons la position de chaque menu pour déterminer l'emplacement du menu, et enfin utiliserons le sélecteur de pseudo-élément ::after pour effacer le flottant.

    Étapes pour utiliser CSS3 pour implémenter le menu déroulant de navigation

    Étape 1 : Utiliser HTML pour créer un style de menu

    <nav>
            <ul>
                <li><a href="#">导航一</a>
                    <ul>
                        <li><a href="#">二级导航</a></li>
                        <li><a href="#">二级导航</a></li>
                        <li><a href="#">二级导航</a></li>
                        <li><a href="#">二级导航</a></li>
                    </ul>
                </li>
                <li><a href="#">导航二</a></li>
                <li><a href="#">导航三</a>
                    <ul>
                        <li><a href="#">二级导航</a></li>
                        <li><a href="#">二级导航</a></li>
                        <li><a href="#">二级导航</a>
                            <ul>
                                <li><a href="#">三级导航</a></li>
                                <li><a href="#">三级导航</a></li>
                                <li><a href="#">三级导航</a></li>
                            </ul>
                        </li>
                        <li><a href="#">二级导航</a></li>
                    </ul>
                </li>
                <li><a href="#">导航四</a>
                    <ul>
                        <li><a href="#">二级导航</a></li>
                        <li><a href="#">二级导航</a></li>
                        <li><a href="#">二级导航</a></li>
                    </ul>
                </li>
                <li><a href="#">导航五</a>
                    <ul>
                        <li><a href="#">二级导航</a></li>
                        <li><a href="#">二级导航</a></li>
                    </ul> 
                </li>
                <li><a href="#">导航六</a></li>
            </ul>
        </nav>
    Copier après la connexion

    Étape 2 : Utilisez CSS3 pour implémenter un menu déroulant déclenché par le survol de la souris

    nav {
        margin:100px auto;
        text-align:center;
    }
    nav ul {
        border-radius:10px;
        background:linear-gradient(to bottom,#efefef,#bbbbbb);
        padding:0 20px;
        display:inline-table;
        position:relative;  
        box-shadow:1px 1px 3px #666;
    }
    nav ul ul {
        display:none;
    }
    nav ul li {
        float:left; 
    }
    nav ul::after {
        content:"";
        display:block;
        clear:both;
    }
    nav ul li a {
        display:block;
        padding:25px 40px;
        color:#000;
        text-decoration:none;
        font-family:"微软雅黑";
    }
    nav ul li:hover > ul {
        display:block;
    }
    nav ul li:hover {
        background:linear-gradient(to bottom,#4f5964,#5f6975);
    }
    nav ul li:hover a {
        color:#FFF;
    }
    nav ul ul {
        background:#5f6975;
        border-radius:0;
        position:absolute;
        top:100%;
        padding:0;
    }
    nav ul ul li {
        float:none;
        border-top:1px solid #6b727c;
        border-bottom:1px solid #575f6a;
    }
    nav ul ul li a {
        color:#FFF;
    }   
    nav ul ul li a:hover {
        background:#4b545f;
    }
    nav ul ul ul {
        width:100%;
        position:absolute;
        left:100%;
        top:50%;
    }
    Copier après la connexion

    Étape 3 : Embellissez-le selon les exigences du style du menu

    Le style du menu déroulant est comme indiqué sur l'image

    Comment utiliser CSS3 pour implémenter un menu déroulant de navigation (code complet ci-joint)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal