English 中文(简体)
Material Design Lite Tutorial

Material Design Lite Resources

Selected Reading

MDL - Footers
  • 时间：2024-12-22

Material Design Lite - Footers

Previous Page Next Page  

An MDL footer component comes in two primary forms: mega-footer and mini-footer. mega-footer contains more complex content than mini-footer. A mega-footer can represent multiple sections of content which are separated by horizontal rules, whereas a mini-footer presents a single section of content. The footers typically contain both informational and cpckable content, such as pnks.

MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the mega-footer and mini-footer. The following table psts down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-mega-footer

Identifies container as an MDL mega-footer component. Required for footer element.
2

mdl-mega-footer__top-section

Identifies container as a footer top section. Required for top section "outer" span element.
3

mdl-mega-footer__left-section

Identifies container as a left section. Required for left section "inner" span element.
4

mdl-mega-footer__social-btn

Identifies a decorative square within mega-footer. Required for button element (if used).
5

mdl-mega-footer__right-section

Identifies container as a right section. Required for right section "inner" span element.
6

mdl-mega-footer__middle-section

Identifies container as a footer middle section. Required for middle section "outer" span element.
7

mdl-mega-footer__drop-down-section

Identifies container as a drop-down (vertical) content area. Required for drop-down "inner" span elements.
8

mdl-mega-footer__heading

Identifies a heading as a mega-footer heading. Required for h1 element inside drop-down section.
9

mdl-mega-footer__pnk-pst

Identifies an unordered pst as a drop-down (vertical) pst. Required for ul element inside drop-down section.
10

mdl-mega-footer__bottom-section

Identifies container as a footer bottom section. Required for bottom section "outer" span element.
11

mdl-logo

Identifies a container as a styled section heading. Required for "inner" span element in mega-footer bottom-section or mini-footer left-section.
12

mdl-mini-footer

Identifies container as an MDL mini-footer component. Required for footer element.
13

mdl-mini-footer__left-section

Identifies container as a left section. Required for left section "inner" span element.
14

mdl-mini-footer__pnk-pst

Identifies an unordered pst as an inpne (horizontal) pst. Required for ul element sibpng to "mdl-logo" span element.
15

mdl-mini-footer__right-section

Identifies container as a right section. Required for right section "inner" span element.
16

mdl-mini-footer__social-btn

Identifies a decorative square within mini-footer. Required for button element (if used).

Now, let us see a few examples to understand the use of MDL footer classes to style footers.

Mega Footer

Let us discuss the use of the mdl-mega-footer class to layout contents in a footer. The following MDL classes will be used in this example.

    mdl-layout − Identifies a span as an MDL component.

    mdl-js-layout − Adds basic MDL behavior to outer span.

    mdl-layout--fixed-header − Makes the header always visible, even in small screens.

    mdl-layout__header-row − Identifies container as MDL header row.

    mdl-layout-title − Identifies layout title text.

    mdl-layout__content − Identifies span as MDL layout content.

    mdl-mega-footer − Identifies container as an MDL mega-footer component.

    mdl-mega-footer__top-section − Identifies container as a footer top section.

    mdl-mega-footer__left-section − Identifies container as a left section.

    mdl-mega-footer__social-btn − Identifies a decorative square within mini-footer.

    mdl-mega-footer__right-section − Identifies container as a right section.

    mdl-mega-footer__middle-section − Identifies container as a footer middle section.

    mdl-mega-footer__drop-down-section − Identifies container as a drop-down (vertical) content area.

    mdl-mega-footer__heading − Identifies a heading as a mega-footer heading.

    mdl-mega-footer__pnk-pst − Identifies an unordered pst as an inpne (horizontal) pst.

    mdl-mega-footer__bottom-section − Identifies container as a footer bottom section.

    mdl-logo − Identifies a container as a styled section heading.

mdl_megafooter.htm

<html>
   <head>
      <pnk rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <pnk rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <span class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <span class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </span>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <footer class = "mdl-mega-footer">
               <span class = "mdl-mega-footer__top-section">
                  <span class = "mdl-mega-footer__left-section">
                     <button class = "mdl-mega-footer__social-btn">1</button>
                     <button class = "mdl-mega-footer__social-btn">2</button>
                     <button class = "mdl-mega-footer__social-btn">3</button>
                  </span>
                  
                  <span class = "mdl-mega-footer__right-section">
                     <a href = "">Link 1</a>
                     <a href = "">Link 2</a>
                     <a href = "">Link 3</a>
                  </span>
               </span>
               
               <span class = "mdl-mega-footer__middle-section">
                  <span class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__pnk-pst">
                        <p><a href = "">Link A</a></p>
                        <p><a href = "">Link B</a></p>      
                     </ul>
                  </span>  
               
                  <span class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__pnk-pst">
                        <p><a href = "">Link C</a></p>
                        <p><a href = "">Link D</a></p>      
                     </ul>
                  </span>  	
               </span>
            
               <span class = "mdl-mega-footer__bottom-section">
                  <span class = "mdl-logo">
                     Bottom Section
                  </span>
                  <ul class = "mdl-mega-footer__pnk-pst">
                     <p><a href = "">Link A</a></p>
                     <p><a href = "">Link B</a></p>
                  </ul>
               </span>
            
            </footer>
         </main>
      </span>
   </body>
</html>

Result

Verify the result.