CSS, um einen mehrstufigen Faltmenüeffekt zu erzielen

In diesem Artikel wird hauptsächlich reines CSS vorgestellt, um den Faltbaumeffekt eines mehrstufigen Faltmenüs zu realisieren. Es verwendet den aktivierten Wert des Kontrollkästchens, um zu bestimmen, ob die Spalten der unteren Ebene erweitert werden Wird vom CSS3-Selektor bereitgestellt. Für diejenigen, die daran interessiert sind, lesen Sie bitte nach, ich hoffe, es kann jedem helfen.

1. Verwenden Sie den aktivierten Wert des Kontrollkästchens, um zu bestimmen, ob die untergeordnete Spalte erweitert ist. Diese Pseudoklasse stellt uns die Ausführung zur Verfügung geprüfter Wert.

Wenn ein Untermenü vorhanden ist, befindet sich auf der rechten Seite des Menüelements ein Abwärtspfeil. Wenn das Menüelement ausgeblendet ist, zeigt der Pfeil nach oben. Bilder können selbst ausgetauscht werden.

2. Rendering

3. Codeausschnitt

<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>

Lass uns Einführung in die CSS-Menüfaltung

Lassen Sie mich zunächst das Rendering zeigen:

Wie oben, unter der Annahme des ersten -Level-Menü ist p, das sekundäre Menü ist ul. Es sieht so aus:

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

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

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

Wenn das Menü erweitert ist, gibt es links eine blaue Markierung und rechts eine Faltmarkierung.

Für die blaue Markierung auf der linken Seite ist keine Tabelle erforderlich. Es ist auch sehr praktisch, CSS auf der rechten Seite zu verwenden.

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

Dann reden wir über den Falteffekt des Untermenüs, es gibt eine Animation:

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

Hinweis ul Es muss ein bestimmter Wert für die Höhe angegeben werden, obwohl dieser gefaltet werden kann, gibt es keinen Animationseffekt.

Der letzte Schritt besteht darin, jQuery oder ezj zum Wechseln des Klassennamens zu verwenden. Wenn auf p geklickt wird, wird toggleClass("collapsed") verwendet.

Das obige ist der detaillierte Inhalt vonCSS, um einen mehrstufigen Faltmenüeffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!