📌  相关文章
📜  使用纯 CSS 设计垂直和水平菜单

📅  最后修改于: 2021-08-30 12:51:24             🧑  作者: Mango

菜单是任何网站中非常重要的组成部分。它是网页中的用户界面元素，包含指向网站其他部分的链接。它可以水平或垂直显示在网页或标题的主要内容之前。

  1. 创建垂直菜单：

    1. 在 Pure CSS 中，菜单默认是垂直的。由于最小的默认样式和低特异性选择器，因此很容易定制。
    2. menu 的所有组件都应该包含在一个名为“pure-menu”的类中。
    3. 在主标题或标题的 元素中添加类“pure-menu-heading”。
    4. 然后在带有“pure-menu-list”类的
        元素中添加标题后的所有项目。每个项目都应包含在
      • 元素中，类为“pure-menu-item” 。
      • 如果您想将一个项目与您网页的某个部分链接，您可以将其进一步包含在 元素中，其类为“pure-menu-link” 。

    例子：

    HTML
    

  

  
    
    
  
    
            
  

  

  
    
    
  
        
        
            GEEKFORGEEKS
        
  
        
    
    
  

  

    HTML
    

  

  
    
    
  
    
            
  

  

  
    
    
  
        
        
            GEEKFORGEEKS
        
  
        
    
    
  

  

    输出：

  2. 用于创建水平菜单：

    只需在开头的分区中添加类名“pure-menu-horizontal”即可将上述垂直菜单更改为水平菜单。

    例子：

    HTML 

    

  

  
    
    
  
    
            
  

  

  
    
    
  
        
        
            GEEKFORGEEKS
        
  
        
    
    
  

  

    输出：