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 相关文章推荐
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
JS document form表单元素操作完整示例
Jan 13 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变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
详解Python进程间通信之命名管道
2017/08/28 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
Python序列类型的打包和解包实例
2019/12/21 Python
django 外键创建注意事项说明
2020/05/20 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
门卫班长岗位职责
2013/12/15 职场文书
健康家庭事迹材料
2014/05/02 职场文书
企业贷款委托书格式
2014/09/12 职场文书
离职信范文
2015/06/23 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
Oracle中日期的使用方法实例
2022/07/07 Oracle