JQuery实现鼠标滑过显示导航下拉列表
2013-09-12 00:00
831 查看
当网站导航栏项目很多的时候,我们往往是将同一级目录下的栏目先隐藏起来。当用户的鼠标滑过时则显示出来。这就是用javascript实现的一个导航栏下拉列表。小编一步步给大家讲解。值得注意的是我们使用的是Javascript的一个框架Jquery来实现的。所以,你在使用的时候必须要下载Jquery。
先建立HTML代码
这条代码是包含Jquery库:
这里我们将CSS和JS文件单独放在一个外部文件中。
layout.css文件的代码为:
CSS代码大家可以根据自己喜欢的样式来设计,这里豆芽重要来解释JS文件。
因为目前网站编辑器的问题还无法上传图片,没有图片大家自己先到本地测试看看效果吧。
先建立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'}); } ); });
因为目前网站编辑器的问题还无法上传图片,没有图片大家自己先到本地测试看看效果吧。
相关文章推荐
- JQuery实现鼠标滑过显示导航下拉列表
- JQuery实现鼠标滑过显示下拉列表
- jQuery实现鼠标滑过遮罩并高亮显示效果
- Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
- jQuery实现动态显示select下拉列表数据的方法
- jQuery实现鼠标滑过图片时会缩小并动态显示信息的幻灯效果
- ajax+jquery+flea+smarty实现了通过选择下拉列表动态显示相应的数据
- jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
- jquery实现鼠标滑过显示二级下拉菜单效果
- jquery实现鼠标滑过显示二级下拉菜单效果
- jquery实现的固定位置下拉隐藏上拉显示悬浮导航菜单特效
- jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
- Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
- jquery图文列表鼠标点击下拉显示文字说明内容
- jQuery实现鼠标滑过遮罩并高亮显示效果
- jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
- jquery 的实现鼠标滑过显示大图