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

📅  最后修改于: 2021-11-08 05:53:22             🧑  作者: Mango

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

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

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

    HTML
    
    
      
        
      
      
        
                 

    GeeksforGeeks

                                   Data Structures                       Algorithms                       Interview Preparation                       Python               Java     
      


    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
    
    
      
        
      
      
        
                 

    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     
  

输出: