【原创】纯CSS制作京东商城菜单

文章简介

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

图片预览

article7-1
article7-2

使用&箴言

这个菜单没有使用任何的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";
		}
	}
}

共有 0 条评论

Top