[分享]css3折叠导航菜单

CSS3折叠导航菜单是一个非常实用的网页设计元素，特别适合移动设备，因为它可以让网站具有更好的可用性和预览性，同时又可以节省空间，让用户更好地找到自己需要的信息。要创建CSS3折叠导航菜单，我们需要使...

CSS3折叠导航菜单是一个非常实用的网页设计元素，特别适合移动设备，因为它可以让网站具有更好的可用性和预览性，同时又可以节省空间，让用户更好地找到自己需要的信息。

要创建CSS3折叠导航菜单，我们需要使用HTML和CSS代码。在HTML中，我们使用

和
• 标签来创建列表，而在CSS中，我们可以使用:target伪类和transition属性来控制折叠效果。

  <ul class="nav">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
  
  .nav li{
    display: inline-block;
    margin-right: 20px;
  }
  
  .nav li a{
    text-decoration: none;
    color: #000;
    padding: 5px 10px;
    border-radius: 5px;
  }
  
  .nav li a:hover{
    background-color: #c4c4c4;
  }
  
  .nav li a:active{
    color: #fff;
    background-color: #000;
  }
  
  #home, #about, #contact{
    display: none;
  }
  
  #home:target, #about:target, #contact:target{
    display: block;
  }
  
  #home:target .nav li:nth-child(1) a, #about:target .nav li:nth-child(2) a, #contact:target .nav li:nth-child(3) a{
    color: #fff;
    background-color: #000;
  }
  
  #home:target + #about + #contact .nav li:nth-child(2), #home:target + #contact + #about .nav li:nth-child(3), #about:target + #home + #contact .nav li:nth-child(1), #about:target + #contact + #home .nav li:nth-child(3), #contact:target + #home + #about .nav li:nth-child(1), #contact:target + #about + #home .nav li:nth-child(2){
    display: none;
  } 

  这段CSS代码使用了:target伪类来控制折叠效果，同时也使用了transition属性来使折叠效果更加平滑和自然。然后使用了一些选择器来选择特定元素，包括:first-child和:nth-child等。

  总的来说，CSS3折叠导航菜单是一个非常简单但实用的网页设计元素，可以大大提高网站的可用性和用户体验。