如何使用 HTML 和 CSS 设计现代侧边栏菜单？

侧边栏菜单是用于垂直导航的组件。它可以通过使用简单的 HTML 和 CSS 进行定制和响应。要制作折叠侧边栏，您需要具备创建它的 HTML 和 CSS 知识。

示例：在本示例中，首先我们将使用 HTML 创建一个结构，然后我们将使用 CSS 装饰该结构。

• HTML 文件：在这个文件中，我们将设计现代侧边导航栏的结构，这里我们不会使用任何一行 CSS。我们将在结构准备好后执行此操作。

  HTML

  
  
    
      
    
    
      
  
        
        
  GeeksforGeeks
          
        
        
          Data Structures
        
        
          Algorithms
        
        
          Interview Preparation
        
        
          Python
        
         Java 
      
    
  

• CSS 文件：此文件包含用于创建自定义动画侧边栏的所有 CSS 样式规则。该文件用于上述 HTML 代码。

  CSS

  /* Sidebar Div */
    div {
      color: #fff;
      width: 250px;
      padding-left: 20px;
      height: 100vh;
      background-image: linear-gradient(30deg, #11cf4d, #055e21);
      border-top-right-radius: 90px;
    }
    
    /* Div header */
    div h2 {
      padding: 40px 0 0 0;
      cursor: pointer;
    }
    
    /* Div links */
    div a {
      font-size: 14px;
      color: #fff;
      display: block;
      padding: 12px;
      padding-left: 30px;
      text-decoration: none;
      outline: none;
    }
    
    /* Div link on hover */
    div a:hover {
      color: #56ff38;
      background: #fff;
      position: relative;
      background-color: #fff;
      border-top-left-radius: 22px;
      border-bottom-left-radius: 22px;
    }
  

完整的解决方案：在这里我们将结合以上部分的 HTML 和 CSS 来创建一个完美的现代侧栏菜单。

HTML

  
    
  
  
    

      
      
GeeksforGeeks
        
      
      
        Data Structures
      
      
        Algorithms
      
      
        Interview Preparation
      
      
        Python
      
       Java 
    
  

输出：