导航条——收缩式导航菜单

1.概述

在网站中不仅可以设置导航条，而且还可以设置导航菜单。由于菜单内容比较多，同一页面显示比较杂乱，所以很多的设计者都采用了收缩式的菜单形式。

2.技术要点

本实例主要是应用JavaScript控制显示和隐藏表格的功能，实现收缩式导航菜单的功能。单击导航超链接，显示当前菜单的内容，隐藏上一个显示的菜单，在隐藏菜单时，让其有规律地隐藏，从而实现展开或收缩的动画效果。

3.具体实现

（1）创建index.jsp页，在页面中添加一级导航菜单项以及二级导航菜单，关键代码如下：

<tr style="CURSOR: hand"><td class="list_title" id="list1" οnmοuseοver="this.typename='list_title2';"  οnclick="change(menu1,50,list1);" onmouseout="this.typename='list_title';"  background="images/title_show.gif" height="25"><span>网站管理</span></td>
</tr>
<tr><td align="center" valign="middle"><div class=sec_menu id=menu1 style="DISPLAY: none; width: 158px; height: 0px"><table  cellSpacing="0" cellPadding="0" width="152" align="center"  background="images/bg.gif" style="padding-left:5px"><tr><td height="25"><a href="#" target="BoardList">更改初始信息</a></td></tr><tr><td height="25"><a href="#" target="BoardList">查看服务器信息</a></td></tr></table></div></td>
</tr>
...//此处省略了其他一级菜单一级二级菜单的内容

（2）编写展开菜单项的自定义JavaScript方法show()，关键代码如下：

function show(obj,maxg,obj2){if(obj.style.pixelHeight<maxg){obj.style.pixelHeight+=maxg/10;obj2.background="images/title_hide.gif";                //改变菜单标题的背景if(obj.style.pixelHeight==maxg/10){ obj.style.display='block';                         //设置指定菜单项显示
                  }myObj=obj;mymaxg=maxg;myObj2=obj2;setTimeout('show(myObj,mymaxg,myObj2)','5');          //每隔一段时间调用一次show函数，用于实现渐渐展开效果
     }
}

（3）编写收缩菜单项的自定义方法hide()，关键代码如下：

function hide(obj,maxg,obj2){if(obj.style.pixelHeight>0){if(obj.style.pixelHeight==maxg/5){obj.style.display='none';                          //设置指定菜单项隐藏
                  }obj.style.pixelHeight-=maxg/5;obj2.background="images/title_show.gif";              //改变菜单标题的背景myObj=obj;mymaxg=maxgmyObj2=obj2;setTimeout('hide(myObj,mymaxg,myObj2)','5');            //每隔一段时间调用一次hide函数，用于实现渐渐收缩效果}else if(whichContinue){whichContinue.click();}
}

（4）编写自定义方法change()，实现当单击菜单标题时，隐藏前一个展开的菜单项，显示当前菜单项。关键代码如下：

function change(obj,maxg,obj2){if(obj.style.pixelHeight){hide(obj,maxg,obj2);       //收缩菜单项nopen='';whichcontinue='';}else if(nopen){                        //收缩已经展开的菜单项whichContinue=obj2;nopen.click();}else{show(obj,maxg,obj2);     //展开菜单项nopen=obj2;whichContinue='';}
}

转载于:https://www.cnblogs.com/zkn11199/p/5589910.html

导航条——收缩式导航菜单相关推荐

Bootstrap学习笔记——导航条、分页导航
1 导航条导航条(navbar)比航(nav)复杂很多:导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 1.1 基础导 ...
Bootstrap(五) 导航条、分页导航
本文转自:http://www.imooc.com/learn/141 导航条基础导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Boo ...
bootstrap导航窗格响应式二级菜单
这次碰到的需求是响应式二级导航窗格,默认的导航窗格只有点击下拉框的二级窗格,会有如下问题:一级菜单无法添加超链接,二级菜单展示要多点一下. 实现目标: 1.滑动到指定区域,展示二级菜单. 2.一级菜单 ...
Bootstrap导航条、分页导航
[导航条navbar] 在bootstrap中导航与导航条在外观方面差不多,但在实际应用时,导航条却要复杂的多. 导航条制作方法: 第一步:首先在制作导航的列表(<ul class=" ...
CSS 技巧记录 - 平行四边形导航条、梯形导航条、毛玻璃效果
一.平行四边导航条效果图: 代码: <!DOCTYPE html> <html><head><meta charset="UTF-8"& ...
java web树状导航菜单_导航条——树状导航菜单
1.概述对于一个导航文字很多,并且可以对导航内容进行分类的网站来说,可以将页面中的导航文字以树状图的形式显示,树状图的导航菜单在实际开发应用中非常多.应用它可以方便用户查看.运行本实例,如图1所示, ...
改变mysql的菜单栏的颜色_导航条——动态改变导航菜单的背景颜色
1.概述在浏览一些网站时,当鼠标经过导航菜单某一项时,其背景颜色将切换为其他颜色,实现这种简单的效果会更吸引浏览者的注意. 2.技术要点本实例主要是应用JavaScript方法来动态改变标签的背 ...
织梦CMS v5.7 完美实现导航条下拉二级菜单
转载请标明是引用于 http://blog.csdn.net/chenyujing5678 欢迎拍砖! 一.引言好多人都问,织梦的下拉导航怎么做呢?其实很简单!即使你对代码一点也不熟悉,没关系! 按 ...
android listview 导航条,Android侧边导航栏+ListView基础实践
Android基础项目实践文章首发于自己的github博客,https://lemonjuice98.github.io/ 本学期学习了Android的开发课程,期末也做了一款很萌新向的App作为课 ...

导航条——收缩式导航菜单

1.概述

2.技术要点

3.具体实现

导航条——收缩式导航菜单相关推荐

最新文章

热门文章