jquery随笔小特效之唯品会顶部菜单栏

最新推荐文章于 2022-11-30 11:02:27 发布
最新推荐文章于 2022-11-30 11:02:27 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： js 前端网页优化 js html5 前端 文章标签： jquery js web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/viser123/article/details/50990463
版权

我感觉代码还是有点繁琐，应该可以跟简便一点的

      

      

           


<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>vip导航效果</title>
<script src="jquery-1.11.3.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}


.nav {
width: 660px;
height:30px;
background-color: #f5f5f5;
margin: 10% auto;
}


ul li {
float: left;
width: 110px;
text-align: center;
line-height: 30px;
color: #6c6c6c;
}


.xigua,.lizhi {
position: absolute;
border: 1px solid #cdcdcd;
width: 150px;
height: 130px;
left:760px;
top:190px;
z-index: -5;
display: none;
}


.xigua img {
width: 100%;
height:100%;
}


.lizhi {
width: 110px;
left:910px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>榴莲</li>
<li>橙子</li>
<li>柠檬</li>
<li class="xigua_text">西瓜</li>
<li class="lizhi_text">荔枝</li>
<li>芒果</li>
</ul>
</div>
<div class="xigua">
<img src="img/timg.jpg" alt="hh">
</div>
<div class="lizhi">
<ul>
<li>湖北荔枝</li>
<li>黄冈荔枝</li>
<li>黄梅荔枝</li>
<li>张河荔枝</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("ul > li").hover(function(){
$(this).css({
"color":"#f10582"
})
},function(){
$(this).css({
"color":"#6c6c6c",
"border":"none"
})
});
//西瓜
$(".xigua_text,.xigua").hover(function(){
$(".xigua").show();
$(".xigua_text").css({
"color":"#f10582",
"background-color":"#ffffff",
"border":"1px solid #cdcdcd",
"border-bottom":"none"
})
},function(){
$(".xigua").hide();
$(".xigua_text").css({
"background-color":"#f5f5f5",
"color":"#6c6c6c",
"border":"none"
})
});
$(".xigua").hover(function(){
$(".xigua_text").css("color","#6c6c6c")
},function(){
$(".xigua_text").css("color","#6c6c6c")
});
//荔枝
$(".lizhi_text,.lizhi").hover(function(){
$(".lizhi").show();
$(".lizhi_text").css({
"color":"#f10582",
"background-color":"#ffffff",
"border":"1px solid #cdcdcd",
"border-bottom":"none"
})
},function(){
$(".lizhi").hide();
$(".lizhi_text").css({
"background-color":"#f5f5f5",
"color":"#6c6c6c",
"border":"none"
})
});
$(".lizhi").hover(function(){
$(".lizhi_text").css("color","#6c6c6c")
},function(){
$(".lizhi_text").css("color","#6c6c6c")
});
})
</script>
</body>
</html>
viser123
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 1万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
唯品会导航栏简单制作
青柠小甜味
01-27 1965
weipinhui.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>唯品会</title> <link href="css/weipinhui.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="right"&g
jquery-typedText:一个jQuery插件，可对元素中的文本进行动画处理，以使其看起来好像正在键入
04-30
jQuery.TypedText 一个jQuery插件，可对元素中的文本进行动画处理，以使其看起来好像在键入文本。 版本 1.2.2 #Download您可以通过以下链接下载最新版本： ： 用法 < html > < head > <!-- This script tag will include the jQuery framework. --> < script type =" text/javascript " src =" https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js " > </ script > <!-- This script tag will include the Typed Text UI plugin. --> < script type =
动力商城首页（一）：仿唯品会的自定义头部导航栏（完美）
zhenghhgz的博客
07-09 1814
解决各类手机顶部自定义导航不对齐问题
唯品会首页导航分类商品爬取
qq_40908729的博客
03-21 2110
知识点：把url地址通过get方法提交数据，用params构造出来，循环发送请求，面向对象编程，代码在最下面 今天给大家分享一个通过js加载数据的一个小案例，废话不多说，分析上代码 1 f12检查源码，清空所有信息，然后把鼠标放到列表上面滑动，请求信息就出来了，分析一下请求信息，第一个信息刚好有我们需要的以及主分类名称，id ，下面全是子分类详情信息 这个id我们要提取出来，在下面构造二级子分...
大一学生WEB前端静态网页——唯品会1页 包含hover效果
11-30 1172
dreamweaver作业静态HTML网页设计模板 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
唯品会jq导航栏动态演示.rar
06-02
唯品会jq导航栏动态演示,导航栏跟随页面滚动，很实用.
jQuery顶部导航栏下拉菜单特效代码
03-20
jQuery顶部导航栏下拉菜单，鼠标经过，显示下拉菜单，排版精致。
jQuery阿里巴巴顶部导航栏下拉菜单特效代码
03-20
jQuery阿里巴巴顶部导航栏下拉菜单，阿里巴巴官网顶部导航栏，鼠标经过显示下拉二级菜单。
jquery小火箭返回顶部特效代码
03-20
jQuery唯品会鼠标悬停弹出商品代码.zip
07-04
jQuery唯品会鼠标悬停弹出商品代码是一款仿唯品会购物网站的鼠标响应式弹出图片显示商品特效。
模仿唯品会设计的静态页面
12-29
使用dreamweaver实现的模仿唯品会实现的纯css+js静态页面。
3个用jq实现的动态效果导航菜单.rar
07-10
3个用jQuery实现的动画版导航菜单，各有各的特点： 　　范例菜单一特点：用背景图实现（带圆角，注意图的做法，两张或整合成），主要用于导航栏项目文字长短不一的情况（不定宽！） 　　范例菜单二特点：用背景图或背景色来实现，导航栏项目为四字。去掉LI中宽度的设置，可用于任何长度的文字。 　　范例菜单三特点：用下划线实现，导航栏文字字数为四字，去掉或重新设置A标记中的宽度，可用于任何长度的文字
jQ Metro导航菜单特效代码
03-20
jQ Metro导航菜单是一款基于jquery实现的Metro导航菜单效果。 jQ Metro导航菜单特效演示图：
用jquery的方法制作一个简单的导航栏
01-19
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>学习导航栏的制作</title> [removed][removed] [removed] $(document).ready(function() { $(.div1).click(function() { $(.div2).addClass(dlHover); }); $(.div1).hover(function(){//第一个函数作为鼠标悬浮时执行的函数 $(thi
jquery hover顶部导航栏菜单特效代码
03-20
jquery hover顶部导航栏菜单是一款来自系统软件管理模板的导航栏菜单css样式。
jQuery实现小火箭返回顶部特效
10-15
主要为大家详细介绍了jQuery实现小火箭返回顶部特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
web网页设计期末课程大作业——基于HTML仿唯品会电商项目的设计与实现
m0_71154533的博客
08-13 800
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
Html+Css+jQuery左侧导航菜单三级联动
gly_technology的博客
01-17 1496
左侧导航菜单联动,当鼠标悬浮弹出下一级子菜单.
鼠标点击菜单栏显示 jquery
最新发布
06-10
要实现鼠标点击菜单栏显示 jQuery，你可以使用 jQuery 的 click() 方法和 toggle() 方法。 首先，你需要在 HTML 中创建一个菜单栏元素，例如： ```html 菜单 ``` 然后，你可以使用 jQuery 的 click() 方法来监听...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值