Freestyle template – The navigation menu

Post 26 of 262

The Freestyle template features a basic navigation menu style that can be used to create both horizontal and vertical navigation menus. I’ve been asked to explain how it works, so here is a quick rundown.

One class: .menu

The navigation menu is basically one or several unsorted lists (the UL element in the HTML) which have been given the class=”menu”, like this:

<ul class="menu">
  <li><a href="index.html">Layout #1</a></li>
  <li><a href="index2.html">Layout #2</a></li>
  <li><a href="index3.html">Layout #3</a></li>

The list adjusts to the grid system and multiple navigation menu lists can be used, meaning that you can place more than one navigation menu in the layout. If you want to use a horizontal menu, then place a list with one list item (the LI element) in each list, in a set of columns placed horizontally. If you want to use a vertical menu, place a list with several list items in a single grid column. It is also possible to combine the two forms into a grid menu. Examples of all three forms are included in the template .zip.

Freestyle does not support dropdown or popout multi-level menus by default, but it is one of the things that are considered for the next version of the template. “Current page” is another proposed feature. Is there anything else you would want to see in terms of features for the navigation menu in the next version of the Freestyle template? Post your suggestions and ideas as comment below!

, ,

This article was written by Andreas Viklund

Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.


HamidSeptember 5, 2012 at 19:44Reply

I like this post, Thanks.

Realizare SiteSeptember 5, 2012 at 23:20Reply

thanks. ;)

MathiewSeptember 24, 2012 at 14:40Reply

Helpful :-)
can i add image instead of Text in Link area

BrandonNovember 28, 2012 at 04:23Reply

dont really care for navigation menus and such.. but I’m kind of like a big fan of your’s.. I love all you work and Im going to be checking out all your tutorials soon as I get the time.. I sure wish you had a mailing list!

Berita Teknologi TerbaruNovember 28, 2012 at 17:26Reply

thanks for the tutorial. with this class menu, now I can make my blog become more and more simple than before due to I can put many different labels on one menu. your article is really helpful.

Steve RedshawJanuary 13, 2014 at 11:03Reply

I would like the navigation link to Page1 not to be active when Page1 is displayed. There is a css class called current but it doesn’t seem to have any effect. Is there a way to do this or is this in the proposed list of future features?

The In Response template is great, I have used a couple of your grid designs and find them very adaptable and of course responsive to different screen sizes and devices. Also, for me who is not particularly experienced in delving into html and css code, it is understandable and logical so I can fairly easily adapt it for my content.

Thanks for your superb work…