jQuery 提供菜单目标插件,帮助程序员开发有效的下拉菜单以及子菜单内容的轻松导航。该插件可以很好地区分用户悬停在下拉项目上与子菜单内容导航之间。该插件还支持 JS 事件处理功能,如鼠标进入或退出、激活或停用子菜单。
请下载 menu-aim 插件并将所需文件保存在您的工作文件夹中。在代码的 head 部分包含所需的文件,如下所示。
示例 1:在下面的示例中,演示了 menu-aim插件,该插件会生成一个下拉菜单。下拉菜单有 HTML无序列表,列表项取决于需求。每个列表项都有带有标题和内容的子菜单“div”。下拉菜单的 HTML 结构是通过使用menu-aim插件的 CSS 和 JS 代码实现的。插件本身也提供了其他功能,如“activateSubmenu”和“deactivateSubmenu”。程序员可以根据应用程序的要求更改或增强 JS 代码。
jQuery-menu-aim Plugin
-
Tutorials
-
Algorithms
Algorithms
Topics like Bubble sort, quick sort
Brute force method and other notes
-
Data Structures
Data Structures
Binary Tree
Arrays
Stacks and other DS topics
-
Languages
Languages
Java
Python
C, C++, C#
COBOL
-
Interview Corner
Interview Corner
Interview tips
Questions
HR round and other notes
-
Gate
Gate
Gate CS notes
GATE CS solved papers
important topics
-
ISRO CS
ISRO CS
ISRO CS solved papers.
ISRO CS original papers and official keys.
ISRO CS syllabus
-
Web Technologies
Web Technologies
About Web Technologies and its implementation.
-
Students
-
Get Hired
Get Hired
-
Careers
Careers
-
Project
Project
Project submenu
-
Internship
Internship
Internship tips
Stipend details
other notes
输出:
示例2:在上面的示例中,每个列表项都有子菜单,其“标题”和“内容”以简单的方式显示。以下示例演示了如何使用 menu-aim插件提供的 HTML “ul”和“li”元素和类添加另一个侧子菜单。每个侧面子菜单都有带有指向相应标题主题的链接的列表项,只是为了对子菜单有一个基本的了解。
jQuery-menu-aim Plugin
-
Tutorials
-
Algorithms
Algorithms
-
Data Structures
Data Structures
-
Languages
Languages
-
Students
-
Get Hired
Get Hired
-
Careers
Careers
-
Project
Project
Project side-submenu list items will come here
-
Internship
Internship
Internship side sub menu ulist items will come here
输出:
示例 3:以下示例演示了menu-aim插件 javascript 功能的使用。它显示了各种选项设置和功能的简单实现。例如,如果用户进入子菜单,背景颜色变为“红色”,离开主下拉菜单后,下拉菜单顶部会显示一条消息。程序员可以根据应用要求为其他选项编写代码。
jQuery-menu-aim Plugin
-
Tutorials
-
Algorithms
Algorithms
-
Data Structures
-
Languages
输出: