Maison > Article > développement back-end > Comment implémenter le menu déroulant php et les colonnes à plusieurs niveaux ? (Code test réel)

Comment implémenter le menu déroulant php et les colonnes à plusieurs niveaux ? (Code test réel)

藏色散人original: 2018-08-09 14:11:054366parcourir

Dans la construction de sites Web, la barre de navigation affiche généralement une colonne déroulante. L'implémentation PHP de cette fonction n'est pas si simple et nécessite une certaine réserve de connaissances liées aux bases de données et à PHP. Cet article va donc vous présenter l'implémentation fonctionnelle du menu déroulant secondaire PHP de manière simple afin que vous puissiez le comprendre et l'apprendre.

Cette méthode simple et facile à comprendre est principalement implémentée via du code html et css. Des exemples spécifiques de code de menu déroulant php sont les suivants :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="">笔记本电脑</a>
            <ul>
                <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>
</div>
</body>
</html>

style. Le code .css est le suivant :

<style>
        *{margin:0;padding: 0;list-style: none;text-decoration: none;}
        #nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
        ul{background: #aaa}
        ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
        ul li:hover{background: #cea;}
        ul li ul li{float: none;}
        /*关键一：将二级菜单设置为display：none;*/
 ul li ul{position: absolute;top:40px;left: 0; display: none;}
        ul li ul li:hover{background: red;}
        /*关键二：在划过二级菜单从属的一级菜单时，设置为display:block;*/
 ul li:hover ul{display: block;}
    </style>

Comment implémenter le menu déroulant php et les colonnes à plusieurs niveaux ? (Code test réel)

Cet article présente principalement comment implémenter le menu déroulant secondaire PHP d'une manière simple. J'espère qu'il sera utile. à des amis dans le besoin.

[Recommandations de contenu associé]

Barre de navigation de développement PHP menu déroulant secondaire code complet

Barre de navigation de développement PHP liste déroulante secondaire- page HTML du menu déroulant

Comment lire la base de données avec le menu déroulant php

php et jQuery réalisent l'effet d'affichage des trois- menu déroulant de la barre de navigation de niveau

Développement PHP Barre de navigation menu déroulant secondaire Style CSS

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!

php jquery css html 数据库

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：Pourquoi les variables globales sont-elles invalides ou erronées ?Article suivant：Pourquoi les variables globales sont-elles invalides ou erronées ?

Articles Liés

Voir plus