别人家的宝贝会做的我家的宝贝也要会
号外号外!!!??
学完入门的Javascript听说就能做一些简单又好看的网页中人机交互的效果了呢~
最近学到的就能做到这种导航栏下拉菜单的效果(如下图所示):
(尴尬?居然有点糊,大家就体谅一哈~)
话不多说赶紧学起来学起来~
我们先要在HTML的<body></body>中搭好框架和<style></style>中的样式。
搭建框架的思路:
“微博”“首页”“登录”这三个是用ul=nav父盒子来装,里面下拉的内容就再用小ul装li。
<ul class="nav"> //HTML中的框架
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<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>
<li>
<a href="#">登录</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">@我</a>
</li>
</ul>
</li>
</ul>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
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>
当我们把框架都搭建好就可以利用Javascript来实现动态效果。
思路:当鼠标放在“微博”“首页”“登录”这三个li上面就能出现下拉菜单栏
<script>
// 1.
var nav = document.querySelector('.nav');
var lis = nav.children; //得到3个li --获取子结点 nav的亲儿子
for (var i = 0; i < lis.length; i++) {
//鼠标一经过就让nav里面的li的li显示出来
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}
</script>
如果在制作过程中出现了报错现象,那就要让自己注意一些细节!因为这是博主的惨痛经历得到的经验?所以各位宝贝都学会了嘛~
看完别忘了老规矩!一键三连~
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
二维码