导航菜单

原创 2016年08月29日 14:27:49

导航菜单的应用最常见,几乎每个电商、企业门户网站都会用到,网上也有很多的框架像 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>


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


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

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



版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery企业站二级下拉导航菜单

  • 2017年11月30日 15:35
  • 106KB
  • 下载

js实现导航菜单点击切换选中时高亮状态

通过 include() 或 require() 函数,您可以在服务器执行 PHP 文件之前在该文件中插入一个文件的内容。 除了它们处理错误的方式不同之外,这两个函数在其他方面都是相同的。 inclu...

导航菜单随动

  • 2017年10月29日 02:07
  • 178KB
  • 下载

点击隐藏汉堡菜单、单页面导航插件—jquery.singlePageNav.min.js、

单页面导航插件,就是当你点击导航条或者侧边导航的时候,页面会自动上下移动到你所点击的内容区域。1. html页面引入插件在index.html页面引入jquery.singlePageNav.min....

仿XP系统左侧导航菜单

  • 2017年04月10日 11:25
  • 77KB
  • 下载

js导航菜单

  • 2015年12月25日 14:09
  • 6KB
  • 下载

js实现导航菜单点击切换选中时高亮状态——方法二

选中当前菜单后高亮 .nav { WIDTH: 100%; HEIGHT: 60px; BACKGROUND-COLOR:#0000
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:导航菜单
举报原因:
原因补充:

(最多只允许输入30个字)