Building Menus for TheThe Fly Themes

Posted on May 29, 2011 by TheThe Fly in TheThe Fly Themes with tags: Mega Menu, Menu Icons

In more of the themes, the main menu is offered in several types: Mega Drop-down, Classic Drop-down, Inline Drop-down and sometimes, Static Inline Drop-down. All of these menu types are quite complex and are built by user through standard WordPress Menu interface under the Appearance link of the WP admin panel.1

TheThe Fly themes works well with several pre-designed menus.

So, once your theme has been activated, start building your menu at the WP Appearance/Menus screen and attach it to the Main Menu menu position as shown in the screenshot below.

Adjusting Drop-Down Menu Column’s Width

The width of a drop down columns of the Mega Drop-Down menu and the Classic Drop-Down can be adjusted. To specify your column width, go to the WP admin panel Menus page and click on the parent menu item to start editing it. Then, input one of the following class names into the menu item’s CSS Class field:

width200: sets the column width to 200px
width250: sets the column width to 250px
width300: sets the column width to 300px
width400: sets the column width to 400px
width500: sets the column width to 500px
width600: sets the column width to 600px

To specify any other menu width, let’s say 777px, please add appropriate style description to the CSS specification. The best way to do this is to:

add the following code to your Custom CSS file at the CSS folder of your theme’s admin panel:
```
.width777 { width:777px }
```
input the width777 class name into the menu item’s CSS Class field.

Setting Up the Number of Columns for Your Mega Drop-Down Menu Item.

To set up any specific number of columns from 1 to 10, input one of the following class names into the parent menu item’s CSS Class field:

cols2: sets the column number to 2
cols3: sets the column number to 3
cols4: sets the column number to 4
cols5: sets the column number to 5

Adding an Icon to Your Menu Item

NOTE: Ability to use menu icons is pre-designed for Mega Drop-Down menu type of the Main Menu and for the most of top menus!

First of all, all the icons you want the theme to generate CSS descriptions for MUST be placed in one of the following directories:

your-theme-folder/style/images/icons/16/
your-theme-folder/style/images/icons/24/
your-theme-folder/style/images/icons/32/
your-theme-folder/style/images/icons/ANY NUMBER HERE/

VERY IMPORTANT! CSS code is automatically generated for EACH and EVERY icon saved in the above mentioned directories. So, if you save hundreds of icons – hundreds of CSS code clones will be added to your CSS file. It means that you should keep in those directories ONLY the icons you are really using just to optimize your CSS code. If you don’t want to remove the unused icons from your server, simply create a /stock/ (or /whatever/) subdirectory and move the icons to it. They will be safe there and no unused CSS code will be generated.

You can always view which icons are generated CSS code for at the Icons folder of your theme’s admin panel. The generated classes are named like icon-16-home-png for home.png icon placed into the /16/ directory. email.png icon placed into the /icons/32/ directory will have the icon-32-email-png class generated.

Important: Do not use underscore _ symbol in your icon’s file names just because underscore can’t be used for class names.

Other Menus (Not Main One!)

All the menus except the Main are placed to your WP blog through our TheThe Custom Menu WIDGET! See the screenshot below. You just select which of the custom menus to put and in which widget area and you are done.

To select which type of main menu you want to use, please go to the Menu folder of your theme’s admin panel.