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