jQuery实现菜单栏导航效果


Posted in jQuery onAugust 15, 2017

本文实例为大家分享了jQuery实现菜单栏导航效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
  *{
   padding: 0px;
   margin: 0px;
  }
   #top{width: auto;height: 30px;background: #eee;position: relative;}
   #top li{float: left;
     text-align: center; 
     width: 80px;
     height:30px;
     line-height:30px;
     list-style: none;
    }
    /*设置位置*/
   .position{
    position: absolute;
    border: 1px solid #ccc;
    top:30px;
    padding: 3px;
    font-size: 15px;
    display: none;
   }
   .shoucang{width: auto;left: 10px;}
   .sell{width: auto;left: 70px;}
   .customer{width: auto;left: 180px;}
   .bg{background-color: #DDA0DD;cursor: pointer;}
  </style>
  <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
  <script>
   $(function(){
    $(".li1").hover(function(){
     $(".shoucang").show();/*显示收藏的菜单内容*/
     $(".customer,.sell").hide();/*隐藏其他的菜单内容*/
    },function(){
     $(".shoucang").hide();/*鼠标离开,收藏的菜单内容隐藏*/
    });
    $(".li2").hover(function(){
     $(".sell").show();
     $(".customer,.shoucang").hide();
    },function(){
     $(".sell").hide();
    });
    $(".li3").hover(function(){
     $(".customer").show();
     $(".shoucang,.sell").hide();
    },function(){
     $(".customer").hide();
    });
    $("#top div").hover(function(){/*鼠标放置在div位置上,显示下拉菜单*/
     $(this).show();
    },function(){/*鼠标离开在div位置上,隐藏下拉菜单*/
     $(this).hide();
    });
    $(".sell p,.shoucang p,.customer p").bind("mouseover",function(){
     $(this).addClass("bg");
    });
    $(".sell p,.shoucang p,.customer p").bind("mouseout",function(){
     $(this).removeClass("bg");
    });
   });
  </script>
 </head>
 <body>
  <div id="top">
   <ul>
    <li class="li1">收藏夹</li>
    <li class="li2">卖家中心</li>
    <li class="li3">联系客服</li>

   </ul>
   <div class="shoucang position">
    <p>收藏的宝贝</p>
    <p>收藏的店铺</p>
   </div>
   <div class="sell position">
    <p>免费开店</p>
    <p>已出售的报宝贝</p>
    <p>出售中的报宝贝</p>
    <p>卖家服务市场</p>
   </div>
   <div class="customer position">
    <p>消费者客服</p>
    <p>卖家客服</p>
   </div>
  </div>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 #jQuery
使用jQuery实现购物车结算功能
Aug 15 #jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 #jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 #jQuery
jQuery实现手势解锁密码特效
Aug 14 #jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 #jQuery
jQuery:unbind方法的使用详解
Aug 14 #jQuery
You might like
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python实现Kmeans聚类算法
2020/06/10 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python队列Queue的详解
2019/05/10 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
优秀应届毕业生自荐信
2013/11/16 职场文书
大学专科生推荐信范文
2013/11/23 职场文书
公司办公室岗位职责
2014/03/19 职场文书
《分一分》教学反思
2014/04/13 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python