语义UI |侧边栏

Semantic-UI开源框架，提供侧边栏功能以使用 CSS、jQuery 创建惊人的用户界面，这与 bootstrap 非常相似。它具有创建令人惊叹的网站的所有不同元素。它使用一个类为 HTML 元素添加样式。侧边栏隐藏页面旁边的额外内容。页面内容通常显示在网页的一侧。

示例：以下示例演示了网页中的语义 UI 侧边栏功能。

  

    Semantic UI
    

  

    
        Sidebar
  
        
            Show Menu
        
  
        
            Menu
            
                Data Structure
            
            
                Web Designing
            
            
                Basic programming
            
        
        
            
        
  
        
            Hello welcome to
            geeksforgeeks
        
    
  
    
    
      
    
    
  
    
        $('button').click(function () {
            $('.ui.sidebar').sidebar('toggle');
        })
    

  

输出：

示例：以下示例演示了顶部的语义 UI 侧边栏。

  

    Semantic UI
    

  

    
  
        Sidebar
  
        
            Show Menu
        
  
        
            Menu
            
                Data Structure
            
            
                Web Designing
            
            
                Basic programming
            
        
        
            
        
        Hello welcome to geeksforgeeks
    
    
    
      
    
    
  
    
        $('button').click(function () {
            $('.ui.sidebar').sidebar('toggle');
        })
    

  

输出：

示例：以下示例演示带有图标的语义 UI 菜单。

  

    Semantic UI
    

  

    
          
        Sidebar
  
        
            Show Menu
        
          
        
  
            
                
                Internet
            
            
                
                Coding
            
            
                
                Help
            
        
        Hello welcome to geeksforgeeks
    
    
    
      
    
    
  
    
        $('button').click(function () {
            $('.ui.sidebar').sidebar('toggle');
        })
    

  

输出：