热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

使用jquery简单实现下拉菜单

这里给大家展示了一例使用jQuery实现下拉菜单效果,代码非常简洁,推荐给小伙伴们

Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能;

首先肯定要在页面引用jquery.js  版本不限 ;

接下来把=====================html贴出来:

代码如下:

 
       
     
               
  • 系统管理
  •  
               
  • 干管所勤
  •  
               
  • 保护站
  •  
               
  • 木材检验
  •  
               
  • 森林管护
  •  
           
 
   
 
 
   
     
           
  • 出勤管理
  •  
           
  • 巡视管理
  •  
           
  • 现场取证
  •  
           
  • 问题处置
  •  
       
 
 
 
   
     
           
  • 位置监测
  •  
           
  • 检验管理
  •  
       
 
 
 
   
     
           
  • 出勤管理
  •  
           
  • 监管信息
  •  
       
 
 
 
   
     
           
  • 出勤管理
  •  
           
  • 监管信息
  •  
       
 
 
 
   
     
           
  • 权限管理
  •  
           
  • 设备管理
  •  
       
 
 

===========================css样式:

代码如下:

/**头部菜单**/ 
.header_menu{ 
    float:right; 
    width: 50%; 
    height: 100%; 
    cursor: pointer; 

.header_menu ul{ 
    list-style: none; 
    height: 100%; 

.header_menu ul li{ 
    float: right; 
    width: 20%; 
    color:white; 
    font-size:14px; 
    padding-top: 55px; 
    font-weight: bold; 

.display{ 
    display: none; 

.display ul{ 
    list-style: none; 
    width: 100px; 

.display ul li{ 
    padding-top:10px; 
    padding-bottom: 5px; 
    padding-left:5px; 
    cursor: pointer; 
    font-size: 14px; 

.movediv{ 
    position: fixed; 
    left: 0px; 
    top:0px; 
    font-size: 14px; 
    white; 
    border:1px solid white; 

.redcolor{ 
    #a0c9e6; 

=======================js脚本

代码如下:

$(function() { 
    // 菜单绑定事件 
    initMenuListener(); 
    // 下拉菜单绑定事件 
    initSubMenuHover(); 
    // 下拉菜单颜色改变 
    initSubMenuLiHover(); 
}); 
/**
 * 头部菜单绑定滑过事件
 */ 
function initMenuListener() { 
    $(“.menuli”).hover(function() { 
        var hideDivId = $(this).attr(“id”) + “_div”; 
        // 得到菜单的位置 
        var left = $(this).offset().left; 
        var top = $(this).offset().top; 
        var height = $(this).outerHeight();//outerHeight是获取高度,包括内边距,height是也是获取高度,不过只包括文本高度 
        $(“#” + hideDivId).show(); 
        $(“#” + hideDivId).css(“left”, left); 
        $(“#” + hideDivId).css(“top”, top + height); 
    }, function() { 
        // 将原来的菜单隐藏 
        $(“.display”).hide(); 
    }); 

/**
 * 下拉菜单绑定事件
 */ 
function initSubMenuHover() { 
    $(“.display”).hover(function() { 
        $(this).show(); 
    }, function() { 
        $(this).hide(); 
    }); 

/**
 *  下拉菜单改变颜色
 */ 
function initSubMenuLiHover() { 
    $(“.redli”).hover(function() { 
        $(this).addClass(“redcolor”); 
    }, function() { 
        $(this).removeClass(“redcolor”); 
    }); 

效果如下:

小伙伴们使用的时候自己美化下,自由扩展下就可以用到自己的项目中了,我这里仅仅是简单做了点样式而已。


推荐阅读
  • 为了满足专业设计师的需求,我需要一个工具,能够将使用JQuery构建的动态页面转换为纯静态HTML,而无需引用任何JavaScript文件。该工具应具备模拟当前页面的功能,以确保在开发和测试过程中保持页面的完整性和一致性。此外,该工具还应支持高效的页面调试和优化,以便设计师能够快速验证和调整页面布局及样式。 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • jQuery学习笔记:深入理解事件委派(2014年8月3日)
    在jQuery中,事件委托机制主要通过`closest()`方法实现。该方法用于查找与指定选择器匹配的最近祖先元素,从当前元素开始逐级向上遍历DOM树。这一技术不仅提高了代码的效率,还能有效处理动态生成的元素。参考资料:jQuery遍历方法详解。 ... [详细]
  • 构建顶级PHP博客系统:实践与洞见
    构建顶级PHP博客系统不仅需要扎实的技术基础,还需深入理解实际应用需求。本文以Zend Studio为开发环境,MySQL作为数据存储,Apache服务器为运行平台,结合jQuery脚本语言,详细阐述了从环境搭建到功能实现的全过程,分享了开发PHP博客管理系统的宝贵经验和实用技巧。 ... [详细]
  • $apply() 方法允许从 AngularJS 框架外部触发表达式的执行,确保其在 AngularJS 的上下文中运行。例如,当你使用 `setTimeout()` 或者集成第三方库时,可以通过调用 `$apply()` 来确保事件更新能够被 AngularJS 检测到并触发脏检查机制,从而实现数据的双向绑定。这一过程不仅保证了数据的一致性,还提升了应用的响应速度和用户体验。 ... [详细]
  • 本文探讨了提升项目效能与质量的综合优化策略。通过系统分析项目管理流程,结合先进的技术手段和管理方法,提出了多项具体措施,旨在提高项目的执行效率和最终交付质量。这些策略包括但不限于优化资源配置、加强团队协作、引入自动化工具以及实施持续改进机制,为项目成功提供了坚实的保障。 ... [详细]
  • 前言  在探讨浮动和定位的过程中,经常会遇到文档流的概念。为了更深入地理解这些布局技术,本文详细介绍了文档流和DOM(文档对象模型)。正文  DOM可以视为HTML页面中所有元素和内容组成的树形结构,它为JavaScript提供了操作页面元素的接口,使开发者能够动态地修改页面内容和样式。通过掌握文档流和DOM,开发者可以更灵活地控制页面布局和交互效果。 ... [详细]
  • 本研究提出了一种方法,用于判断两个数组中的元素是否相同,而不考虑其顺序。该方法通过检查数组中每个元素的出现次数来实现。具体实现如下:首先验证输入参数是否为数组,然后对两个数组进行排序并逐个比较元素。若所有元素均相等,则返回 `true`,否则返回 `false`。此方法适用于需要忽略顺序的数组比较场景。 ... [详细]
  • 在基于.NET框架的分层架构实践中,为了实现各层之间的松散耦合,本文详细探讨了依赖注入(DI)和控制反转(IoC)容器的设计与实现。通过合理的依赖管理和对象创建,确保了各层之间的单向调用关系,从而提高了系统的可维护性和扩展性。此外,文章还介绍了几种常见的IoC容器实现方式及其应用场景,为开发者提供了实用的参考。 ... [详细]
  • 在多堆石子游戏中,通过分析Nim博弈策略,探讨了如何在限定时间和内存条件下实现最优解。本文详细研究了石子游戏中的数学原理和算法优化方法,旨在为参与者提供有效的策略指导。具体而言,文章讨论了不同堆数下的Nim值计算及其应用,帮助玩家在复杂的博弈环境中取得优势。 ... [详细]
  • 在Python编程中,探讨了并发与并行的概念及其区别。并发指的是系统同时处理多个任务的能力,而并行则指在同一时间点上并行执行多个任务。文章详细解析了阻塞与非阻塞操作、同步与异步编程模型,以及IO多路复用技术的应用。通过模拟socket发送HTTP请求的过程,展示了如何创建连接、发送数据和接收响应,并强调了默认情况下socket的阻塞特性。此外,还介绍了如何利用这些技术优化网络通信性能和提高程序效率。 ... [详细]
  • ASP11:深入解析与应用展望本文详细探讨了 ASP11 中的 `AppRelativeTemplateSourceDirectory` 属性,该属性用于获取或设置包含控件的 Page 或 UserControl 对象的应用程序相对虚拟目录。此外,文章还介绍了 1.0 版本中的 Binding 机制,分析了其在实际开发中的应用和优化方法,为开发者提供了全面的技术指导。 ... [详细]
  • 在Mac平台上通过终端操作完成MySQL的启动与彻底关闭——八步指南
    在Mac平台上,通过终端操作实现MySQL的启动与完全关闭,本文提供了一套详细的八步指南。首先,在Finder中使用快捷键进入 `/usr/local` 目录,找到并进入 `mysql` 文件夹。接着,右键选择该文件夹并从上下文菜单中打开终端。在终端中,输入并执行 `./scripts/mysql_install` 命令以开始安装或初始化过程。后续步骤将指导用户如何顺利启动和安全关闭MySQL服务,确保系统资源的有效管理。 ... [详细]
  • C++ STL 常见函数应用详解与实例解析
    本文详细解析了 C++ STL 中常见函数的应用,并通过具体实例进行说明。特别地,文章对迭代器(iterator)的概念进行了深入探讨,将其视为一种将迭代操作抽象化的工具,便于在不同容器间进行元素访问和操作。此外,还介绍了迭代器的基本类型、使用方法及其在算法中的应用,为读者提供了丰富的实践指导。 ... [详细]
  • jQuery Flot 数据可视化插件:高效绘制图表的专业工具
    jQuery Flot 是一款高效的数据可视化插件,专为绘制各种图表而设计。该工具支持丰富的图表类型和自定义选项,适用于多种应用场景。用户可以通过其官方网站获取示例代码和下载资源,以便快速上手和使用。 ... [详细]
author-avatar
天高云淡-tgyd
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有