CSS3 Menus

You may remember my previous post on HTML5 and CSS3 features. In that post, we spoke of using several features to create a multiple composite background for our websites. Pls see: https://jnorthr.wordpress.com/2011/04/08/html5-multiple-background-images/ for further details.

Going one step farther, i’ve been researching how to build nice menu systems for both horizontal and vertical menus and their items. I have not been too impressed with many offerings until i found this one : http://css3menu.com/ which is a dandy little tool to do just that. The learning curve is not steep and i had built a nice menu in about 10 minutes.

Their download offers both windows and Mac versions, though i did not see any choice for ubuntu / linux people. Once unzipped and installed,  we see a panel we can use to construct a menu to our hearts content. Oh, did i tell you that it’s free ? Well, yes, it is and as is typical these days, an upgrade pack allows even more beautiful menus to be built.

Now i am a big fan of rounded corners and animated drop-down menu item lists. This tool does that as well. Here is a pix of their construction panel :

Nifty Tool to build website menus without the need for javascript. It can be used on most modern browsers too.

It’s a nifty tool to build website menus without the need for javascript. It can be used on most modern browsers too, at least those browsers that support the later CSS 3 specifications. You can choose from a choice of icons if you like to add icons to your menu items. Color schemes, font faces and point sizes, plus the usual bold, italic choices allow an infinite variety of customization choices.

Icon Theme Packs

Each main menu and sub-menu item can be given a URL that would allow your users to navigate around your website. Tooltips can also be included as helpful hints for your users. A set of pre-built templates are on offer if you choose not to roll your own. Main menu headings can each have sub menu-items, and each of those can have their own sub menu items. This allows us to construct really sophisticated systems to meet complex requirements.

And when your master-piece is complete, you can publish it as an html test page, or insert the CSS3 results into an existing file or save the entire project as a project file for later re-use.

All-in-all, a satisfying tool for the job to hand. Now where did i put that chequebook ?

10 Minutes from install to working menu system !

See menu template pull-out below. Template themes in gray are only for paid users.

A set or pre-built menu templates
A set of pre-built menu templates, names in gray are only for paidup users.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s