Material Design Lite Footer
what is footer in (MDL) ?
what is footer in (MDL) ?
- Material Design Lite(MDL) component footer is used to create a footer container to present related content in a visually attractive way.
- A Footer is positioned at the bottom of the webpage, containing links and information about the important sections of the website and details about the website.
- A MDL Footer can be made to appear either at the end of the page or any other position within the display.
- MDL Provides two types of footers : mega-footer and mini-footer
- mega-footer : A Mega Footer has multiple content sections containing a large no of links and other content seperated by a horizontal rule.
- mini-footer : A Mini Footer has less complexity , since it contains only a single content sections.
- Footers have a predefined structure comprising of both required and optional elements comprising of links and textual content.
- MDL displays footers in a easy to access user interface with discrete blocks of content arranged in coherently related way.
Mega Footer:
- A MDL Mega Footer is using class mdl-mega-footer with the element footer.
- The Middle Section of the Footer is defined using class mdl-mega-footer__middle-section
- A MDL Footer in a minified form is created using class mdl-mini-footer on the footer element.
Sample Code
<!-- MDL footer Container -->
<footer class="mdl-mega-footer">
<!-- MDL footer Middle Section Container -->
<div class="mdl-mega-footer__middle-section">
<!-- MDL Footer Drop Down Section -->
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">Tutorials</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">jQuery</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Java</a></li>
</ul>
</div>
<!-- MDL Footer Drop Down Section 2 -->
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">Reference</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">jQuery</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
</ul>
</div>
<!-- MDL Footer Drop Down Section 3 -->
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">Social</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">WhatsApp</a></li>
</ul>
</div>
</div>
<!-- MDL Footer Bottom Section -->
<div class="mdl-mega-footer__bottom-section">
<div class="mdl-logo">Tutorials Park</div>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Contacts</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</footer>
Output
Mini Footer:
- A MDL Footer in a minified form is created using class mdl-mini-footer on the footer element.
Sample Code
<!-- MDL Mini Footer Container-->
<footer class="mdl-mini-footer">
<!-- MDL Footer left Section-->
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Tutorials Park</div>
<!-- MDL Footer link-list -->
<ul class="mdl-mini-footer__link-list">
<li><a href="#">Contacts</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</footer>
Output
Material Design Lite : Footer Classes
| MDL Class | Description |
|---|---|
| mdl-mega-footer | To Define a footer element as a Container of mega-footer |
| mdl-mega-footer__left-section | To define a left section container of the footer |
| mdl-mega-footer__top-section | To Define a top section container of the footer. |
| mdl-mega-footer__social-btn | To create a styled square within a mega footer for social buttons. |
| mdl-mega-footer__right-section | To Create a Footer Container for Right Section |
| mdl-mega-footer__middle-section | To Define a Footer Container for Middle Section |
| mdl-mega-footer__link-list | To Define an unordered list as a vertical(drop-down) list |
| mdl-mega-footer__bottom-section | When used, the cell is stretched vertically filling the parent. |
| mdl-logo | A Container for the Heading or Logo of the Website. |
| mdl-mini-footer | Used to Define a container a for mini-footer. |
| mdl-mini-footer__left-section | A Container to create the left section of the footer. |
| mdl-mini-footer__link-list | To Create an Unordered list as a horizontal(inline) list. |