您的位置：首页 > Web前端 > JavaScript

JS实现导航栏

2016-06-05 20:48 381 查看

使用js实现一个简单的导航栏。利用js实现某种效果的步骤：1.实现CSS布局；2:js的实现原理；3.写CSS代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
ul {
padding:0px;
margin:0px;
list-style:none;

}

a {
text-decoration:none;
background-color:#f1f1f1;
display:block;
width:50px;
text-align:center;
}

.list {
display:none;

}

ul ul{
width:140px;
border:solid #000 1px;
position:absolute;

}

ul ul li {
text-align:center;

}

.item {
position:relative;
}

</style>
</head>
<body>
<ul>
<li class="item" id="item">
<a href="#" id="link">微博</a>
<ul class="list" id="list">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>

</li>
</ul>
</body>
<script>
var link = document.getElementById("link");
var item = document.getElementById("item");
var list = document.getElementById("list");
item.onmouseover = show;
item.onmouseout = hide;
function show(){
list.style.display = "block";
link.style.background = "yellow";
}

function hide(){
list.style.display = "none";
}
</script>
</html>

js从视线中移除某个元素的方法：

(1)display:none;(不占用文档流)

(2)visibility:hidden;(隐藏某个元素，仍然占用文档流)

(3)透明度设置为0，即为opacity:0;(IE浏览器中，透明度可以这样设置 filter:alpha(opacity=0)；)

(4)设置margin值，例如设置margin值为负值

(5)通过overflow:hidden;和相对定位，改变left,和top值移动元素的位置

(6)通过一个白色的div，把这个覆盖在上面的div移除。

……

js中的事件:鼠标事件，键盘事件，系统事件，表单事件，自定义事件等等。常见的鼠标事件有:onmouseover,onmouseout,onmousemove,onclick,onmounseup,mounsedown等等。函数的调用方式：事件调用，匿名调用，直接调用.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 导航

相关文章推荐

新的分享

章节导航