原生JS之淘宝下拉菜单案例

最新推荐文章于 2022-12-27 19:23:32 发布
最新推荐文章于 2022-12-27 19:23:32 发布
阅读量535 收藏 4
点赞数
文章标签： js javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HU_LILI/article/details/115314580
版权

**

原生JS之淘宝下拉菜单案例

**

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
				
			}
			a{
				text-decoration: none;
				font-size: 14px;
			}
			.nav{
				
				margin: 100px;
			}
			.nav>li{
				position: relative;
				float: left;
				width: 90px;
				height: 40px;
				text-align: center;
			}
			.nav li a {
				display: block;
				width: 100%;
				height: 100%;
				line-height: 40px;
				color: #333;
			}
			.nav li a:hover{
				background-color: #eee;
			}
			.nav li ul{
				display: none;
				position: absolute;
				top: 40px;
				left: 0;
				width: 100%;
				border-left: 1px solid #FECC5B;
				border-right: 1px solid #FECC5B;
			}
			.nav ul li {
			    border-bottom: 1px solid #FECC5B;
			}
			.nav ul li a:hover{
				background-color:  #FFF5DA;
			}
		</style>
		
	</head>
	<body>
	<ul class="nav">
		<li>
			<a href="">我的淘宝</a>
			<ul>
				<li><a href="">已买到的宝贝</a></li>
				<li><a href="">已卖出的宝贝</a></li>
			</ul>
		</li>
		<li>
			<a href="">收藏夹</a>
			<ul>
				<li><a href="">收藏的店铺</a></li>
				<li><a href="">收藏的宝贝</a></li>
			</ul>
		</li>
		<li>
			<a href="">商家支持</a>
			<ul>
				<li><a href="">商家入驻</a></li>
				<li><a href="">商家中心</a></li>
				<li><a href="">商家品控</a></li>
			</ul>
		</li>
	</ul>
	<script type="text/javascript">
		var nav = document.querySelector('.nav');			//获取导航栏元素
		var lis = nav.children;								//获取导航栏中小li元素
		for(var i = 0; i < lis.length; i++){				//遍历每个li
			lis[i].onmouseover = function(){				//给每个li绑定鼠标经过事件
				this.children[1].style.display = 'block'	//经过li时让里面的第二个孩子ul显示
			}
			lis[i].onmouseout = function(){					//给每个li绑定鼠标离开事件
				this.children[1].style.display = 'none	'	//离开li时让里面的第二个孩子ul隐藏
			}
		}
	</script>
	</body>
</html>
WSR712
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS实现导航下拉菜单效果
11-27
这个导航下拉菜单需要实现的功能是：下拉菜单的宽度与浏览器视口的宽度一样宽；一级导航只有两项，当鼠标移到一级导航上的导航项时，相应的二级导航出现。在本案例中通过改变二级导航的高度来实现二级导航的显示和...
JavaScript实现下拉菜单操作
weixin_45650502的博客
09-23 3272
JavaScript实现下拉菜单操作 案例分析： （1）该操作分为两个部分，导航栏和下拉菜单部分，因此需要使用嵌套，一共使用两对ul和li标签，外面的ul构成导航栏框架，在li里面一一对应另一对ul和li,在内层中书写对应的下拉菜单项； （2）在导航栏中，每个li都需要添加鼠标经过效果，因此需要用到循环注册鼠标事件； （3）核心思想：添加点击事件，当鼠标经过 li 里面的第二个孩子（内层的ul)时，使ul显示出来，当鼠标离开时，再将对应的ul隐藏起来。 完整代码如下： <!DOCTYPE html&g
js实现淘宝选项卡效果方法二
JackieDYH的博客
03-25 618
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tabchange</title> <style type="text/css"> div { width: 200px; height: 200px; ...
JS基础-下拉菜单案例
qq_43781887的博客
04-18 4829
要实现的效果： 整体思路： 1.布局思路：我外面用了一个大div包裹，里面是ul里面4个li，每个li里面包括上面的a标签和下面的ul列表，下面的ul列表包含3个li。下面的ul采用的是绝对定位。 2.功能实现思路：首先获取元素，获取的是上面的4个li元素，给每个li一个onmouseover事件，然后移动到li的时候就先干掉所有人把当前li的第二个子元素节点显示出来（也就是下面那个列表）。 完整代码： <!DOCTYPE html> <html lang="en">
仿淘宝下拉菜单栏
Smile1552911411的博客
11-01 422
仿淘宝下拉菜单栏
淘宝首页之导航条——弹出式悬浮菜单
dasiy_j的博客
05-12 5421
昨天学习了布局，今天就要来做弹出式导航条。1.鼠标放到一级菜单上时二级菜单显示，鼠标移开二级菜单隐藏。2.打算为二级菜单设置一个div，不同的一级菜单显示不同的内容。（调试了好久，因为innerHTML）。3.本来打算用事件委托来实现上述需求，但是mouseout和mouseover4.关于高亮，在一级和二级菜单的区域里一级菜单都要高亮...
JavaScript（js）网页--下拉菜单制作
热门推荐
Dreamer
11-19 1万+
JavaScript（js）网页–下拉菜单制作 在网页的设计中，经常会出现二级下拉菜单，当鼠标经过时，显示二级菜单，鼠标离开时隐藏。例如新浪网 鼠标放到微博、博客或邮箱上面时，会出现一个二级菜单，鼠标离开则隐藏。 设计简单的下拉菜单栏 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt
50款原生js案例（绝美整合）
10-26
这个“50款原生js案例（绝美整合）”集合了作者半年的辛勤整理，包含了各种JavaScript插件和效果，旨在帮助开发者们提升技能，找到灵感。下面我们将深入探讨这些标签所代表的知识点，并对每个部分进行详细的阐述。 ...
案例：新浪下拉菜单.html
06-09
仿js新浪下拉菜单，点击导航栏出现下边相关的内容，主要是通过对元素节点的操作来实现，主要是原生的js写出来的
原生js新浪游戏频道导航条下拉二级菜单列表代码
11-19
为了让下拉菜单有平滑的过渡效果，可以使用CSS来处理。例如，添加以下样式： ```css .dropdown { display: none; /* 默认隐藏 */ transition: all 0.3s ease; /* 添加过渡效果 */ } .nav li:hover .dropdown { ...
jQuery实现下拉菜单.
04-14
使用jQuery制作的一个下拉菜单，可以直接使用，使用的时候，建议将对应大文件放在指定的位置上，并修改link和script标签中的地址
用js和DIV制作导航菜单及下拉菜单,很简单的代码
09-08
用js和DIV制作导航菜单及下拉菜单,很简单的代码
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
10-18
下面小编就为大家分享一篇JS实现点击下拉菜单把选择的内容同步到input输入框内的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js简单下拉菜单
12-16
js实现简单的下拉菜单
自定义js下拉菜单
04-22
html 的 select 控件操作时，会被360杀毒软件监控，操作时会弹出一个警示窗口，影响用户的操作体验。而 button 或者 input 控件的点击则不受360的监控。因此，本作者利用 <div> <input text>控件设计了一歀 js 下拉菜单，避免了360监控弹出的警示窗口，使得用户的操作体验流畅多了。
静态网页，原生代码制作，有三级下拉菜单
09-16
创建下拉菜单需要用到`<select>`标签，但在这个案例中，我们不是用`<select>`而是通过HTML的`<ul>`（无序列表）和`<li>`（列表项）配合CSS来实现更为复杂的三级下拉菜单效果。例如： ```html <li><a href="#">一...
js实现淘宝右侧导航栏功能
SqlloveSyn的博客
12-27 531
模拟淘宝右侧导航栏
dom练习题9（下拉菜单）
qq_45827064的博客
05-17 299
```bash <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti.
使用js实现简单的下拉菜单
qq_52622178的博客
08-05 5584
全部代码如下，详细注释已在代码注释中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
用小程序原生写一个下拉菜单
最新发布
05-26
好的，以下是一个简单的小程序原生下拉菜单实现示例： ```html <view class="select-box" bindtap="showSelect"> <view class="select-value">{{selectedValue}}</view> <view class="select-arrow"></view> </view> <view class="select-items" hidden="{{!showSelectItems}}"> <view class="select-item" wx:for="{{options}}" wx:key="{{index}}" bindtap="selectItem">{{item}}</view> </view> ``` ```css .select-box { display: flex; align-items: center; justify-content: space-between; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .select-value { font-size: 16px; } .select-arrow { width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #999 transparent transparent transparent; } .select-items { position: absolute; top: 45px; left: 0; right: 0; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; z-index: 999; } .select-item { padding: 10px; font-size: 16px; color: #333; text-align: center; border-top: 1px solid #ccc; } .select-item:first-child { border-top: none; } ``` ```js Page({ data: { options: ['选项一', '选项二', '选项三'], selectedValue: '', showSelectItems: false }, showSelect: function () { this.setData({ showSelectItems: !this.data.showSelectItems }); }, selectItem: function (e) { this.setData({ selectedValue: e.currentTarget.dataset.value, showSelectItems: false }); } }) ``` 这个示例中，我们通过一个 `select-box` 容器来展示当前选中的值和下拉箭头图标，点击该容器时会触发 `showSelect` 函数来显示或隐藏下拉菜单。下拉菜单的选项通过 `options` 数组来定义，每个选项都会被渲染成一个 `select-item` 元素，在点击其中的一个选项时会触发 `selectItem` 函数来更新当前选中的值并隐藏下拉菜单。CSS 样式中使用了一些基本的布局和样式，可以根据实际需要进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值