materialize 布局2 --- navbar

navbar

1 设置 navbar 对齐

1. class:
   
   
   class="brand-logo center" 设置logo 居中
   
   设置 navbar links 居中
   • 使用方法：

  

    Logo 
    

        
Sass
        
Components
        
JavaScript
    
  

2 Active Items

• 增加类active 到 li 标签表示当前页

1. class: class="active"
2. 使用方法：
   
3. JavaScript

  

    

      Logo
      

        
Sass
        
Components
        
JavaScript
      
    
  

3 Extended Navbar with Tabs

要实现增加拓展的组件到 navbar，需要增加 类 nav-extended 到外层的nav tag

1. class: nav-extended
2. 使用方法：

    

      Logo

 

      

        
Test 1
        
Test 2
        
Disabled Tab
        
Test 4
      
    

4 Fixed Navbar

1. To make the navbar fixed , you have to add an outer wrapping div with the class navbar-fixed.
2. This will offset your other content while making your nav fixed.
3. You can adjust the height of this outer div to change how much offset is on your content.
4. class: navbar-fixed
5. 使用方法：

    

      

        Logo
        

          
Sass
          
Components
        
      
    
  

5 Navbar 下拉菜单（dropdown menu）

1. To add a navbar dropdown menu, add the ul dropdown structure into the page.
2. Add an element to trigger the dropdown menu
3. Make sure to supply the id of the dropdown structure to the data-target attribute of the dropdown trigger.

使用 ul 结构增加下拉菜单，li增加触发下拉菜单的元素，提供ul的id给触发下拉菜单的属性data-target

1. class: dropdown-content, dropdown-trigger
2. 使用方法：

  
one
  
two
  

  
three


  

    Logo
    

      
Sass
      
Components
      
      
Dropdownarrow_drop_down
    
  

6 图标链接（Icon Links）

1. You can add icons into links
2. For icon only links you don't need any addtional class.
3. Just pop the i tag in and it will work.
4. For adding an icon to a text link you need to add either a left or right class to the icon depending on where you want the icon to be

1. 图标链接, 使用 i tag 生效:

< i class="material-icons">cloud

2. 图标链接，添加class left or right 决定图标出现在文字的左边还是右边:

< i class="material-icons left">cloud

    

      cloudLogo
      

        
search
        
view_module
        
refresh
        
more_vert
      
    
  

7 按钮（Button）

1. You can add buttons into links. For buttons you don't need any additional class. Just pop the btn class on the a tag
   添加button 链接，在a标签里使用类 btn
2. halfway-fab

  

    

      Logo
      

        
Button
        
Button cloud
        
Large Button
//half-way fab

        add
      
      
    
  

8 Search bar

You can add a search form in the navbar

 

    

      

        

          
          search
          close
        
      
    
  

9 Mobile Collapse Button (折叠标记)

When your nav bar is resized you will see that the links on the right turn into a hamburger icon . Take a look at the example below to get this functionality Add the entire sidenav-trigger line to your nav
nav bar 重新设置尺寸时，导航栏的所有链接会变成一个汉堡包图标，实现方法是：将全部的sidenav-trigger 添加到nav

    

      Logo
      menu
      

        
Sass
        
Components
        
Javascript
        
Mobile
      
    
  

  

    
Sass
    
Components
    
Javascript
    
Mobile