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.