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 15 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
vue实现通讯录功能
Jul 14 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
PHP的基本常识小结
2013/07/05 PHP
php生成excel列序号代码实例
2013/12/24 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
JS跨域总结
2012/08/30 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
vue组件与复用详解
2018/04/08 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
python类继承用法实例分析
2014/10/10 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
python获取list下标及其值的简单方法
2016/09/12 Python
django 修改server端口号的方法
2018/05/14 Python
详解Python中的路径问题
2020/09/02 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
python 如何实现遗传算法
2020/09/22 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
python lambda的使用详解
2021/02/26 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
澳大利亚家具商店:Freedom
2020/12/17 全球购物
校园公益广告语
2014/03/13 职场文书
年终晚会主持词
2014/03/25 职场文书
身边的榜样活动方案
2014/08/20 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python