1 minute

Flat UI Pro Tutorial: How To Use LESS in the Creation of a Horizontal Menu

14 Comments

Flat UI Pro Tutorial: How To Use LESS in the Creation of a Horizontal Menu

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

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 horizontal menu navigation.

You will learn to move a design from Adobe Photoshop to your development site, using LESS and by creating CSS. The tutorial explains how to set proper spacing and variable settings so that your final menu navigation will have a professional look and feel.

The tutorial is easy to follow using any platform or editor to develop basic CSS. You will need basic web design and coding knowledge to easily complete this tutorial. A familiarity with Photoshop is also recommended.

Creating a Horizontal Menu

What you will learn in this tutorial: How to use LESS styles and HTML to create Horizontal menu navigation.

Video run time: 11 minutes

Impress your audience with animated websites and web presentations.

With Slides, we don’t make you start from an empty slate. All you have to do is to pick the elements you like best and combine them. Each slide has been carefully crafted to satisfy three key criteria: aesthetic, function and usability. That way you know every element works together seamlessly while enhancing the impact of your content.

Create a Website
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
Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree