jQuery+css实现非常漂亮的水平导航菜单效果


Posted in Javascript onJuly 27, 2016

本文实例讲述了jQuery+css实现非常漂亮的水平导航菜单效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery+css实现非常漂亮的水平导航菜单效果

用到的背景图片tab.gif如下:

jQuery+css实现非常漂亮的水平导航菜单效果

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery+css水平导航菜单</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  $("ul>li").click(function() {
    $("ul>li").each(function() { $(this).removeClass("_lishow"); });
    $(this).addClass("_lishow");
  });
});
</script>
<style type="text/css">
ul
{
  list-style-type: none;
  border: 0px blue solid;
  height: 27px;
  width: 480px;
}
ul li
{
  list-style-type: none;
  float: left;
  width: 74px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  background-color: #CCCCFF;
  background: url(../images/tab.gif);
  background-position: -74px 0px;
}
ul li:hover
{
  cursor: pointer;
}
._lishow
{
  background: url(../images/tab.gif);
  background-position: 0px 0px;
}
</style>
</head>
<body>
  <div>
    <ul>
      <li class="_lishow">Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
      <li>Menu5</li>
      <li>Menu6</li>
    </ul>
    <br />
  </div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
Js 刷新框架页的代码
Apr 13 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 #Javascript
AngularJS 指令详细介绍
Jul 27 #Javascript
js中遍历Map对象的方法
Jul 27 #Javascript
angular.js分页代码的实例
Jul 27 #Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 #Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 #Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 #Javascript
You might like
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
php中取得文件的后缀名?
2012/02/20 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
详解php的socket通信
2015/08/11 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
JavaScript基本对象
2007/01/11 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
python实现数字炸弹游戏
2020/07/17 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
教师评语大全
2014/04/28 职场文书
建议书格式
2015/02/04 职场文书
员工工作表扬信
2015/05/05 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
AngularJS实现多级下拉框
2022/03/25 Javascript
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技