第四篇 bonus：js代码实现网页导航二级菜单

第四篇 bonus：js代码实现网页导航二级菜单

由于小猪蹄子说想学习一些和爬虫相关的东西，所以我让她去看看requests这个库，非常的人性化，可以非常方便的实现常用的爬虫功能。但是小猪蹄子看了以后表示一头雾水，不知到自己从网站上扒下来的是什么，甚至还吐槽是网页乱码。经过讨论，我发现是因为她完全没有网页制作的基础知识，对于html一无所知，所以呢建议完全零基础的同学们在学习爬虫的时候需要先了解一下网页的结构，并且自学一点html，css什么的。这里给大家推荐一些w3cschool，对于入门而言还是非常好的，网址贴在下面。
http://www.w3school.com.cn/html/html_jianjie.asp
在我们的博客中也会更新一些与网页制作相关的东西作为bonus。由于我的老板看我骨骼精奇，决定让我管理一下弊组的网站，于是我就从零开始，学了一些相关的东西。本文就来记录一下网页导航的二级菜单是怎么做的。

目的要求

我们需要制作一个导航窗口的二级菜单，并且链到不同网页的不同位置。要求只有当鼠标在一级菜单上悬浮时才显示二级菜单。我们先看看别人的二级菜单是怎么做的，比如来看看英雄联盟的主页：
https://lol.qq.com/

这个效果做得就非常好了，不过其实就是一个透明的层（div）而已，然后通过编辑css样式，设置当鼠标悬浮时（hover事件），令显示参数display等于block。代码实现可以参考别人写的博文：
https://blog.csdn.net/pangqiandou/article/details/78328279
但是这种方式要求二级菜单与导航菜单在网页结构中是父子元素关系，或者兄弟元素关系。而我接手的网页由于一些格式问题，用这种方式实现二级菜单的话样子会非常难看，所以我选择了js。利用js编写二级菜单更加灵活，不要求一级菜单和二级菜单之间有相对关系。

代码实现

Html 部分

<nav>
	<li onmouseover="funcover('导航菜单id','二级菜单id',1)" onMouseOut="funcout('导航菜单id','二级菜单id')" id="导航菜单id"><a href="超链接">导航菜单标题</a></li>
</nav>
<div>
    <ul class="submenu" id='二级菜单id' style="display:none;  margin: 0px; padding: 0px; text-align: left;"  onmouseover="funcover('导航菜单id','二级菜单id',0)" onMouseOut="funcout('导航菜单id','二级菜单id')">
    <li><a href = "超链接1">二级菜单标题1</a></li>
    <li><a href = "超链接2">二级菜单标题2</a></li>
    </ul>
</div>

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

我们先再原网页最后加上一个新的div层，并且在这个div之下，用ul表示二级菜单，并令display参数为none，即不显示。再通过OnMouseOver事件调用js函数funcover将display参数改为block，即当鼠标悬浮时二级菜单显示。当鼠标挪开时，出发OnMouseOut事件调用funcout函数再将display参数改为none，使二级菜单隐藏。

JavaScript 部分

function funcover(liid,subid,trans){
var obli=document.getElementById(liid);
var obna=document.getElementById("top");
var obsub=document.getElementById(subid);
 list = obsub.querySelectorAll('li');
 var ll = obli.getBoundingClientRect().left;
 var lt = obli.getBoundingClientRect().top+50;
 
 obsub.style.filter = "Alpha(Opacity='0')";
 obsub.style.opacity = 0.0;
 obsub.style.top=lt.toString()+"px";
 obsub.style.left=ll.toString()+"px";
 obsub.style.display="block";
 obsub.style.position="absolute";
 var i = 0;
 if (trans == 1){
 var id = setInterval(function(){
  i += 1;
  obsub.style.filter = 'Alpha(Opacity='+i.toString()+')';
  obsub.style.opacity = 0.01*parseFloat(i);
  if (i> 95){
   clearInterval(id);
   }},5)}
 obsub.style.filter = "Alpha(Opacity='95')";
 obsub.style.opacity = 0.95;
    }
    
function funcout(liid,subid){
var obli=document.getElementById(liid);
var obsub=document.getElementById(subid);
obsub.style.display="none";
}

function getElementLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}
　　　　return actualLeft;
　　}

function getElementTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualTop += current.offsetTop;
　　　　　　current = current.offsetParent;
　　　　}
　　　　return actualTop;
　　}

其中最核心的部分是对参数display的修改，其它的部分主要是对格式和位置的设置。