实现 CSS 导航栏

导航栏是网页中的用户界面元素，包含指向网站其他部分的链接。它显示为每个页面顶部的水平链接列表。它位于页面主要内容之前或页眉下方。导航栏包含在 HTML5

后跟一个容器“div”中，该容器包含导航栏的2 个主要部分。一个标志或品牌链接，以及导航链接。链接可以根据应用要求左对齐或右对齐。

以下是使用导航栏的不同方式。

1. 右对齐：为了使导航栏链接右对齐，将右类添加到

元素。

输出：



左对齐：要左对齐导航栏链接，将左类添加到

元素。

HTML

  

    
    
  
    
    
  
    
    
  
    
    

  

    
        
            Materialize
            
              
            
                  
                
                    
                        Table
                    
                
                  
                
                    
                        Colors
                    
                
                  
                
                    
                        Typography
                    
                
            
        
    
  
    
    
    

  

输出：



中心标志：为了使标志居中对齐，中心类被添加到 。尽管徽标将以中屏幕和下屏幕为中心。使用它时，请确保链接不重叠。

HTML

  

    
    
  
    
    
  
    
    
  
    
    

  

    
        
            Materialize
            
              
            
                  
                
                    
                        Table
                    
                
                  
                
                        Colors
                    
                
                  
                
                        Typography
                    
                
            
        
    
  
    
    
    

  

输出：



Active Items：用来表示当前的活动页面，因为这个活动类被添加到“li”标签中。

HTML

  

    
    
  
    
    
  
    
    
  
    
    

  

  
    
        
            Materialize
            
              
            
                
                    
                        Table
                    
                
                  
                
                    
                        Colors
                    
                
                  
                
                        Typography
                    
                
            
        
    
  
    
    
    

  

输出：



Navbar with Tabs：用于扩展导航栏的组件。要使用它，将导航扩展类添加到外部“导航”标签。这将允许“nav-wrapper”和“height”中的标签组件是可变的。

HTML

  

    
    
  
    
    
  
    
    
  
    
    

  

  
    
        
            
                
                    LOGO
                
                  
                
                    menu
                
  
                
                    item1
                    item2
                    item3
                    item4
                
                
                    item1
                    item2
                    item3
                    item4
                
                
                
                    
                        Test 1
                    
  
                    Test 2
                    Disabled Tab
                    
                        Test 4
                    
                
            
        
    
    
    Test 1
    Test 2
    Test 3
    Test 4
  
    
    
    

  

输出：



下拉菜单：要添加导航栏下拉菜单，将“ul”下拉结构添加到页面中。然后，添加一个元素来触发下拉菜单。下拉结构的“id”被提供给下拉的“data-target”属性。

HTML

  

  
  
  
  
  
  
  
  
  
  
  

  

  
    
      
        LOGO
        
        
          menu
        
        
        
          Option-1
          Option-2
          
          
              Dropdown
              
                arrow_drop_down
              
            
          Option-3
          
          
            sub-dropdown1
            sub-dropdown2
            sub-dropdown3
            sub-dropdown4
          
        
        
        
          
            
              
                
              
            
          
          Option-1
          Option-2
          
            
              
                
                Dropdown
                  
                    arrow_drop_down
                  
                
                
                  
                  
                    sub-dropdown1
                    sub-dropdown2
                    sub-dropdown3
                    sub-dropdown4
                  
                
              
            
          
          Option-3
        
      
    
  
    
  
  
  

  

输出：



固定导航栏：为了使导航栏固定，添加了一个带有导航栏固定类的外部包装“div”。这将在固定导航栏的同时对所有其他内容进行偏移。

HTML

  

  
  
  
  
  
  
  
  
  
  
  

  

  
    
      
        LOGO
        
          menu
        
          item1
          item2
          item3
          item4
        
        
          item1
          item2
          item3
          item4
        
      
    
  
  GeeksforGeeks
  GeeksforGeeks
  GeeksforGeeks
  GeeksforGeeks
  GeeksforGeeks
  GeeksforGeeks
  GeeksforGeeks
  GeeksforGeeks
  
  
  
  

  

输出：



图标链接：图标可以添加到导航栏内的链接中。对于“图标”作为链接，不需要添加额外的类，只需使用i标签。

HTML

  

  
  
  
  
  
  
  
  
  
  
  

  

  
  
    
      
        
          account_box
        Logo
      
        
      
        search
        
          
        add_to_photos
        
        
          refresh
        
        dehaze
        
      
    
  
    
  
  
  
  

  

输出：