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

• 1 minute READ

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

No-Code Email Template Builder

With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Free Email BuilderFree Email Templates

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 Programs Engineer for Google, working on 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.

Posts by David East