收缩式菜单

最新推荐文章于 2023-09-22 11:31:34 发布
最新推荐文章于 2023-09-22 11:31:34 发布
阅读量443 收藏
点赞数
分类专栏： Web 文章标签： html 360 IE web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sanganqi_wusuierzi/article/details/70743188
版权

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=gb2312">

<title>收缩式导航菜单</title>

 

<SCRIPT language=javascript>

function show(obj,maxg,obj2)

{

 if(obj.style.pixelHeight<maxg)

  {

 

    obj.style.pixelHeight+=maxg/10;

           obj.filters.alpha.opacity+=20;

           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');

  }

}

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;

           obj.filters.alpha.opacity-=10;

           obj2.background="images/title_show.gif";

           myObj=obj;

           mymaxg=maxg

           myObj2=obj2;

           setTimeout('hide(myObj,mymaxg,myObj2)','5');

  }

  else

   if(whichContinue)

             whichContinue.click();

}

function chang(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='';

           }

}

</SCRIPT>

 

</head>

<body leftmargin="0"topmargin="0">

<TABLE cellSpacing=0 cellPadding=0width="100%" align=left border=0>

<TBODY>

 <TR>

   <TD vAlign=top>

     <TABLE cellSpacing=0 cellPadding=0 width=158 align=center>

       <TBODY>

       <TR style="CURSOR: hand">

         <TD vAlign=bottom height=42><IMG height=38

           src="images/title.gif" width=158>

</TD></TR></TBODY></TABLE>

     &nbsp;

     <TABLE cellSpacing=0 cellPadding=0 width=158 align=center>

       <TBODY>

       <TR style="CURSOR: hand">

           <TD class=list_title id=list1

         οnmοuseοver="this.typename='list_title2';"

         οnclick=chang(menu1,60,list1);

         οnmοuseοut="this.typename='list_title';"

         background="images/title_hide.gif"

           height=25><SPAN>网站管理</SPAN> </TD>

         </TR>

       <TR>

           <TD align="center" valign="middle">

             <DIV class=sec_menu id=menu1

           style="DISPLAY: none; FILTER: alpha(Opacity=0); WIDTH: 158px;HEIGHT: 0px">

                <TABLE  cellSpacing=0

           cellPadding=0 width=135 align=center>

                  <TBODY>

                    <TR>

                      <TD height=25><ahref="#">初始化信息</a></TD>

                    </TR>

          

                    <TR>

                      <TD height=25><ahref="#">服务器信息</a></TD>

                    </TR>

                 

                  </TBODY>

                </TABLE>

             </DIV></TD></TR></TBODY></TABLE>

&nbsp;  &nbsp;

 

<TABLE cellSpacing=0 cellPadding=0width=158 align=center>

       <TBODY>

       <TR style="CURSOR: hand">

           <TD class=list_title id=list2

         οnmοuseοver="this.typename='list_title2';"

         οnclick=chang(menu2,160,list2);

         οnmοuseοut="this.typename='list_title';"

         background="images/title_show.gif"

           height=25><SPAN>信息管理</SPAN> </TD>

         </TR>

       <TR>

           <TD align="center">

             <DIV class=sec_menu id=menu2

           style="DISPLAY: none; FILTER: alpha(Opacity=0); WIDTH: 158px;HEIGHT: 0px">

                <TABLE  cellSpacing=2

           cellPadding=0 width=135 align=center>

                  <TR>

                    <TD height=25><ahref="#">宾馆简介管理</a></TD>

                  </TR>

                  <TBODY>

                    <TR>

                      <TD height=25><ahref="#">地理位置管理</a></TD>

                    </TR>

                  

                                                     <TR>

                      <TD height=25><ahref="#">会展中心管理</a></TD>

                    </TR>

                                                     <TR>

                      <TD height=25><ahref="#">餐饮美食管理</a></TD>

                    </TR>

                                                     <TR>

                      <TD height=25><ahref="#">商务中心管理</a></TD>

                    </TR>

                   </TBODY>

                </TABLE>

             </DIV></TD></TR></TBODY></TABLE>&nbsp;      &nbsp;

       <SCRIPT language=javascript>

          var nopen="";

          var whichContinue='';

      </SCRIPT>     

  </body>  

</html>



 效果图：

MyAnqi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
菜单收缩
weixin_44588370的博客
06-28 460
菜单收缩 简单布局窗体的样式： 将窗体分成两列，第一列给个固定的值，其中第二列又分成两列（第一列给固定值，白色区域给鼠标左键按下事件，第二列自己响应），Button按钮用做按钮动画显示效果 效果图如下： //定义新的动画 private DoubleAnimation c_daListAnimation; //记录菜单栏状态 false隐藏 ...
收缩式导航菜单(CSS+DIV)
10-16
很好用的收缩式导航菜单(CSS+DIV)
JS实现菜单收缩
03-16
NULL 博文链接：https://deer.iteye.com/blog/396484
带收缩的菜单栏
YYYYYun的博客
04-26 843
效果图 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <style type="...
收缩式导航菜单
weixin_34051201的博客
04-09 189
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"...
Android收缩式菜单demo
07-27
"Android收缩式菜单demo"就是一个典型的案例，它展示了如何使用Android原生动画来实现一个可伸缩的菜单效果。这种效果常见于许多应用的侧滑导航，能够提供一种优雅的方式来展示或隐藏菜单选项，增强用户体验。 首先...
Android收缩式菜单demo.zip
07-10
在Android应用开发中，用户界面的设计至关重要，而收缩式菜单是一种常见的交互元素，它能够有效利用屏幕空间，提供丰富的功能选项，同时保持界面简洁。"Android收缩式菜单demo"就是一个展示如何实现这种效果的示例...
jQuery收缩菜单
01-17
"jQuery收缩菜单"是一个利用jQuery实现的高效解决方案，旨在提供一种优雅的方式来展示和隐藏网站的导航菜单，从而优化页面布局，提升用户浏览体验。 首先，我们来看看`index.html`。这个文件是网页的主体部分，通常...
layui侧边收缩菜单
02-02
在layui中，侧边收缩菜单是一项重要的功能，它能够帮助优化网页布局，提高用户体验。当我们点击图标时，菜单可以进行收缩或展开，使得页面在不同屏幕尺寸下都能保持良好的可读性和操作性。 首先，我们要理解layui的...
加强版三级收缩菜单（三种类型）
12-10
多窗口页面左侧菜单收缩导航，三种模式。 1、父菜单互斥，子菜单互斥 2、父菜单互斥，子菜单不互斥 3、父菜单不互斥，子菜单不互斥
jquery实现简单收缩菜单
Denghalou的博客
08-19 1293
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伸缩菜单</title> <style type="text/css"> * { padding: 0; margin: 0; }...
微信小程序收缩式菜单
lovekobe1997的博客
05-13 405
wxml文件 <view class="page"> <!--分类 --> <view class="li" data-index="0" bindtap='changeToggle'> <view class="left">谷类及制品</view> <view class="right">6 <text class="iconfont {{selectedFlag[0]?'icon-shangjiantou':'icon-x
伸缩菜单栏
LHarashi的博客
04-08 328
极简版： 导航栏按平常的div+ul+li+a进行嵌套书写； 因我写的箭头是用小正方形的边框来代替的，所以的我a标签尾部有个空盒子； 然后将子菜单的内容以自定义列表添加至a标签后； 到这基本的骨架就好了，剩下的效果为css的工作 html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易伸缩菜单</title>
js之展开收缩菜单，用到window.onload ,onclick,
weixin_34372728的博客
12-24 537
目标效果：点击标签1，如果列表标签的style的display是block,改成none，否则改成block，来达到展开收缩菜单效果 一.准备阶段 html文件 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 ...
菜单展开和收缩
weixin_30727835的博客
09-07 267
菜单展开和收缩 方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>菜单展开和收缩</title> <style> *{ margin: 0; ...
伸缩式导航菜单
niudehao1的博客
11-20 615
导航条——收缩式导航菜单
weixin_30652897的博客
06-18 717
1.概述 在网站中不仅可以设置导航条，而且还可以设置导航菜单。由于菜单内容比较多，同一页面显示比较杂乱，所以很多的设计者都采用了收缩式的菜单形式。 2.技术要点 本实例主要是应用JavaScript控制显示和隐藏表格的功能，实现收缩式导航菜单的功能。单击导航超链接，显示当前菜单的内容，隐藏上一个显示的菜单，在隐藏菜单时，让其有规律地隐藏，从而实现展开或收缩的动画效果。 ...
vue点击按钮收缩菜单
最新发布
renkai721的专栏
09-22 1429
vue菜单收缩,vue菜单折叠,element菜单折叠,element菜单收缩，点击按钮收缩菜单
vue可折叠的多级菜单
08-14
- *3* [vue iview后台系统可收缩式折叠菜单](https://blog.csdn.net/qq_42740797/article/details/122671194)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值