付费节点推荐

免费节点

节点使用教程

文章简介

很多前端的同学在最初学习html/css/javascript的时候，都会去模仿学习各大名站，例如淘宝京东等电商网站，今天这是我前不久做的仿京东的大菜单，我觉得做的很满意(样式上)，强迫症表示看得很爽0.0，于是决定提供出来，想用的拿去吧。

图片预览

预览&下载

点击预览     点击下载

使用&箴言

这个菜单没有使用任何的js,仅仅通过一行代码，即可实现菜单的显示隐藏

.sidenav ul li:hover > .secmenubox{
	display:block;
}

当然，也可以通过原生的js来实现，代码如下，很容易看懂0.0，js部分在源代码中注释掉了，大家可以进行测试

window.onload = secmenu;
function secmenu(){
	var nav = document.getElementsByClassName('sidenav')[0];
	var li = nav.getElementsByTagName('li');
	for(var i=0;i<li.length;i++){

		li[i].onmouseover = function(){
			var secmenubox = this.getElementsByClassName('secmenubox')[0];
			secmenubox.style.display = "block";
		}
		li[i].onmouseout = function(){
			var secmenubox = this.getElementsByClassName('secmenubox')[0];
			secmenubox.style.display = "none";
		}
	}
}

未经允许不得转载：Bcoder资源网 » 【原创】纯CSS制作京东商城菜单

相关推荐