导航菜单

原创 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>


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


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

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



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

Winform 导航菜单的方法

http://blog.163.com/kunkun0921@126/blog/static/169204332201171610619611/ 第一种:使用OutlookBar第三方控件 ...
  • mituan1234567
  • mituan1234567
  • 2014年02月08日 14:37
  • 1041

jquery css3实现的环形导航菜单

分享一段代码实例,它实现了环形导航菜单功能。 默认情况下,导航菜单是层叠的,点击就可以将它们展开。 代码实例如下: 00100200300400500600700800901001101...
  • Return_KB
  • Return_KB
  • 2018年01月17日 15:16
  • 21

45个jQuery效果的导航菜单和教程

正如我们所知道的,一个新用户访问一个网站时,决定他们去留的关键是最初的15-20秒种。这是至关重要的,你必须遵循统一的风格来设计您的网站,特别是导航的风格,可能性规则,让用户可以轻松地找到他们想要的内...
  • zhenyuanjie
  • zhenyuanjie
  • 2012年09月20日 15:01
  • 2070

js实现简单的隐藏导航菜单动态显示

js实现简单的隐藏导航菜单动态显示
  • TuFu_ooo
  • TuFu_ooo
  • 2017年10月16日 15:32
  • 240

导航菜单

导航菜单 body,td,th {     font-family: Tahoma, Verdana, Arial, sans-serif;     font-size: 12px;   ...
  • u012040899
  • u012040899
  • 2013年09月08日 22:53
  • 137

Easyui-accordion+tree漂亮的菜单导航

转载地址:https://www.cnblogs.com/ymnets/p/3824368.html 系列目录 本节主要知识点是easyui 的手风琴加树结构做菜单导航 有园友抱怨原...
  • Gavid0124
  • Gavid0124
  • 2018年01月20日 10:45
  • 96

自动生成导航栏和菜单的解决方案

自动生成导航栏和菜单的解决方案   系统是常见的左右结构的系统,左边是bootstrap的菜单,右边是内容页,内容页的顶部是导航,以前的做法是直接和菜单导航栏在页面里写死,但是后期改起来很不方便,后来...
  • zw521cx
  • zw521cx
  • 2017年04月17日 23:46
  • 717

asp.net二级菜单导航 实例

.aspx代码如下: $(document).ready(function () { $("a.m0").mouse...
  • yayun0516
  • yayun0516
  • 2014年12月08日 22:07
  • 2515

jquery+css+jsp实现下拉导航菜单

先是jsp(部分)    要闻        新浪新闻 搜狐新闻 腾讯新闻            博客        新浪博客 ...
  • szjyy007
  • szjyy007
  • 2011年12月09日 11:35
  • 1498

用css实现了一个精致的纵向导航菜单

纵向导航菜单  #course { border-width:0px 1px 1px 1px; border-style:solid; border-color:#f3c3f3; width:120p...
  • zhangxiaoxiang
  • zhangxiaoxiang
  • 2007年10月12日 07:50
  • 13500
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:导航菜单
举报原因:
原因补充:

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