jQuery |菜单目标插件

jQuery 提供菜单目标插件，帮助程序员开发有效的下拉菜单以及子菜单内容的轻松导航。该插件可以很好地区分用户悬停在下拉项目上与子菜单内容导航之间。该插件还支持 JS 事件处理功能，如鼠标进入或退出、激活或停用子菜单。

请下载 menu-aim 插件并将所需文件保存在您的工作文件夹中。在代码的 head 部分包含所需的文件，如下所示。

示例 1：在下面的示例中，演示了 menu-aim插件，该插件会生成一个下拉菜单。下拉菜单有 HTML无序列表，列表项取决于需求。每个列表项都有带有标题和内容的子菜单“div”。下拉菜单的 HTML 结构是通过使用menu-aim插件的 CSS 和 JS 代码实现的。插件本身也提供了其他功能，如“activateSubmenu”和“deactivateSubmenu”。程序员可以根据应用程序的要求更改或增强 JS 代码。

  

    
    jQuery-menu-aim Plugin
    
    
    
  
    
  
    
  
    
        body {
            padding-top: 60px;
        }
      
        .navbar .popover {
            width: 200px;
            -webkit-border-top-left-radius: 0px;
            -webkit-border-bottom-left-radius: 0px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            overflow: hidden;
        }
          
        .navbar .popover-content,
        .popover-title {
            text-align: center;
        }
          
        .navbar .popover-content ul {
            text-align: center;
            height: 200px;
            width: 100px
        }
          
        .navbar .popover-content p {
            height: 200px;
            max-width: 250px;
            text-align: center;
        }
          
        .navbar .dropdown-menu {
            -webkit-border-top-right-radius: 0px;
            -webkit-border-bottom-right-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
        }
          
        .navbar .dropdown-menu > li > a:hover {
            background-image: none;
            color: white;
            background-color: rgb(0, 129, 194);
            background-color: rgba(0, 129, 194, 0.5);
        }
          
        .navbar .dropdown-menu > li > a.maintainHover {
            color: white;
            background-color: green;
        }
    
  

  

  
    
        
            
                
                    
                    
                    
                
                
                    
                        
                
  
                
                    
                        
                            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
                                        
                                     
                                            Job opportunities in GFG 
                                        
                                    
                                
  
                                
                                    Careers  
                                    
                                        Careers
                                        
                                     
                                            Geeks careers
                                        
                                    
                                
                                
                                    Project
                                    
                                        Project
                                        
                                            Project submenu
                                        
                                    
                                
                                
                                    Internship
                                    
                                        Internship
                                        
                                            Internship tips
                                                 Stipend details
                                                 other notes
                                        
                                    
                                
                            
                        
                    
                
            
        
    
  
    
    
    
  
    
        var $menu = $(".dropdown-menu");
  
        // Events handlingon menu row activation.
        $menu.menuAim({
            activate: activateSubmenu,
            deactivate: deactivateSubmenu
        });
  
        /*  JS is used to show and hide the submenu contents.
            It calls the activate and deactivate*/
        //  events at the right time to show and hide your submenus.
        function activateSubmenu(row) {
            var $row = $(row),
                submenuId = $row.data("submenuId"),
                $submenu = $("#" + submenuId),
                height = $menu.outerHeight(),
                width = $menu.outerWidth();
  
            // Show the submenu
            $submenu.css({
                display: "block",
                top: -1,
                left: width - 3,
                height: height - 4
            });
  
            // Currently activated row is highlighted 
            $row.find("a").addClass("maintainHover");
        }
  
        function deactivateSubmenu(row) {
            var $row = $(row),
                submenuId = $row.data("submenuId"),
                $submenu = $("#" + submenuId);
  
            // Hide the submenu and remove the highlighted row
            $submenu.css("display", "none");
            $row.find("a").removeClass("maintainHover");
        }
  
        // Bootstrap's dropdown menus immediately close on document click.
        // This event should not be closed if a submenu is being clicked.
  
        $(".dropdown-menu li").click(function(e) {
            e.stopPropagation();
        });
  
        $(document).click(function() {
  
            $(".popover").css("display", "none");
            $("a.maintainHover").removeClass("maintainHover");
        });
    

  

输出：

示例2：在上面的示例中，每个列表项都有子菜单，其“标题”和“内容”以简单的方式显示。以下示例演示了如何使用 menu-aim插件提供的 HTML “ul”和“li”元素和类添加另一个侧子菜单。每个侧面子菜单都有带有指向相应标题主题的链接的列表项，只是为了对子菜单有一个基本的了解。

  

    
    jQuery-menu-aim Plugin
    
    
    
  
    
  
    
  
    
        body {
            padding-top: 60px;
        }
  
        .navbar .popover {
            width: 200px;
            -webkit-border-top-left-radius: 0px;
            -webkit-border-bottom-left-radius: 0px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            overflow: hidden;
        }
          
        .navbar .popover-content,
        .popover-title {
            text-align: center;
        }
          
        .navbar .popover-content ul {
            text-align: center;
            height: 400px;
            width: 200px
        }
          
        .navbar .popover-content p {
            height: 400px;
            max-width: 250px;
            text-align: center;
        }
          
        .navbar .dropdown-menu {
            -webkit-border-top-right-radius: 0px;
            -webkit-border-bottom-right-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
        }
          
        .navbar .dropdown-menu > li > a:hover {
            background-image: none;
            color: white;
            background-color: rgb(0, 129, 194);
            background-color: rgba(0, 129, 194, 0.5);
        }
          
        .navbar .dropdown-menu > li > a.maintainHover {
            color: white;
            background-color: green;
        }
          
        .side-sub-menu {
            list-style-type: none;
            height: 400px;
            text-align: center;
        }
          
        .list-style {
            width: 180px;
            text-align: left;
        }
    
  

  

  
    
        
            
                
                    
                    
                    
                
                
                     
                      
                
  
                
                    
                        
                            Tutorials
  
                            
                                
                                    Algorithms
                                    
                                        Algorithms
                                        
                                            
                                                
                           Searching algorithms
                                                
                           Sorting algorithms
  
                                            
                                        
                                    
                                
  
                                
                                    Data Structures  
                                    
                                        Data Structures
                                        
                                            
                                                
                             Arrays structures
                                                
                             Stack structures
                                            
                                        
                                    
                                
                                
                                    Languages
                                    
                                        Languages
                                        
                                            
                                                
                             Java language
                                                
PHP script
                                            
                                        
                                    
                                
                            
                        
                    
                    
                        
                            Students
                            
                                
                                    Get Hired
                                    
                                        Get Hired
                                        
                   Job opportunities in GFG 
                                    
                                
  
                                
                                    Careers  
                                    
                                        Careers
                                        
                    Geeks careers
                                    
                                
                                
                                    Project
                                    
                                        Project
                                        
                   Project side-submenu list items will come here
                                        
                                    
                                
                                
                                    Internship
                                    
                                        Internship
                                        
                     Internship side sub menu ulist items will come here
                                        
                                    
                                
                            
                        
                    
                
            
        
    
  
    
    
    
  
    
        var $menu = $(".dropdown-menu");
  
        // Events handlingon menu row activation.
        $menu.menuAim({
            activate: activateSubmenu,
            deactivate: deactivateSubmenu
        });
  
        /*  JS is used to show and hide the submenu contents.
            It calls the activate and deactivate*/
        //  Events at the right time to show and hide your submenus.
        function activateSubmenu(row) {
            var $row = $(row),
                submenuId = $row.data("submenuId"),
                $submenu = $("#" + submenuId),
                height = $menu.outerHeight(),
                width = $menu.outerWidth();
  
            // Show the submenu
            $submenu.css({
                display: "block",
                top: -1,
                left: width - 3,
                height: height - 4
            });
  
            // Currently activated row is highlighted 
            $row.find("a").addClass("maintainHover");
        }
  
        function deactivateSubmenu(row) {
            var $row = $(row),
                submenuId = $row.data("submenuId"),
                $submenu = $("#" + submenuId);
  
            // Hide the submenu and remove the highlighted row
            $submenu.css("display", "none");
            $row.find("a").removeClass("maintainHover");
        }
  
        // Bootstrap's dropdown menus immediately close on document click.
        // This event should not be closed if a submenu is being clicked.
  
        $(".dropdown-menu li").click(function(e) {
            e.stopPropagation();
        });
  
        $(document).click(function() {
  
            $(".popover").css("display", "none");
            $("a.maintainHover").removeClass("maintainHover");
        });
    

  

输出：

示例 3：以下示例演示了menu-aim插件 javascript 功能的使用。它显示了各种选项设置和功能的简单实现。例如，如果用户进入子菜单，背景颜色变为“红色”，离开主下拉菜单后，下拉菜单顶部会显示一条消息。程序员可以根据应用要求为其他选项编写代码。

  

    
    jQuery-menu-aim Plugin
    
    
    
  
    
  
    
  
    
        body {
            padding-top: 60px;
        }
  
        .navbar .popover {
            width: 200px;
            -webkit-border-top-left-radius: 0px;
            -webkit-border-bottom-left-radius: 0px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            overflow: hidden;
        }
          
        .navbar .popover-content,
        .popover-title {
            text-align: center;
        }
          
        .navbar .popover-content ul {
            text-align: center;
            height: 200px;
            width: 100px
        }
          
        .navbar .popover-content p {
            height: 200px;
            max-width: 250px;
            text-align: center;
        }
          
        .navbar .dropdown-menu {
            -webkit-border-top-right-radius: 0px;
            -webkit-border-bottom-right-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
        }
          
        .navbar .dropdown-menu > li > a:hover {
            background-image: none;
            color: white;
            background-color: rgb(0, 129, 194);
            background-color: rgba(0, 129, 194, 0.5);
        }
          
        .navbar .dropdown-menu > li > a.maintainHover {
            color: white;
            background-color: green;
        }
          
        .side-sub-menu {
            list-style-type: none;
            height: 400px;
            text-align: center;
        }
          
        .list-style {
            width: 180px;
            text-align: left;
        }
    

  

    
        
            
                
                    
                    
                    
                
                
                    

                
                
                
                    
                        
                            Tutorials
  
                            
                                
                                    Algorithms
                                    
                                        Algorithms
                                        
                                            
                                                
                
                  Searching algorithms
                                                
                Sorting algorithms
                                            
                                        
                                    
                                
  
                                
                                    Data Structures  
                                    
                                        Data Structures
                                        
                                            
                                                Arrays
                                                Stack
                                            
                                        
                                    
                                
                                
                                    Languages
                                    
                                        Languages
                                        
                                            
                                                Java
                                                PHP
                                            
                                        
                                    
                                
                            
                        
                    
                
            
        
    
  
    
    
    
  
    
        var $menu = $(".dropdown-menu");
  
        // Events handling on menu row activation.
        $menu.menuAim({
            activate: activateSubmenu,
            deactivate: deactivateSubmenu,
            enter: enterSubmenu,
            exitMenu: exitMainmenu,
            subMenuDirection: "right"
        });
  
        /*  JS is used to show and hide the submenu contents.
            It calls the activate and deactivate*/
        //  Events at the right time to show and hide your submenus.
        function activateSubmenu(row) {
            var $row = $(row),
                submenuId = $row.data("submenuId"),
                $submenu = $("#" + submenuId),
                height = $menu.outerHeight(),
                width = $menu.outerWidth();
  
            // Show the submenu
            $submenu.css({
                display: "block",
                top: -1,
                left: width - 3,
                height: height - 4
            });
  
            // Currently activated row is highlighted 
            $row.find("a").addClass("maintainHover");
        }
  
        function deactivateSubmenu(row) {
            var $row = $(row),
                submenuId = $row.data("submenuId"),
                $submenu = $("#" + submenuId);
  
            // Hide the submenu and remove the highlighted row
            $submenu.css("display", "none");
            $row.find("a").removeClass("maintainHover");
        }
  
        function enterSubmenu(row) {
            var $row = $(row),
                submenuId = $row.data("submenuId"),
                $submenu = $("#" + submenuId);
            $submenu.css("background-color", "red");
        }
  
        function exitMainmenu() {
            $("#exitMenuMsgboxId").html(" Main menu left !");
        }
        // Bootstrap's dropdown menus immediately close on document click.
        // This event should not be closed if a submenu is being clicked.
  
        $(".dropdown-menu li").click(function(e) {
            e.stopPropagation();
        });
  
        $(document).click(function() {
  
            $(".popover").css("display", "none");
            $("a.maintainHover").removeClass("maintainHover");
        });
    
  

  

输出：