jQuery Megadropdown.js

Megadropdown.js是一个 jQuery 插件，用于轻松实现下拉菜单。我们可以使用 megadropdown.js 轻松创建响应式下拉菜单。

我们可以采用标准的 HTML 嵌套列表，并使用此插件将它们转换为水平超级菜单。

其特点如下：

• 我们可以添加动画效果，如淡入或向下滑动以显示子菜单。
• 我们可以选择要在超级菜单的每一行上显示的子菜单项的数量
• 通过一些基本的 CSS 样式，它可用于为任何网站创建独特且具有视觉吸引力的导航。

CDN 链接：要使用此插件，只需添加 CDN 链接。

例子：

HTML

    
        
        
        
  
        
        
        
        
        
        
        
            .navbar-brand > img {
                padding-top: 11px;
                width: 130px;
                margin-left: 60px;
            }
            .navbar-brand {
                height: auto;
                margin: 0;
                padding: 0;
                margin-right: 20px;
            }
            .navbar-default {
                color: #fff;
                background-color: red;
                border-color: #000000;
            }
            .navbar-default .navbar-nav > li > a {
                color: #fff;
            }
            .navbar-default .navbar-nav > .dropdown > a .caret {
                border-top-color: blue;
                border-bottom-color: #fff;
            }
            .navbar-default .navbar-brand {
                color: #fff;
            }
            .menu-large {
                position: static !important;
            }
            .megamenu {
                padding: 20px 0px;
                width: 100%;
            }
            .megamenu > li > ul {
                padding: 0;
                margin: 0;
            }
            .megamenu > li > ul > li {
                list-style: none;
            }
            .megamenu > li > ul > li > a {
                display: block;
                padding: 3px 20px;
                clear: both;
                font-weight: normal;
                line-height: 1.428571429;
                color: #333333;
                white-space: normal;
            }
            .megamenu > li ul > li > a:hover,
            .megamenu > li ul > li > a:focus {
                text-decoration: none;
                color: #262626;
                background-color: #f5f5f5;
            }
            .megamenu.disabled > a,
            .megamenu.disabled > a:hover,
            .megamenu.disabled > a:focus {
                color: #999999;
            }
            .navbar-default .navbar-nav > li > a:focus,
            .navbar-default .navbar-nav > li > a:hover {
                color: #00a7e8;
            }
            .megamenu.disabled > a:hover,
            .megamenu.disabled > a:focus {
                text-decoration: none;
                background-color: transparent;
                background-image: none;
                filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
                cursor: not-allowed;
            }
            .megamenu.dropdown-header {
                color: #428bca;
                font-size: 18px;
            }
            @media (max-width: 768px) {
                .megamenu {
                    margin-left: 0;
                    margin-right: 0;
                }
                .megamenu > li {
                    margin-bottom: 30px;
                }
                .megamenu > li:last-child {
                    margin-bottom: 0;
                }
                .megamenu.dropdown-header {
                    padding: 3px 15px !important;
                }
                .navbar-nav .open .dropdown-menu .dropdown-header {
                    color: #fff;
                }
            }
        
    
    
        
            
                
                    
                        
                        
                        
                    
                
                
                    
                        
                             
                                Courses  
                            
                                
                                    
                                        
                                            
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                
                            
                        
  
                        
                            
                            Services 
                            
                                
                                    
                                        
                                            Web
                                        
                                        
                                            HTML CSS
                                            
                                        
                                        
                                            Node JS
                                            
                                        
                                        
                                            React
                                            
                                        
                                        
                                        
                                            Andriod
                                        
                                        
                                            Kotlin
                                            
                                        
                                        
                                            Flutter
                                            
                                        
                                        
                                            Java
                                            
                                        
                                    
                                
                                
                                    
                                        
                                        Graphic Design
                                        
                                        
                                        Figma
                                        
                                        
                                        Adobe XD
                                        
                                        
                                        
                                        Game Dev
                                        
                                        
                                        Blender
                                        
                                    
                                
                            
                        
                    
                
            
        
  
        
            // Javascript to use megadropdown.js
            $(document).ready(function() {
            jQuery(document).ready(function(){
                $(".dropdown").hover(
                    function() { $('.dropdown-menu', this)
                                    .stop().fadeIn("fast");
                    },
                    function() { $('.dropdown-menu', this)
                                    .stop().fadeOut("fast");
                });
            });
            }
        
    

输出：

• 点击课程菜单：
  

  课程菜单

• 单击“服务”菜单：
  

  服务菜单

  /li>