JQuery实现鼠标滑过显示导航下拉列表


Posted in Javascript onSeptember 12, 2013

当网站导航栏项目很多的时候,我们往往是将同一级目录下的栏目先隐藏起来。当用户的鼠标滑过时则显示出来。这就是用javascript实现的一个导航栏下拉列表。小编一步步给大家讲解。值得注意的是我们使用的是Javascript的一个框架Jquery来实现的。所以,你在使用的时候必须要下载Jquery。

先建立HTML代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GBK"> 
<title>Jquery test web page</title> 
<link rel="stylesheet" href="./css/layout.css" type="text/css" /> 
<script src="./js/jquery.js" type="text/javascript"></script> 
<script src="./js/basic.js" type="text/javascript"></script> 
</head> 
<body> 
<p id="it">IT业界</p> 
<ul id="ul"> 
<li>百度</li> 
<li>谷歌</li> 
<li>网易</li> 
<li>腾讯</li> 
<li>淘宝</li> 
</ul> 
</body> 
</html>

这条代码是包含Jquery库:
<script src="./js/jquery.js" type="text/javascript"></script>

这里我们将CSS和JS文件单独放在一个外部文件中。
layout.css文件的代码为:
@CHARSET "GBK"; 
body{ 
font:12px Arial,Verdana; 
} 
ul{ 
margin:0px; 
padding:0px; 
list-style-type:none; 
} 
#it{ 
margin:0px; 
width:80px; 
height:25px; 
color:white; 
text-align:center; 
line-height:25px; 
cursor:pointer; 
background:black; 
border:1px solid white; 
} 
#ul li{ 
width:80px; 
height:25px; 
color:white; 
text-align:center; 
line-height:25px; 
cursor:pointer; 
background:black; 
border:1px solid white; 
} 
.highLight{ 
width:80px; 
height:25px; 
background:white; 
border:1px solid blue; 
color:black; 
}

CSS代码大家可以根据自己喜欢的样式来设计,这里豆芽重要来解释JS文件。
$(document).ready(function (){ 
$('#ul').hide(); //打开页面隐藏下拉列表 
$('#it').hover( //鼠标滑过导航栏目时 
function(){ 
$('#ul').show(); //显示下拉列表 
$(this).css({'color':'red','background-color':'orange'}); //设置导航栏目样式,醒目 
}, 
function(){ 
$('#ul').hide(); //鼠标移开后隐藏下拉列表 
} 
); 
$('#ul').hover( //鼠标滑过下拉列表自身也要显示,防止无法点击下拉列表 
function(){ 
$('#ul').show(); 
}, 
function(){ 
$('#ul').hide(); 
$('#it').css({'color':'white','background-color':'black'}); //鼠标移开下拉列表后,导航栏目的样式也清除 
} 
); 
$('li').hover( //鼠标滑过下拉列表是改变当前栏目样式 
function(){ 
$(this).css({'color':'red','background-color':'orange'}); 
}, 
function(){ 
$(this).css({'color':'white','background-color':'black'}); 
} 
); 
});

因为目前网站编辑器的问题还无法上传图片,没有图片大家自己先到本地测试看看效果吧。
Javascript 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
VSCode搭建Vue项目的方法
Apr 30 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 #Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 #Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 #Javascript
jquery foreach使用示例
Sep 12 #Javascript
jquery 追加tr和删除tr示例代码
Sep 12 #Javascript
实现只能输入数字的input不用replace方法
Sep 12 #Javascript
jQuery 三击事件实现代码
Sep 11 #Javascript
You might like
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
简单实现php上传文件功能
2017/09/21 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
JavaScript实现滑动门效果
2020/01/18 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
Python实现微信好友的数据分析
2019/12/16 Python
Python中常见的数制转换有哪些
2020/05/27 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
环境工程专业个人求职信
2013/12/05 职场文书
销售演讲稿范文
2014/01/08 职场文书
2016年会开场白台词
2015/06/01 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers