Cutemenu Overview

CuteMenu Installation & Uninstallation

Installation

CuteMenu can be installed like any other Drupal modules. Extract the tar ball in sites/all/modules. The module makes use of two tables in your database. If you do not want to use it anymore, make sure to Uninstall it before deleting the files or you will still have the tables hanging.

Go to Administer » Building site » Modules to select the module so you can use it.

Bug in the core menu system (until Drupal 6.9)

At this time (Oct 25, 2008) there is a "bug" in the core menu system that needs to be fixed for the CuteMenu to work 100%. The only problem is when you create a new menu, by default it won't save the CuteMenu selection properly (i.e. whether that item is a header, footer, title or a normal item--it will default to normal.) The patch is available in the module folder and there: https://www.drupal.org/node/326210

You do not need to install this patch. The work around is to create the menu item, then edit it and change the CuteMenu selection afterward.

The patch was applied to Drupal Core since version 6.10. Do not try to install the patch if you have Drupal 6.10 or better.

Uninstallation

If you want to uninstall the module, go to Administer » Building site » Modules and make sure the module is disabled. Then click on the Uninstall tab at the top of that page. There you will see a list of modules you can uninstall. Select the CuteMenu module and click Uninstall and confirm your willingness to do so. After you uninstalled the module that way, the tables added to your database will have been deleted.

Cute Menu Basic usage

Global Settings

CuteMenu has no global settings under the Administer » Site configuration. Instead, the settings are localized in the block and the menu items.

Look and feel

There is nearly nothing to do to use the default dropdowns. However, it is very likely that you will want to use Cute Menu with your own CSS. Feel free to start with the cutemenu.css file and add on to it. Look at the HTML output in your browser to see all the tags generated by the module. There are enough for you to create one CSS entry for each corner, each edge, the inside, different items aspects, and much much more.

Don't forget that the cutemenu.css will always be included, so you have to overwrite that CSS code if it isn't the default that you want to use.

Localized Settings

CureMenu adds elements as follow:

1. One block per menu.
   Go to Adminster » Site building » Block and find one new block per menu called CuteMenu: <menu name>
    
2. Three extra checkboxes in the Block configuration screen to
   1. Let you display (default) or not the menus that do not have any sub-menus. In other words, if your menu has 5 entries, of which only 2 have sub-menus, checking the box will make these 2 menus appear, and the others will be ignored.
   2. Choose whether the top menus are links or not. By default, the top menus are not links because it is very confusing to a lot of people. This means you either won't use that specific page, or you will have a sub-menu to access that top menu page.
   3. Choose whether the top menus are also beautified (true by default.)
       
3. One extra set of radio buttons under each menu item. For that you need to edit the menu item under Administer » Site building » Menus » <menu name>. Each menu item can be either:
   1. A header, displayed at the top of the menu,
   2. A footer, displayed at the bottom of the menu,
   3. A title1, displayed differently within the list of menu items, or
   4. A normal menu item (i.e. a link).

Notes:

1. In a single set of sub-menu items, you can at most have one header and one footer.
2. By default, items are viewed as normal.
3. To hide a header, footer or title, mark the item as normal and disable it or simply delete the entry altogether.
4. The header and footer can be links to nodes or views. In case of views, you need a Page with a valid path (the path needs to be exactly the same name as the view at this time.)

The Cute Menu module uses the menu item header and footer nodes, not the menu item itself. In other words, what appears in the CuteMenu dropdown is whatever the menu points to. However, if it is not a node or a view, it simply won't work (be ignored.)

The header and footer nodes can be given a title that starts with <none> to avoid having the title appear in the CuteMenu. So for instance, if you create a header with a lion, you may want to call it: "<none> Lion". The idea of adding a name after the 'none' keyword helps greatly whenever you want to look for that page (otherwise, all the headers and footers would be named <none> with the obvious consequence of not knowing which one's which...)

The nodes can otherwise include any HTML you'd like. Obviously, if you make it look really wide, it probably will look quite ugly. In a WYSIWYG editor, use Ctrl+Return to insert <br/>'s between lines to avoid a large vertical gap.

IMPORTANT

The node data is used unfiltered and without permission checks. So watch out. As long as you do not give permissions to non-admin people to create menus, you should be just fine.

One more thing: whenever you edit the menu, you may want to not see the header and footer in other places where you use the same menu but without the CuteMenu module. (i.e. the normal Drupal menu, for instance) In order to do so, you can mark the header and footer menu items as Disabled (that's done in the Administer » Site Building » Menus » <menu name> list, you can also do it while editing the item.) CuteMenu obviously ignores that flag for headers and footers.

At this time, the header and footer nodes can be of any type that can be loaded with a simple node_load() call. I may later create two special types just and only for CuteMenu.

• 1. The title is used to create groups of items within a drop down list.

Grouping items in a Cute Menu dropdown

CuteMenu Title

Cute Menu items have that special option called Title. This option transforms an entry in a title. By default, this means the entry is centered, italicized, and not clickable1 (not a link at all.)

The Title feature should be used to create groups of items within the same drop-down menu panel.

In order to make a menu item a Cute Menu Title, go to Administer » Site building » Menus » <menu name> (admin/build/menu/<menu name>.) Open the CuteMenu settings field set by clicking on its title. Click on the Title radio button. Then click Submit to save the changes to your database.

Any number of items can be changed to a Title, even several in a row.

• 1. The title is never made a link. This is internal to the CuteMenu system. You can change the look of your titles, but you cannot make them clickable.

Adding a header & footer in a Cute Menu dropdown

Image & text at the top and bottom

The Cute Menu Module is all about making your menu look cute... This is achieved, in part, by the nice top bar, and a gradient in your dropdown. But what makes it even better are the images that you can make appear inside your menus.

There are two areas for that purpose: the Header and the Footer. Both are handled the same way, it is just a flag in your menu item that changes between one and the other.

First, you need to create the Header and the Footer (note that you do not need both, but I will assume that you want to use the full functionality of the module!) These are expected to be regular Drupal pages. The content type is ignored, so you can create a special content for headers and footers if it makes it easier for you to manage those pages. The title and content are used. The title will be ignored if it starts with <none>. That way, you can use a title such as "<none> Contact Menu Header" so as to help you find the header page of your contact menu1.

Before you save those header and footer pages, make sure to add them to the menu where you want them to appear. By default, they will appear as a regular menu item. This is okay.

Now go to your menu administration page Administer » Site building » Menus » <menu name> (admin/build/menu/<menu name>). If you are to use the menu without the Cute Menu functionality in some place, make sure to mark the header and footer menu items as disabled. You can do that when viewing the list of all the items, or when editing the item.

Although it does not matter, you may want to place the header at the top and the footer at the bottom. If you want the other items to be sorted alphabetically, do NOT move them in the administration page. Instead, edit each item and change their weight. Since the default weight is 0, you can set the header to -1 and the footer to 1 in order to have them appear at the correct place.

Now, to make the menu a header or a footer, edit the menu item by clicking the edit link. By default, a menu item is marked as Normal Menu Item and the CuteMenu settings are hidden. Click on the CuteMenu settings field set title to open it. Then select Header or Footer as the case might be. Finally, Save the item changes.

The figure on this page shows a menu item as being a Header.

• 1. You will have to get a feel for it, but in most cases we center all the items in the header and footer pages. It will depend on your website look and feel. But know that you can do so.

CuteMenu To Do List

There are probably many things that could be done on this module. This is a short list for now:

1. Create other color themes.
2. Create a theme that works as is with this module (if you think you can do that, let me know!)
3. Add support for different permissions (such as allow or not people to change the settings)
4. Enhance runtime speed by adding cache support (nothing's cached right now, as far as I know, but maybe the block is...)
5. Make sure the header/footer can be anything
6. Find a better way to handle the header & footer?
7. Make use of one additional level to get the titles as regular menu entries instead of the current setup.
8. Table based drop-down so we can have multiple columns of data and not so tall drop-downs.

Example of Cute Menu usage

Example of usage

The Turn Watcher website, a commercial product by Made to Order Software, now uses the CuteMenu module in two places:

1. The main top-bar menu: Turn Watcher
2. The User Guide navigation menu: Turn Watcher User Guide
3. The main top-bar menu: Linux Geek Page
4. The main top-bar menu MORE...: Order Made!®

In Turn Watcher, I removed the default background from the top CuteMenu items. The top bar menu is pretty standard and shows as a nice drop-down, the User Guide has two cool features: it is right aligned (trust me, it took me some time to figure it out!) and it appears with an arrow just across from the text of the top menu item.

Feel free to post comments if you have some!

CuteMenu Common Problems

WYSIWYG Editors

If you are using a WYSIWYG editor, it is not unlikely to add a <p> tag at the bottom with a &nbsp; character to make sure that you can place your cursor on that last line. The problem with that is it also adds a lot of space at the bottom of your header and footer in the CuteMenu.

The best is to turn off your WYSIWYG editor whenever you edit these nodes. Since only the administrator is likely to change the header and footer of the menus, it should be just fine.

If you need to automatically remove the empty paragraphs, look into the MO Trimmer filter.