Drupal Learning Journal 14. Nice Menus

A few weeks ago I was involved in moving a Drupal 7 site from a host where D7 was available for users when while it was still in beta to another commercial host, which was one of the first one to offer it, when D7 came out of beta. Unfortunately, lots of features and aspects of the sites got broken with the move. Some of these went down because when the files were copied to the new server their permissions got lost. Others because the tech support of the new host didn’t have enough clues how to migrate a D7 site.

Yet other issues came to surface because the original host had a funky way of handling a few features, e.g. the theming/CSS customization was handy, but not standard. I think the fact that our expandable menus were no longer expanding at the new host was due to a combination of permission and overcustomized CSS issues. I am not sure, because I never managed to figure out the real reason, we eventually asked a Drupal guru to fix it for us.

Before calling in the big gun I tried to fix the menu and realized that it was a custom CSS/javascript code. I was surprised to see that, because I knew of the Nice Menus Drupal module, which is dedicated to do exactly this. Looking into its history I see that its first beta for D7 came out on October 26. I don’t know whether the first version of the site in question was built before or after that date, so maybe it was not available yet back then yet.

I attempted to fix the custom coded version, but my limited knowledge of CSS and Javascript, prevented me from finishing it. So I installed the Nice Menus module and attempted to recreate the menu. I had mixed success. The menu worked, but a, it didn’t exactly follow the look and feel of the original, b, when expanding (down) it pushed down the content of the rest of the page. I tried to use z-index and overflow, but couldn’t overcome the problem. Hence the help of the drupal guru was required.

Meanwhile I started to create my own first D7 site, where I also wanted to use expanding menus. The installation and configuration went without a hitch, so the menus worked out of the box. The only problem was that it was using the default CSS that came with the module and not my theme’s. I am using the MAYO (“MAke Your Own”) theme with one of the preset color themes and header image. It works great and I will do some customization, when I am ready to market the site. Right now I am still building it.

To cut the description of the troubleshooting process short this is what I had to do to make the Nice Menus using the MAYO’s CSS:

  • Use the “Nice Menu 1” block,
  • set the “Menu Parent” option  for “Main menu”
  • under the region settings set the “MAYO (default theme)” option for “Menu bar”

BTW: I found the name for the animation feature of nice menus funny: Superfish. It can be set under Home » Administration » Configuration » User interface » Nice menus

Post Media Link

Gabor Por