使用js和jQuery搭建简单的导航效果

现在来和大家讲一下，一个很简单的实现导航的效果，那么该实现哪些效果呢？
这就是我想要说的，比如移到首页那里或者点击首页就会把隐藏的内容显示出来。
先看一下效果图：

Html：
//最大的盒子装着导航栏和隐藏的内容

<div class="clickme">
   <div class="clickli">
       <ul>
           <li id="HomePage">首页</li>
           <li>第二页</li>
           <li>第三页</li>
           <li>第四页</li>
           <li>第五页</li>
       </ul>
   </div>
   <div class="textfont" id="textfont" style="display:none;">
       <span id="myClick">点我</span>
   </div>
</div>
 

style：


Js：
用js实现鼠标移入移出事件，当鼠标移到首页的时候，蓝色盒子出现，移到蓝色盒子里面，盒子不消失，而移到蓝色盒子的外面时蓝色盒子消失，并且当点击蓝色盒子里面的“点我”的时候，蓝色盒子消失。

window.onload = function(){
	HomePage.onmouseover = function(){      //鼠标移入事件
		textfont.style.display = "block";   //蓝色盒子显示
		textfont.onmouseover = function () {   //鼠标移到蓝色盒子 
			textfont.style.display = "block";  //蓝色盒子不消失
		};
	};
	HomePage.onmouseout = function(){       //鼠标移出事件
		textfont.style.display = "none";    //蓝色盒子隐藏
		textfont.onmouseout = function () {  //鼠标移到蓝色盒子 
			textfont.style.display = "none";   //蓝色盒子消失
		};
	};
	myClick.onclick = function () {     //当点击（点我）时，蓝色盒子消失
		textfont.style.display = "none";
	};
};
而使用点击事件使用jQuery就简单一点：
$(function(){  
	$("#HomePage").click(function () {   //点击首页蓝色盒子出现
		$("#textfont").show();
	});
	$("#myClick").click(function () {    //点击（点我），盒子消失
		$("#textfont").hide();
	});
});

可能还会有更简单的写法等你去挖掘。