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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
jquery.validate使用详解
2016/06/02 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
原生JS实现N级菜单的代码
2017/05/21 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
node中的session的具体使用
2018/09/14 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
使用Python设计一个代码统计工具
2018/04/04 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
如何进行有效的自我评价
2013/09/27 职场文书
库房保管员岗位职责
2014/04/07 职场文书
视光学专业自荐信
2014/06/24 职场文书
销售顾问工作计划书
2014/08/15 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
餐馆开业致辞
2015/08/01 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技