Explication détaillée des étapes pour créer un menu de navigation secondaire CSS3-tutoriel HTML-php.cn

Explication détaillée des étapes pour créer un menu de navigation secondaire CSS3

php中世界最好的语言

Libérer： 2018-05-07 17:43:09

original

4497 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée des étapes pour créer un menu de navigation secondaire CSS3 Quelles sont les précautions pour créer un menu de navigation secondaire CSS3 Voici un cas pratique, prenons. un regard.

Si nous voulons réaliser la navigation secondaire de la page Web, nous pouvons utiliser la technologie JS pour afficher et masquer dynamiquement le menu secondaire. Bien sûr, nous pouvons également utiliser la technologie CSS pour y parvenir. il. Et il est recommandé d'utiliser CSS ici car il est plus efficace et plus fluide. Nous présenterons ici l'affichage dynamique et le masquage des menus secondaires.

1 Structure

Nous utilisons principalement la balise ul li pour le corps principal de la navigation générale

<body>
    <header>
        <!-- 一级导航开始 -->
        <nav>
            <ul class="menu">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">产品</a>
                    <!-- 二级导航开始 -->
                    <ul class="submenu">
                        <li><a href="#">小程序</a></li>
                        <li><a href="#">微信</a></li>
                        <li><a href="#">企业站</a></li>
                    </ul>
                    <!-- 二级导航结束 -->
                </li>
                <li>
                    <a href="#">服务</a>
                    <!-- 二级导航开始 -->
                    <ul class="submenu">
                        <li><a href="#">技术支持</a></li>
                        <li><a href="#">产品外包</a></li>
                    </ul>
                    <!-- 二级导航结束 -->
                </li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">人才招聘</a></li>
            </ul>
        </nav>
        <!-- 一级导航结束 -->
    </header>
</body>

Copier après la connexion

2 Mise en page

Disposition de navigation, car les éléments enfants doivent suivre les éléments parents, sélectionnez donc la disposition de positionnement pour le menu secondaire. Si vous souhaitez que plusieurs li soient affichés sur une seule ligne, vous devez faire flotter le li.

    body{margin: 0; font-size: 14px; color: #666}
        ul,ol{margin: 0;padding: 0; list-style: none;}
        a {text-decoration: none; color: #666;}
        /*一级导航*/
        /*背景色*/
        ul.menu,ul.submenu {
            background-color: #ededed;
        }
        /*一级导航浮动*/
        ul.menu::after {
            content: '';
            display: block;
            clear: both;
        }
        ul.menu > li {
            float: left;
            width: 120px;
            line-height: 3em;
            height: 3em;
            text-align: center;
            cursor:pointer;
        }
    
        /*二级导航项分割线*/
        ul.submenu {
            /*默认隐藏*/
            display: none;
        }
        ul.submenu > li {
            border-bottom: 1px solid #fff;
        }
        
        /*内容区*/
        .content {
            min-height: 800px;
            background-color: #fff;
        }

Copier après la connexion

3. Effets d'affichage du menu secondaire

Lorsque le curseur est placé sur la navigation, la couleur de fond de l'élément courant devient plus sombre et la couleur de la police devient plus léger.

S'il y a un menu secondaire, afficher le menu secondaire

Afin d'obtenir les deux effets spéciaux ci-dessus, nous pouvons utiliser le pseudo sélecteur de classe (:hover) pour capturer l'opération de survol du curseur. Et utilisez le sélecteur de pseudo-classe (:hover) pour sélectionner le menu secondaire correspondant au menu actuel

Cet effet spécial peut être rapidement obtenu en utilisant le CSS suivant.

        /*选中特效*/
        ul.menu > li:hover {
            background-color: #666;
        }
        ul.menu > li:hover > a {
            color: #fff;
        }
        ul.menu > li:hover > ul.submenu {
            display: block;
        }

Copier après la connexion

4. Animation

L'affichage du menu secondaire dans le code ci-dessus est instantané. Si vous pouvez fournir un effet de transition d'animation lente, cela ne pose bien sûr aucun problème. Ici, vous devez utiliser l'animation pour configurer l'animation, vous pouvez ensuite écrire les images d'animation vous-même ou demander l'aide d'une bibliothèque de codes tierce (animate.css). Ici, je vais utiliser la transparence pour obtenir cet effet de fondu

        /*动画帧*/
        @keyframes fade {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        /*基础动画样式*/
        .animated {
            animation-duration: 1s;
            animation-fill-mode: both;
        }
        .fadeIn {
            animation-name: fade;
            animation-direction: normal;
        }

Copier après la connexion

Une fois l'animation définie, vous pouvez directement référencer le style d'animation à ul.submenu. Notez que si vous utilisez animate.css, alors. les étapes ci-dessus l'omettreont et utiliseront simplement le bon style d'animation qu'il fournit.

        <!-- 二级导航开始 -->
        <ul class="submenu animated fadeIn">
            <li><a href="#">小程序</a></li>
            <li><a href="#">微信</a></li>
            <li><a href="#">企业站</a></li>
        </ul>
        <!-- 二级导航结束 -->

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Explication détaillée du développement multithread et de l'utilisation de H5+WebWorkers

CSS et media query pour réaliser la fonction de navigation Web (Code 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!