css pour obtenir un effet de menu pliant à plusieurs niveaux

Cet article présente principalement du CSS pur pour réaliser l'effet d'arbre pliant du menu pliant à plusieurs niveaux. Il utilise la valeur cochée de la case à cocher pour déterminer si les colonnes de niveau inférieur sont développées. Cet effet est obtenu grâce à la pseudo-classe cochée. fourni par le sélecteur CSS3 Pour ceux qui sont intéressés, veuillez vous y référer, j'espère que cela pourra aider tout le monde.

1. Utilisez la valeur cochée de la case à cocher pour déterminer si la colonne de niveau inférieur est développée. Le sélecteur CSS3 fournit la pseudo-classe : vérifiée. Cette pseudo-classe nous fournit l'exécution lorsque l'élément a la valeur cochée. valeur vérifiée CSS.

Lorsqu'il y a un sous-menu, il y a une flèche vers le bas sur le côté droit de l'élément de menu. Lorsque l'élément de menu est réduit, la flèche pointe vers le haut. Les images peuvent être remplacées par vous-même.

2. Rendu

3. Extrait de code

<ol class="tree">  
       <li>  
           <label for="folder1" class="folderOne">泽元框架</label> <input type="checkbox" id="folder1" /> 
           <ol>  
                <li>  
                   <label for="subfolder1"class="folderTwo">开发规范</label> <input type="checkbox" id="subfolder1"  />   
                   <ol>  
                       <li class="file folderThree"><a href="#">常见界面错误举例</a></li>  
                       <li class="file folderThree"><a href="#">关于发行报告对BUG管理提出…</a></li>  
                       <li class="file folderThree"><a href="#">插件内部JAVA包命名规范</a></li>  
                   </ol>  
               </li> 
                <li class="file folderTwo"><a href="#">概述</a></li>  
                <li class="file folderTwo"><a href="#">服务器集群</a></li>  
                <li class="file folderTwo"><a href="#">模板</a></li>  
                <li class="file folderTwo"><a href="#">安全机制</a></li>   
           </ol>  
  
       </li>  
       <li>  
           <label for="folder2" class="folderOne" >ZCMS</label> <input type="checkbox" id="folder2" />   
           <ol>  
               <li class="file folderTwo"><a href="#">实时数据</a></li> 
               <li>  
                   <label for="subfolder2" class="folderTwo">实时数据</label> <input type="checkbox" id="subfolder2"  />   
                   <ol>  
                       <li class="file folderThree"><a href="#">实时数据</a></li>  
                       <li class="file folderThree"><a href="#">实时数据</a></li>  
                       <li class="file folderThree"><a href="#">实时数据</a></li>  
                   </ol>  
               </li>  
           </ol>  
       </li> 
       <li>  
           <label for="folder3"  class="folderOne">ZAS</label> <input type="checkbox" id="folder3" />   
           <ol>  
               <li class="file folderTwo"><a href="#">实时数据</a></li> 
               <li class="file folderTwo"><a href="#">实时数据</a></li> 
           </ol>  
       </li> 
       <li>  
           <label for="folder4"  class="folderOne">ZHTML标签</label> <input type="checkbox" id="folder4"/>   
           <ol>  
               <li class="file folderTwo"><a href="#">实时数据</a></li> 
               <li class="file folderTwo"><a href="#">实时数据</a></li> 
           </ol>  
       </li> 
       <li>  
           <label for="folder5"  class="folderOne">UI框架API手册</label> <input type="checkbox" id="folder5"/>   
           <ol>  
               <li class="file folderTwo"><a href="#">实时数据</a></li> 
               <li class="file folderTwo"><a href="#">实时数据</a></li> 
           </ol>  
       </li> 
   </ol>

<style type="text/css">  
    .tree {margin: 0;padding: 0;background-color:#f2f2f2;overflow: hidden;}  
    /*隐藏input*/
    .tree li input{position: absolute;left: 0;opacity: 0;z-index: 2;cursor: pointer;height: 1em;width:1em;top: 0;}  
    /*所有菜单项设置统一样式*/
    .tree li {position: relative;list-style: none;}   
    /*一级菜单加下边线*/
    .tree>li{border-bottom: 1px solid #d9d9d9;}
    /*给有子菜单的菜单项添加背景图标*/
    .tree li label {max-width:999px;cursor: pointer;display: block;margin:0 0 0 -50px;padding: 15px 10px 15px 70px;background: url(../../images/cp-detail-arrow-b.png) no-repeat right center;background-position:95% 50%;white-space:nowrap;overflow:hidden;text-overflow: ellipsis; }  
    .tree li label:hover,li label:focus{background-color:#a7a7a7;color:#fff;}
    /*清除所有展开的子菜单的display*/
    .tree li input + ol{display: none;}  
    /*当input被选中时，给所有展开的子菜单设置样式*/
    .tree input:checked + ol {padding-left:14px;height: auto;display: block;}  
    .tree input:checked + ol > li { height: auto;}  
    /*末层菜单为A标签，设置样式*/
    .tree li.file a{margin:0 -10px 0 -50px;padding: 15px 20px 15px 70px;text-decoration:none;display: block;color:#333333;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;} 
    .tree li.file a:hover,li.file a:focus{background-color:#a7a7a7;color:#fff;} 
    /*不同层级的菜单字体大小不同*/
    .tree .folderOne{font-size: 18px;}
    .tree .folderTwo{font-size:16px;}
    .tree .folderThree{font-size:14px;}
</style>

<script type="text/javascript">
       $(document).ready(function() {
           //每个有子菜单的菜单项添加点击事件
           $(".tree label").click(function(){
               //获取当前菜单旁边input的check状态
               var isChecked = $(this).next("input[type=&#39;checkbox&#39;]").is(&#39;:checked&#39;);
               //展开和收齐的不同状态下更换右侧小图标
               if(isChecked){
                   $(this).css(
                       "background-image","url(../images/cp-detail-arrow-b.png)"
                   );
               }else{
                   $(this).css(
                       "background-image","url(../images/cp-detail-arrow-t.png)"
                   );
               }
           });
            
       });
   </script>

Allons présentez le pliage du menu CSS

Laissez-moi d'abord vous montrer le rendu :

Comme ci-dessus, en supposant le premier. -Le menu de niveau est p, le menu secondaire est ul. Cela ressemble à :

<p>业务管理<span></span></p>
<ul>
...
<ul>

<p class="collapsed">汇总分析<span></span></</p>
<ul>
...
<ul>

<p class="collapsed">>系统管理<span></span></</p>
<ul>
...
<ul>

Lorsque le menu est développé, il y a une marque bleue à gauche et une marque de pli à droite.

La marque bleue à gauche n'a pas besoin de tableau. Il suffit de définir la bordure avec CSS. Il est également très pratique d'utiliser CSS à droite.

p span { float:right; padding-right:20px; }
p span:after { content: "∨" }
p.collapsed span:after { content: "∧" }

Parlons ensuite de l'effet de pliage du sous-menu, il y a l'animation :

p.collapsed + ul { height: 0px; transition: height 0.5s ease-out; }
p ul { height: 80px; transition: height 0.5s ease-in; }

Remarque ul Il doit y avoir une valeur spécifique pour la hauteur. Si le nombre de px n'est pas spécifié, bien qu'il puisse être plié, il n'y aura pas d'effet d'animation.

La dernière étape consiste à utiliser jQuery ou ezj pour changer de nom de classe. Lorsque vous cliquez sur p, toggleClass("collapsed") est utilisé.

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!