导航菜单

导航菜单的应用最常见，几乎每个电商、企业门户网站都会用到，网上也有很多的框架像 Bootstrap 之类的，这里根据经验老说一下菜单样式调好之后，添加<a>标签调整到新的页面时，之前在静态页面上调好的鼠标掠过掠出后的样式如何在新加载的页面上实现点中效果。当然如果是头部导航部分是分开在每个页面里写的就好办了，但是通常我们都是将一个程序公用的部分抽象分离出来，使用的时候作为引用导入，这样好处是维护起来方面，修改的时候只需要修改一个地方就好了，而不用到每个页面里都修改一遍。

公用导航头文件的调用方式：

jsp 的引入方式：<jsp:include page="menu.jsp"/>

html 可以用jquery的load方法实现：

<script type="text/javascript">
$(document).ready(function(){
$("#header").load("header.html","",function(){
   //导航菜单
   sel_menu("4");

});
</script>

<header id="header"></header> 

公用的导航菜单文件：

<style>
#menu{height:50px;}
#menu li{
   list-style:none; float:left; width:100px; line-height:50px; text-align:center;
}
</style>

<ul id="menu">
                <li><a <id="m1" href="index.html">首页</a></li>
                <li><a id="m2" href="page2.html">页面2</a></li>
                <li><a id="m3" href="page3.html">页面3</a></li>
                <li><a id="m4" href="page4.html">页面4</a></li>
</ul>

设置好鼠标掠过掠出的样式，如何在点击链接跳转到相应新页面之后变成对应菜单的选中状态，解决办法：

在公用导航文件中添加一个点击菜单选中样式的方法：

 
<script type="text/javascript">
function sel_menu(sid){ 
for(var i=1;i<5;i++){
if(i==sid){
$("#m"+sid).attr("class","selected_menu");
}else{
$("#m"+i).removeClass("selected_menu");
}
}  
}
</script>

然后在每个对应页面传参数即菜单id调用这个方法。

<style>
<script type="text/javascript">
//导航菜单
sel_menu("1");

</script>

公用头文件 链接跳转新页面 菜单样式动态改变的实现思路就是这样的，当然还有其它的实现方法。

记录生活小心得点点滴滴！

不要因为忙于奔波生活而忘却了自己也是个沿途看风景的人！