Tutorialsplane

Material Design Lite Side Menu With Icons

admin

Material Design Lite Side Menu With Icons(MDL) Sometimes we need to create a button with an icon in Material Design Lite. We can use material design icons to add the icons to the buttons. Here in this tutorial, we are going to explain how you can make fancy buttons with icons. You can also use our online editor to edit and run the code online.

Material Design Lite Side Menu With Icons | MDL | Side Navigtion Example

It is very simple to create side nav menu, here in this article we have create a beautiful side menu which contain various menu items with icons, for icons we have used material design lite icons. Here is the full example which you can use anywhere easily –

Material Design Lite Side Navigation Menu Example:




<meta name="fragment" content="!"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>



     
   
   
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header ">
    <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">
      Tutorialsplane.com</span>
      <div class="mdl-layout-spacer"></div>
    </div>
  </header>
   <div class="myclass mdl-layout__drawer">
    <span class="mdl-layout-title">Tutorialsplane.com</span>
    <!-- navigation Container, with links -->
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="http://tutorialsplane.com"><i class="material-icons">camera_enhance</i> Electronics</a>
       <a class="mdl-navigation__link" href="http://tutorialsplane.com"><i class="material-icons">face</i> LifeStyle</a>
       <a class="mdl-navigation__link" href="http://tutorialsplane.com"><i class="material-icons">weekend</i> Home & Furniture</a>
       <a class="mdl-navigation__link" href="http://tutorialsplane.com"><i class="material-icons">important_devices</i> Tv & Appliance</a>
       <a class="mdl-navigation__link" href="http://tutorialsplane.com"><i class="material-icons">book</i> Books & More</a>
   <div class="nav-divider"></div>
       <a class="mdl-navigation__link" href="http://tutorialsplane.com"><i class="material-icons">add_shopping_cart</i> My Cart</a>
       <a class="mdl-navigation__link" href="http://tutorialsplane.com"><i class="material-icons">date_range</i> My Orders</a>
       <a class="mdl-navigation__link" href="http://tutorialsplane.com"><i class="material-icons">favorite_border</i> My Wishlist</a>
       <a class="mdl-navigation__link" href="http://tutorialsplane.com"><i class="material-icons">power_settings_new</i> My Account</a>
       <a class="mdl-navigation__link" href="http://tutorialsplane.com"><i class="material-icons">settings_phone</i> Help</a>
       <a class="mdl-navigation__link" href="http://tutorialsplane.com"><i class="material-icons">power_settings_new</i> Login/Logout</a>
    </nav>    
  </div>
</div>

Try it »

In this example we have used the material design lite yellow theme and we have added few custom css to make the menu more beautiful.

Features

If you run the above example it will produce the output something like this –

Tags

#ecommerce side menu template,
#material design lite side menu Example,
#fancy responsive side menu template

MDL - Faq

Material design lite – Center Aligned form
Material Design Lite Table full Width
Material design lite login page
Material design lite not Working on mobile devices
Material design lite Registration page
Material Design Lite Button Icon
Material Design Lite Side Menu With Icons