Trang chủ
Blogspot

Hướng dẫn tạo Drop Down Menus với Superfish trong Drupal (EN)

Hướng dẫn tạo Drop Down Menus với Superfish trong Drupal, Drupal 7 Tutorial - Drop Down Menus With Superfish

Drupal 7 Tutorial - Drop Down Menus With Superfish (article)

Superfish is a jQuery plugin that takes an existing pure CSS drop-down menu and adds usability enhancements like these :

  • Supports for touch devices

  • Timed delay on mouseout

  • Animations

  • Keyboard accessibility

  • Indicates the presence of submenus

Superfish module integrates this plugin with your Drupal menus.

Installation :

  1. Download the Superfish Library from Superfish Library and extract it to sites/all/libraries/superfish (yoursite.com/sites/all/libraries/superfish/superfish.js).
         Link (mirror): Superfish Library
   2. Download Superfish Module from Superfish Module 7.x-1.9, extract it to /sites/all/modules and enable the module.

How To Use :

  • Go to admin/structure/block and configure one of the Superfishblocks :

I chose Horizontal menu type to replace the header menu. Simple style is nice unobtrusive white/gray design. Mouse delay is important so that the menu doesn't disappear immediately when your mouse accidentally goes outside a sub-menu :

Rest of the configuration options are more or less optional stuff you can apply if needed. These include things like class settings for the menu items, custom wrappers, min/max width of the menu and touchscreen settings :


  • Go to admin/structure/block, and move one of the Superfish blocks to some active region and save :

Now you have a working Superfish menu :

Easing jQuery Plugin :

Easing functions specify the speed at which an animation progresses at different points within the animation :


  • Refresh the superfish block configuration page and you have extra options available :

Nguồn: http://www.wdtutorials.com/