WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

Smarty Material Design

power of google material

EXPLORE COMPONENTS

MATERIAL COMPONENTS

MATERIAL : MENUS

TThe Material Design Lite (MDL) menu component is a user interface element that allows users to select one of a number of options. The selection typically results in an action initiation, a setting change, or other observable effect. Menu options are always presented in sets of two or more, and options may be programmatically enabled or disabled as required. The menu appears when the user is asked to choose among a series of options, and is usually dismissed after the choice is made.

HOW TO ENABLE MATERIAL 
1. Add to html head, BEFORE essentials.css:

<link href="assets/plugins/mdl/material.indigo-blue.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


2. Add .enable-materialdesign class to body:
<body class="smoothscroll enable-animation enable-materialdesign">


NOTE: if you don't need 'Material Design Lite' javascript plugin, skip step 2 
(.enable-materialdesign class is used by assets/js/scripts.js to load MDL plugin from assets/plugins/mdl/)

COLOR SCHEME: We use blue as default color scheme. You can create your own material design color:
Click to create your material design color

Credits: MDL official
  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action


Lower left
  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action


Lower right
Show Code 
<!-- Left aligned menu below button -->
<button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left">
  <li class="mdl-menu__item">Some Action</li>
  <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
  <li disabled class="mdl-menu__item">Disabled Action</li>
  <li class="mdl-menu__item">Yet Another Action</li>
</ul>


<!-- Right aligned menu below button -->
<button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right">
  <li class="mdl-menu__item">Some Action</li>
  <li class="mdl-menu__item">Another Action</li>
  <li disabled class="mdl-menu__item">Disabled Action</li>
  <li class="mdl-menu__item">Yet Another Action</li>
</ul>
  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action


Top left
  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action


Top right
Show Code 
<!-- Left aligned menu on top of button  -->
<button id="demo-menu-top-left" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect" data-mdl-for="demo-menu-top-left">
  <li class="mdl-menu__item">Some Action</li>
  <li class="mdl-menu__item">Another Action</li>
  <li disabled class="mdl-menu__item">Disabled Action</li>
  <li class="mdl-menu__item">Yet Another Action</li>
</ul>



<!-- Right aligned menu on top of button  -->
<button id="demo-menu-top-right"
        class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
    data-mdl-for="demo-menu-top-right">
  <li class="mdl-menu__item">Some Action</li>
  <li class="mdl-menu__item">Another Action</li>
  <li disabled class="mdl-menu__item">Disabled Action</li>
  <li class="mdl-menu__item">Yet Another Action</li>
</ul>
MDL class Effect Remarks
mdl-button Defines button as an MDL component Required on button element
mdl-js-button Assigns basic MDL behavior to button Required on button element
mdl-button--icon Applies icon (small plain circular) display effect to button Required on button element
material-icons Defines span as a material icon Required on an inline element
mdl-menu Defines an unordered list container as an MDL component Required on ul element
mdl-js-menu Assigns basic MDL behavior to menu Required on ul element
mdl-menu__item Defines buttons as MDL menu options and assigns basic MDL behavior Required on list item elements
mdl-menu__item--full-bleed-divider Modifies an item to have a full bleed divider between it and the next list item. Optional on list item elements
mdl-js-ripple-effect Applies ripple click effect to option links Optional; goes on unordered list element
mdl-menu--top-left Positions menu above button, aligns left edge of menu with button Optional; goes on unordered list element
(none) Positions menu below button, aligns left edge of menu with button Default
mdl-menu--top-right Positions menu above button, aligns right edge of menu with button Optional; goes on unordered list element
mdl-menu--bottom-right Positions menu below button, aligns right edge of menu with button Optional; goes on unordered list element