In this article we review CSS Menu 3.3. When I first downloaded and installed the program, all went well until I tried to launch it. Nothing happened so I wrote to tech support about the problem and told them I use Windows 7 Home Premium. Here’s what they sent back.
Go to: Control panel: System: Advanced System Settings: (Performance) Settings: Data Execution Prevention. Turn off DEP or add the app. in the exception list. I set the DEP to: Turn on DEP for essential Windows services and programs only. After that, I rebooted my computer. Another option was: “If the problem persists, then try to add the app. in the whitelist of your antivirus.” Fortunately, this step was unnecessary. When I went to launch the application, it appeared right away.
This is the default interface.
Note that in this free version, there are a number of limitations, which you can see in the screen shot above. Areas that you cannot access are grayed out.
Note also, that for each template (Android, mac and Compact Gray), there’s a scrolling list to the right offering variations.
When you click on the Icons tab, you get five different groupings of icons that you can use with your buttons.
The Creation Process
To get started, make sure the Template tab is selected, then click on the large green button to create your first menu item. This brings up a default menu item (you can change this later).
After that, it’s time to create the menu, which could be horizontal or vertical. I chose to build a horizontal layout with drop downs. To build the menu, use the large green button to create the first menu item. After that, make sure the Template tab is active and choose a template that appeals to you. Double-click on it to apply it.
At this point you can build the menu. You’ll do so by using the large green button, the smaller green button, the green arrows to navigate through the menu structure and the red minus button to delete any items you don’t want. Note that the navigation will change depending on the menu template you use, so it takes a bit of practice.
Here's a completed menu structure.
If you want to go further with your menus and add image to your menu items, you can do so with the icons. Here’s an example of the different sizes that you can use.
Here's the menu items with icons added.
The next step is to set the properties for each menu item. This include the text for menu item, the link, the target, a hint and at the bottom, you’ll see a popup for the icon. This allows you to change the icon. Note that enabling the checkmark beside “Active,” turns that menu button green.
In this section, this is where you have an enormous amount of control over the main menu items and the submenus, as well. Here are some of your options.
• Font normal: The appearance of the font color and background of the normal button
• Font hover: Where you can change the colors of the font and background
• Menu radius: One option for controlling the shape of the button • Item radius: Control of the item radius
• RTL mode: This flips the menu structure so it reads from right to left.
• Font control: Size, type of font, bold, italic, underline
• Size: This controls the size of the button. Choose from Auto size, 100% width and custom width and height settings.
On the submenu you have similar controls, as you can see above.
To save your work, click on the disk icon. This will allow you to come back and edit your work later, if you choose to. Your other options are Publish and Insert to Page. As an example, if you click on the Publish button, you’ll be prompted for a file name and you’ll save the menu structure as HTML.
Once you click on save, you’ll see a preview of what the menu will look like in the browser (yes, it’s ugly, but it gives you an idea of what you can do).
When you navigate to the file folder where you just saved that HTML file, you’ll see the file there. You’ll also see a folder that contains the CSS document as well as all the image files that you’ve used in your layout.
Now you’re ready to use the completed files with your web pages. Have fun!
Notes About the Free/Paid Versions
To use the commercial version of this program, you’ll need to purchase a license. Once you do, you’ll get extra features. This includes the ability to create multicolumn menus and includes extended sets of menu templates and icons.
