|
JavaScript.CoolDev.com has a new product that lets WIN PC users create menu scripts without knowing any JavaScript!
Figure 1. Screenshot of COOLjsBuilder in Designer view.
The internet is constantly changing and as a web designer I’m always on the lookout for new solutions to designing navigation menus that are good looking and fast loading. While searching recently for a simple to use, easy to modify, cross-platform, cross-browser navigation menu, I came across the CoolDev website (JavaScript.CoolDev.com). They offer free STANDARD version downloads for a couple of menu and tree building products, as well as PRO versions for registered users at ridiculously reasonable rates. Then, just a few months ago, they launched the COOLjsBuilder program which takes most of the guess work out of creating menus by hand-coding.
Test it for Free!
COOLjsBuilder STANDARD version is available for free, so I urge you to check it out and try it for yourself. Then, if you like it, you can upgrade to the PRO version for only $20-30. Keep in mind that the STANDARD version shows a faint, but noticeable watermark (fig 2) on the lower left corner beneath the menu, so if you’re designing professional sites, you’ll definitely want the PRO version.
Figure 2. Watermark visible in Standard version.
Standard vs. Pro
Both the STANDARD and PRO versions offer URL, Target, and Formatting with CSS capabilities including item sizing, item positioning, border & pseudo-shadow, multiple levels, styles and colors, and multiple instances. Where things get fancy is in the PRO version which has the added features of popups, cross-frame, relative positioning, icons, arrows, and advanced borders. I strongly recommend you cruise through JSCD’s website to see working samples of all the funky things you can do with this code, but at minimum get the free version to see how it works for you: http://javascript.cooldev.com
Running the Program
COOLjsBuilder is easy to install. Once you download the application, simply run the installer script and the program will launch upon completion. To build your menu start by selecting File>New>COOLjsMenuPRO (or COOLjsMenu if using the STANDARD version).
When creating a new menu the STANDARD version, COOLjsBuilder forces you to use the Menu Creation Wizard, whereas the PRO version launches a blank project for you to build your menu from scratch. I prefer to launch PRO to eliminate the watermark visible in the STANDARD version, and then use the Wizard under the File menu to get the bones of the PRO menu built, and then add my customized features as needed. The Wizard prompts you to select menu orientation first, with a choice of Horizontal with drop down menu or Vertical with side drop/flyout menus. Next you choose the items or button count, size and format, including blanket sublevels for all buttons. This means that if one button has 2 subcategories but another button has 4 and another has 0, you’ll need to select the maximum number, in this instance 4, for all sublevels, which will give ALL you buttons 4 sublevels. Then, you’ll need to delete the sublevels you’re not using, but that’s pretty easy to do. (Alternately, you could choose a minimum number of sublevels, and add them to your buttons as needed). After that, you select the button size and shadow depth. Lastly you generate the menu and see it in Design view. A really nice feature is the ability to toggle between Design and Code views, which are very helpful if you’re at all JavaScript literate. To see how the menu would look in a browser window without launching your browser window, toggle to the Preview view.
Bells and Whistles
The main thing I love about the COOLjsBuilder is the ability to customize it to my website design. So far I’ve successfully used the code twice with rollover buttons on the first tier and regular HTML text for dropdowns. Since PRO offers relative positioning, I was able to anchor the menu to a specific location from the top and left of the browser window, floating above the website design, making the buttons look seamless with the rest of the site’s design. I also easily customized the code and modified the font, font size, font color, button background color, button border color, and rollover state attributes. Here’s an example of the finished code at work: HORIZONTAL NAVIGATION: JasonZweig.com (investor advice)
VERTICAL NAVIGATION: BarbaraNitke.com (nude photographs)
Forum Group
The COOLjsBuilder has an attending Forum Group that registered users can join to share tips and otherwise assist each other with menu building. The CoolDev folks also monitor the Forum, so you can also get tech support and report issues with the product there. Getting tech support is fairly easy when you put your Order Number in the Subject line of your email (without it, you may never get a response).
Score Card
Overall I like the product for how easily you can create and modify text based menus. Nevertheless, a general knowledge of JavaScript is essential for any customization, so their claim that you don’t need to know it is false. And, especially since I’m more likely to need the first tier of buttons to have rollover images attached to them, as a non-programmer I haven’t been able to easily create new graphic-based menus without having to bug the guys at JSCD for help with individual button sizing issues. I’m learning though, and eventually I’m sure I’ll figure it out without needing tech support. JSCD also needs to release their technical documentation for the program, which was promised but not delivered. For the future, I have emailed JSCD to request that they add a feature to easily assign graphics to rollover buttons in a future release of COOLjsBuilder. Hopefully they’ll listen to me and make the program more designer friendly!
«««¶¶
Sue Jenkins is a freelance web designer, graphic designer and illustrator, and also offers private training to companies in the New York area. If your company needs a logo, website, or a website redesign, see Sue’s consulting page for more information, or go directly to her website learn more about her design services. http://www.luckychair.com.
|
