1 minute

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

5 Comments

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 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—follow him on twitter: @_davideast.

Posts by David East

Super-Intuitive Drag & Drop Template Generator

Create beautiful responsive emails and newsletters easily.

Learn more Try Free
Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree