Summary of jQuery plug-ins commonly used in website development (10) menu plug-in superfish

The website is not very dependent on menus. We can design websites without using menus to display website content. However, if there are too many types of websites, "maybe" using menus as website navigation makes it easier for users to find content. The superfish plug-in is used to implement menu functions. However, when using superfish, it is inevitable to integrate with your own website and set the superfish style. The official website only shows how to use the plug-in and provides a simple style. For example:


In my previous use, superfish did not meet my needs, so I modified the superfish style. In this article, I will mention how to modify the superfish style. It is just a simple example, not focusing on color matching.

I. superfish plug-in Functions

Implement the drop-down menu function. It is mainly used for horizontal menus and vertical menus.

Ii. superfish official address

Http://users.tpg.com.au/j_birch/plugins/superfish/examples/vertical/
The official address contains the use case of the superfish plug-in. The use case is very simple. However, there are some problems when you modify a style. The following describes how to modify the style.

Iii. superfish usage 1. File Reference

For a horizontal menu, you only need to reference the following four files. The jquery file, the css style file of the menu, and the js function file of the menu.

For a vertical menu, you also need to reference the style file of the vertical menu.

2. Custom styles. As follows:

{:;:;}{:;}{:;}{:;:;:;:;:;}{:;:;:;:;:;:;:;:;}{:;}{:;}{:;}

3. js Code. The js Code Used in the initialization menu is very simple. You only need a few words to implement the menu function.

$('#example''show'1200'#horizontal').click((){;$('#example').removeClass('sf-vertical''#vertical').click((){  $('#example').addClass('sf-vertical'

4. html. Superfish mainly uses html source code ul to implement menu Association. There are a lot of html code, so I won't post it. If you are interested, refer to the "menu test" below ".

The modified style is as follows:

Online demonstration: menu plug-in superfish