展開/摺疊菜單列表的動畫，只用CSS

Visual aid

點擊「組合」;
推動一切順利;
新鏈接淡入淡出;
再次點擊「PORTFOLIO」，做所有事情都相反;

我目前的代碼;

$(function() { 
 
    $('[data-toggle]').on('click', function() { 
 
     var id = $(this).data("toggle"), 
 
      $object = $(id), 
 
      className = "open"; 
 

 
     if ($object) { 
 
      if ($object.hasClass(className)) { 
 
       $object.removeClass(className) 
 
      } else { 
 
       $object.addClass(className) 
 
      } 
 
     } 
 
    }); 
 
});

#list { 
 
    display: none; 
 
} 
 
#list.open { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<nav> 
 
    <ul> 
 
     <li><a href="#">Home</a> </li> 
 
     <li><a href="#">A Empresa</a> </li> 
 
     <li><a href="#" class="hide" data-toggle="#list">Portfolio</a> 
 
      <ul id="list"> 
 
       <li><a href="#">Comerciais</a> </li> 
 
       <li><a href="#">Residenciais</a> </li> 
 
       <li><a href="#">Institucionais</a> </li> 
 
       <li><a href="#">Edifícios</a> </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Contato</a> </li> 
 
    </ul> 
 
</nav>

這是可能做到這一點沒有JS，只能用CSS？我不知道如何做動畫部分，我嘗試過CSS轉換，但沒有奏效。

另外，標記和JS的任何提示？我不認爲我是這樣做的「正確的方式」...任何提示將不勝感激。

來源

2015-03-13 almostamachine

CSS確實需要關注要素上，如鏈接或輸入，所以是，你可以切換（顯示/隱藏）一個子菜單：焦點和指針事件通過CSS :) – 2015-03-13 19:03:14

隨着你可以使用:focus並最終pointer-events如果你想有一個切換效果只CSS：

#list { 
 
    max-height:0; 
 
    overflow:hidden; 
 
    transition:0.5s linear; 
 
    } 
 
a:focus + #list { 
 
    max-height:15em; 
 
    } 
 
a:focus { 
 
    pointer-events:none; 
 
    }

<nav> 
 
    <ul> 
 
     <li><a href="#">Home</a> </li> 
 
     <li><a href="#">A Empresa</a> </li> 
 
     <li><a href="#nowhere" >Portfolio</a> 
 
      <ul id="list"> 
 
       <li><a href="#">Comerciais</a> </li> 
 
       <li><a href="#">Residenciais</a> </li> 
 
       <li><a href="#">Institucionais</a> </li> 
 
       <li><a href="#">Edifícios</a> </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Contato</a> </li> 
 
    </ul> 
 
</nav>

你甚至可以做到這一點非常小的CSS沒有階級，也不ID：

ul a +ul { 
 
    max-height:0; 
 
    overflow:hidden; 
 
    transition:0.5s linear; 
 
    } 
 
ul a:focus + ul { 
 
    max-height:15em; 
 
    } 
 
a:focus { 
 
    pointer-events:none; 
 
    }

<nav> 
 
    <ul> 
 
     <li><a href="#nowhere">Home</a> 
 
      <ul> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#nowhere">A Empresa</a> 
 
      <ul> 
 
       <li>item</li> 
 
       <li>item</li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#nowhere" >Portfolio</a> 
 
      <ul> 
 
       <li><a href="#">Comerciais</a> </li> 
 
       <li><a href="#">Residenciais</a> </li> 
 
       <li><a href="#">Institucionais</a> </li> 
 
       <li><a href="#">Edifícios</a> </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Contato</a> 
 
      <ul> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav>

來源

2015-03-13 19:00:12

我創建了菜單僅使用CSS，請檢查下面搗鼓https://jsfiddle.net/dwgpqncw/2/也爲同樣的代碼下面貼

<!DOCTYPE> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>css menu</title> 
<style> 
*{margin:0; padding:0;} 
ul{font-family:Arial, Helvetica, sans-serif;} 
ul li ul{height:0px; transition:500ms all;-webkit-transition:500ms all;-moz-transition:500ms all;-o-transition:500ms all;overflow:hidden;} 
ul li ul li{ transition:1300ms all;-webkit-transition:1300ms all;-moz-transition:1300ms all;-o-transition:1300ms all;opacity:0} 
a{color:#000; text-transform:uppercase;} 
ul li ul li a{color:red;} 
/*set the height to 0 and on focus set the height to pixels calculation based on the line height*/ 
ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1){height:0px;overflow:hidden;} 
ul li ul li{line-height:30px;font-size:16px;} 
ul li .expandable{font-size:20px; line-height:35px; text-decoration:none; padding-left:20px; } 
ul li .expandable:hover{text-decoration:underline;} 
ul li ul li:before{padding-left:20px; content:"-"; font-size:16px; margin-left:20px} 
ul li .expandable:focus{color:red;} 
ul li .expandable:focus +ul:nth-child(1){height:90px;} 
ul li .expandable:focus +ul:nth-child(2){height:120px;} 
ul li .expandable:focus +ul:nth-child(3){height:60px;} 
ul li .expandable:focus +ul:nth-child(4){height:120px;} 
ul li .expandable:focus +ul:nth-child(1) li,ul li .expandable:focus +ul:nth-child(2) li,ul li .expandable:focus +ul:nth-child(3) li,ul li .expandable:focus +ul:nth-child(4) li{opacity:1;}  
</style> 
</head> 

<body> 

<ul> 
    <li> 
     <a href="#" class="expandable">Home</a> 
     <ul> 
      <li><a href="#">Home link 1</a></li> 
      <li><a href="#">Home link 2</a></li> 
      <li><a href="#">Home link 3 </a></li> 
     </ul> 

    </li> 


    <li> 
     <a href="#" class="expandable">A Empressa</a> 
     <ul> 
      <li><a href="#">Empressa link 1</a></li> 
      <li><a href="#">Empressa link 2</a></li> 
      <li><a href="#">Empressa link 3 </a></li> 
      <li><a href="#">Empressa link 4 </a></li> 
     </ul> 

    </li> 

    <li> 
     <a href="#" class="expandable">Protfolio</a> 
     <ul> 
      <li><a href="#">Protfolio link 1</a></li> 
      <li><a href="#">Protfolio link 2</a></li> 
     </ul> 

    </li> 


    <li> 
     <a href="#" class="expandable">Contato</a> 
     <ul> 
      <li><a href="#">Contato link 1</a></li> 
      <li><a href="#">Contato link 2</a></li> 
      <li><a href="#">Contato link 3 </a></li> 
      <li><a href="#">Contato link 4 </a></li> 
     </ul> 

    </li> 


</ul> 
</body> 
</html>

來源

2015-03-13 19:01:25

請使用TidyUp按鈕，並按照其建議。此外，您的菜單沒有按要求的淡入淡出效果。 – isherwood 2015-03-13 19:05:54

我現在添加了淡入淡出效果https://jsfiddle.net/dwgpqncw/1/。什麼是tidyUp按鈕？ – 2015-03-13 19:36:32

它在主菜單中是正確的。將您的CSS移到CSS面板並點擊它。 – isherwood 2015-03-13 20:12:25

展開/摺疊菜單列表的動畫，只用CSS

回答

相關問題