Flat UI Pro Tutorial: How To Use LESS in the Creation Sidebar Navigation

Flat UI Pro Tutorial: How To Use LESS in the Creation Sidebar Navigation

David East takes you step-by-step through the process of using LESS and HTML to create menu using Designmodo’s Flat UI Pro in this new video tutorial. This video is Part 3 in the Flat UI Tutorial Series, following “Flat UI Tutorial: Setting and Compiling Using LESS” and “Flat UI Tutorial: How To Use LESS in the Creation of an HTML Menu.”

In this video tutorial, you use components from Flat UI Pro and the steps from the previous video in the series to use LESS settings to create a left-hand sidebar menu.

The simple menu contains multiple navigation items with a consistent look and feel in the flat design style. You will use CSS to create navigation using lists, text and icons. In addition to the basic look of the menu, the tutorial also explains the use of anchor tags in the creation of active states for each menu item.

The tutorial is easy to follow for those with basic web design and coding knowledge. A familiarity with Adobe Photoshop is also recommended.

Creating a Vertical Menu

What you will learn in this tutorial: How to use LESS styles and HTML to create sidebar-style navigation, using text and icons.

Video run time: 11 minutes

David East

David East is a Developer Advocate for Firebase in San Francisco. He's a die-hard JavaScript fan and a budding iOS developer. He also likes waffles. If you like to write code—or eat waffles—follow him on twitter: @eastdotnet.

Newsletter

5 Comments
  1. Edwin Elia Nov 14, 4:40 pm

    Fantastic series! I really love watching this series.

    Thank you, David!

    Reply
    +3
  2. Marto Nov 14, 7:20 pm

    Great tutorial!

    Reply
    +1
  3. Zafer Latif Nov 15, 3:34 pm

    Thank you David. Great tut.

    Reply
    +2
  4. Ramin Nov 19, 2:41 am

    When you create the left menu and add position: absolute, it creates a scrollbar the size of the header. Adding top:0 gets rid of it, but then it hides the list items. Do I just need to add a margin-top to the to get it positioned correctly? Or is there another way?

    Great tutorial also!!!

    Reply
    +3

Leave a Reply

*
* Minimum length: 20 characters