Detailed examples of how jQuery implements accordion menu, hierarchical menu, top menu, and seamless scrolling effect-JS Tutorial-php.cn

This article mainly introduces the graphic description of the accordion menu, hierarchical menu, top menu, and seamless scrolling menu based on jQuery. The effect display and code implementation of this article are introduced in very detail. Friends who need it can refer to it. I hope it can Help everyone.

1. The accordion menu renderings and code are as follows:

手风琴效果制作

风景图01
风景图02
风景图03
风景图04
风景图05

Copy after login

2. The scroll-down (level) menu renderings and code are as follows:

    用jQuery中的slideToggle制作菜单     
    水果系列  苹果
 梨子
 葡萄
 火龙果
 
 
  海鲜系列  鱼
 大虾
 螃蟹
 海带
 
 
  果蔬系列  茄子
 黄瓜
 豆角
 西红柿
 
 
  速冻食品  水饺
 冰淇淋
 
 
  肉质系列  猪肉
 羊肉
 牛肉

Copy after login

3. Sticky menu (when a menu reaches the top of the page, stop there)

置顶菜单

网站主内容一

网站主内容二

网站主内容三一

回到顶部

Copy after login

4. None The seam scrolling effect diagram and code are as follows:

无缝滚动

Copy after login

The knowledge points involved in the above menu are as follows:

4. jQuery

1. slideDown() shows downwards

2, slideUp() rolls up

3, slideToggle() in sequence Expand or roll up an element

5. jQuery chain call

The method of jquery object returns this jquery object after execution. All jQuery The methods of the object can be written together:

$("#p1").chlidren("ul").slideDown("fast").parent().siblings().chlidren("ul").slideUp("fase")

Copy after login

$("#p1").//The element with id bit p1

.chlidren("ul") //The ul under this element Child element

.slideDown("fast") //The height is from zero to the actual height to display the ul element

.parent() //Jump to the parent element of ul, which is the id For the element of p1

.siblings() //Jump to all sibling elements at the same level of the p1 element

.chlidren("ul") //Find the ul sub-elements in these sibling elements

.slideUp("fase") //Convert from the actual height to zero to hide the ul element

Related recommendations:

jquery implementation of drop-down menu Accordion effect sharing

Example sharing jquery to achieve multi-level menu effect

jQuery menu select all, invert selection, cancel example analysis

The above is the detailed content of Detailed examples of how jQuery implements accordion menu, hierarchical menu, top menu, and seamless scrolling effect. For more information, please follow other related articles on the PHP Chinese website!