js实现导航栏上下动画效果

一、js实现导航栏上下动画效果

为了实现导航栏的上下动画效果，本文提供了一个具体的JavaScript代码示例。首先，我们来看HTML布局部分，导航栏由多个div组成，每个div包含一个链接和一个可上下移动的em元素。鼠标悬停在链接上时，em元素将上下移动。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" type="text/css" href="css/common.css">

<script src="js/move.js"></script>

<script src="js/common.js"></script>

<title>导航栏动画效果示例</title>

<div><a href="javascript:;" class="a01"></a><em>关于</em><span></span></div>

<div><a href="javascript:;" class="a02"></a><em>招聘</em><span></span></div>

<div><a href="javascript:;" class="a04"></a><em>产品</em><span></span></div>

<div><a href="javascript:;" class="a03"></a><em>公司</em><span></span></div>

接下来，我们来看CSS样式部分，样式主要针对导航栏的布局和视觉效果进行了定义，如背景图片、边距、颜色等。

*{margin: 0;padding: 0;}a{text-decoration: none;}body{background-color:#c1c1c1;}#box{width: 880px;margin: 100px auto;overflow: hidden;}#box div{width: 200px;height: 100px;float: left;overflow: hidden;position: relative;}#box div a{position: absolute;left: 0;top: 0;width: 200px;height: 100px;display: block;background: url(../images/1.jpg) no-repeat;}#box div span{display: block;width: 200px;height: 100px;position: absolute;background: url(../images/window.png) left top repeat-x;}#box div em{display: block;width: 100%;height: 100%;background-color:#999;position: absolute;text-align: center;line-height: 100px;font-family: Verdana;font-style: normal;font-size: 30px;color: white;text-shadow: 2px 1px 4px black;top: 0;}#box div a.a01{background-position: 0 5px;}#box div a.a02{background-position:-200px 5px;}#box div a.a03{background-position:-400px 5px;}#box div a.a04{background-position:-600px 5px;}

最后，我们通过JavaScript代码实现了导航栏的动画效果。当鼠标悬停在链接上时，em元素将上下移动，离开时则回到初始位置。

window.onload=function(){var oDiv= document.getElementById('box');var aDiv= oDiv.getElementsByTagName('div');var aEm= oDiv.getElementsByTagName('em');for(var i=0;i<aDiv.length;i++){aDiv[i].index= i;aDiv[i].onmouseover= function(){startMove(aEm[this.index],{top:-aEm[this.index].offsetHeight})}aDiv[i].onmouseout= function(){startMove(aEm[this.index],{top:0})}}}

以上就是本文的全部内容，希望能够帮助大家更好地理解如何实现导航栏的上下动画效果，也希望大家多多支持自由互联。

二、网页设计中导航栏须知的十大事项

1、千万不要太花哨，它属于功能物件，喧宾夺主就不好了。

2、导航不多的情况下，一般就只有一排，横竖都可以，但其实如果考虑到美观，栏目超过6个就可以考虑用两排。

3、如果遇到导航栏目很多的情况，设计师也可以进行多排，甚至可以使用不规则的多排(一排个数不同，或长度不同)。商业设计或门户站点通常都会有很多子栏目，设计起来，设计师就要考虑到横向双排的方式。使用竖排，会占用太大空间。多排排版时要考虑导航条的直观和美观。

4、为了更好地进行网站优化，导航的锚文本中可以考虑包含关键词。但这里注意的是包含关键词，不是不要堆砌关键字，2-4个字就足够了。

5、通常内容不多的情况下，可能无所谓栏目，站点就包括了导航的具体内容。

6、导航层次的设计。好的导航层次最多不会超过四层，以三层为最佳。但在百度收录过程中，比较注重首页，与首页越近的网页最容易被收录。所以，在设计过程中，一定要在网站规模与用户体验中做好平衡。

7、双排导航未必要挨在一起，可以自由一些，如：上排有导航栏，图片分隔开后则另起一排。

8、图片式导航，很漂亮，占用页面空间比较大。如每一个图像就是一个点击热点。

9、内容很丰富的站点，可以考虑使用快捷导航，即Frame框架快捷导航，是因为不管你进入哪个页面都可以快速跳跃到另外的栏目，不会失去方向。

10、利用DHTML、JS、动态隐藏层等技术实现的多变化的导航，都有浏览器的支持问题。建议大家不用。另外，不是所有的网站都有导航的。大家可根据自己情况而定。

关于网页设计中导航栏须知的十大事项，青藤小编就和您分享到这里了。如果您对互联网营销有浓厚的兴趣，希望这篇文章可以为您提供帮助。如果您还想了解更多关于广告营销文案写作、文案优化的方法及素材等内容，可以点击本站的其他文章进行学习。

三、网站建设中导航栏怎么设计

网站的导航栏也为是网站的精髓，用户浏览我们的网站就是根据我们的导航栏的指引来一步一步了解我们网站的，那么网站建设中导航栏怎么设计?

众所周知，网站建设成功与否与用户体验成功是否良好细细相关。那么怎样的网站建设才能最大限度的提升用户体验呢?网站设计层次还是网站内容?这两者随所必不可少，但更容易忽略的部分还是网站导航的设计规划，只有首先有效地调整了网站导航才能对用户体验有益。

网站栏目导航除了增加动态或JS代码之外，必须要有文字链接，这对提升网站对SEO的友好性、排名及权重至关重要。如果只注重前者，档次提高了，但这些代码是不利于搜索引擎收录的，进而对整个网站的发展都十分不利。

网站主栏目导航需要注意之外，底部的辅助导航也至关重要，因为百度蜘蛛爬行一般比较喜欢上下两处地方，所以这些地方放些辅助导航对提升相当关键词权重也是有利的。像有些网站就是在下面放一些企业需要推广的目标关键词，因为这些地方对网站的优化也是比较有利了。

网站内页路径定位导航与上下两处地方的导航一样重要，这对用户起到一定的指示标的作用，而且这对搜索引擎来说也是比较友好的做法，有利于提升网站的收录和权重。

从以上几点可以看出，企业网站不是谁都可以随便来建设的。网站导航的重要性不仅体现在用户体验上，而且对搜索引擎的友好度，对提升网站排名和权重方面也至关重要。为了实现网站的长远发展，一定要从细节出发，注重网站各导航的重要性，从整体提升网站质量，更好地吸引用户!

以上就是网站建设中导航栏设计的技巧。