DJ-Menu is a suckerfish menu with CSS3 animations.
Now, you can easily manage whether the menu is animated or just scriptless css drop-down.

Navigate Extensions > Module Manager and choose DJ-Menu module.

Short description:

Basic options


  • Menu name – choose the name of menu (default is mainmenu)
  • End level – Level to stop rendering the menu at. If you choose 'ALL', all levels will be shown.
  • Theme – Choose the theme for DJ-Menu. You can create your own theme by copy the existing one and renaming the folder or copy the djmenu.css and djmenu_fx.css files from default theme into /templates/[your_template]/css/ and set theme to '- override from template -'. The only difference between djmenu.css and djmenu_fx.css is replacement of all occurences of 'li:hover' (djmenu.css) with 'li.hover' (djmenu_fx.css). You can do this replacement in few seconds if you use text editor with 'find and replace' feature.
  • Display SELECT for small screens – Display SELECT Dropdown box instead of DJ-MegaMenu for devices with small screen
  • Small screen width – Devices with screen width narrower that this value will be treated as small screen for SELECT box

CSS3 Animations and scripts options


  • CSS3 Animations and scripts features – Enabling makes the menu animate with nice CSS3 animations and also add the extra features such as sticky menu, keeping submenus inside wrapper, delay before close submenu or touch screens better experience.
  • Entrance animation – select one of available animations.
  • Exit animation – select one of available animations.
  • Animation speed – select one of available speeds.
  • Wrapper id – Submenu will change direction if it goes out the container with wrapper id. Default wrapper is container with .dj-megamenu class
  • Delay time before close submenu – Set delay time in miliseconds (1000 ms = 1 second)