热门标签 | 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”); 
    }); 

效果如下:

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


推荐阅读
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社区 版权所有