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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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
php获取mysql版本的几种方法小结
2008/03/25 PHP
PHP 全角转半角实现代码
2010/05/16 PHP
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
php无限级分类实现方法分析
2016/10/19 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
python dict乱码如何解决
2020/06/07 Python
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
婚纱店策划方案
2014/05/22 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
Python并发编程实例教程之线程的玩法
2021/06/20 Python
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript