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
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
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
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
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.
