CSS Tab Navigation Creation Made Easy

iZone are proud to announce the beta release of a new time-saving tool for web designers and developers: iZone Design Tab Creator.  No coding. No need for PhotoShop. Quick and easy

Horizontal tabbed navigation created with standards compliant CSS and XHTML is becoming a very popular choice among web designers and developers. Our Tab Creator guides you through a range of options before delivering W3C standards compliant, semantic XHTML and CSS.

Stylish CSS based Horizontal Tabbed Menu

The iZone Tab Creator splits the tab creation process into 4 easy steps. You can then see an instant preview of your new menu before downloading the code and images. This step-by-step tutorial will walk you through the process of creating your menu:

Step 1: Select Your Tab Style

Select your tab style

The iZone Tab Creator lets you create menus with a range of tab styles. In the initial release there are 6 styles to pick from. Simply click on your preferred style to select it and move on to step 2.

If you’ve got any suggestions for styles, leave us a note in the comments.


Step 2: Select Your Tab Color Scheme

Define the color palette for your tabs

Step 2 allows you to blend your menu into the look and feel of your site. Select the text and background color for the active and inactive tabs. A Photoshop style color picker is provided to help you explore ideas and a single tab preview lets you see how it will look. We have also provided 8 presets to get you started.

If you’ve already got hex values, you can simply copy and paste them into the text boxes.


Step 3: Add Tabs To Your Menu

Add Tabs to your menu

Your menu needs to link to the pages on your site, right? Step 3 lets you add tabs to your menu, up to a maximum of 10. For each tab you can specify the text to display and the URL that the tab links to.

You can remove a tab by clicking on the cross on the left side. Tabs can be re-ordered by dragging and dropping the rows.


Step 4: Customise Your Menu’s Look and Feel

In the initial beta launch the options area looks a little bare, we’re working on adding cool new features all the time! Currently you have 3 options:

  • The spacing between each of your tabs
  • The width of the bottom border
  • Whether your menu is aligned to the left or right.

If you have any ideas for options you’d like to see, please let us know in the comments!


Step 5: Preview Your New Menu

preview the appearance of your menu

Step 5 provides an instant preview of the menu you have created. It isn’t 100% accurate to the code that gets generated, but gives you a good idea of the appearance. The main differences are:

  • The preview only shows the first 3 tabs
  • Each tab is fixed width, the real menu is fluid and expands to contain the text entered

Step 6: Download The Code

When you click the ‘Download’ button we generate the code and images needed for your menu, package it all up in one nice ZIP file and let you download it. Inside your Zip file you will find:

  • tab_on.gif – The active tab background
  • tab_off.gif – The inactive tab background
  • tabs.html – HTML file containing code to navigation and related CSS

To use the menu on your site:

  • Copy the HTML onto your page. You’ll need the <div> tag and its contents:
    <div id="nav">
    
    ...
    
    </div>
  • Copy the CSS. You can either place it in a <style> tag in the <head> of your page, or put it into an external style sheet (the preferred method).
  • Upload your pages and the 2 images to your server

Future Development

We are still working on the Tab Creator and hope to add more cool features soon. If you have any ideas or you find any bugs in the tool, please let us know in the comments.

Credits

Thanks to Isocra for their ultra cool drag-n-drop script and Mark Kahn for his awesome color picker.

By Adam Pope

Adam is our tech God, and it's not just his name that's holy - his knowledge of code borders on the supernatural, and whilst he doesn't like to brag, he finished top of his class at university. (Yep, the very top).

When he isn't crafting masterpieces on the web he is knocking them up in the kitchen, his legendary curry being an office mainstay here at Storm.

Adam was recently named as one of South West Business Insider's 42 under 42 for 2012.

stormconsultancy.co.uk →

5 comments

  1. Hi, and thanks for a great guide!

    Have you got plans to expand the nav bar to parent / child, like Amazon used to be? I’m trying to make a web site with a two layered menu system.

    Thanks

    Robert

  2. You are currently ranking 9th on this page for a Google search of “tab navigation”+”best practices”. It’s too bad that this tool is broken in all browsers when you attempt to download the files at the last step.