带隐藏功能的菜单导航

最新推荐文章于 2025-09-13 09:06:35 发布
最新推荐文章于 2025-09-13 09:06:35 发布
阅读量211 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript c# ViewUI
原文链接：http://www.cnblogs.com/Tonyyang/archive/2008/01/18/1044652.html
本文介绍了一个使用ASP.NET实现的网页布局方案，通过内嵌的C#代码及JavaScript实现了页面元素的动态显示与交互功能，包括左栏的显示隐藏、按钮点击事件等。

1.如图:

2.代码如下:

Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Leasear.LeaWeb.Default" %>

<html>
<head runat="server">
    <title>Untitled Page</title>

    <script src="inc/FineMessBox/js/common.js" type="text/javascript"></script>

    <script src="inc/FineMessBox/js/subModal.js" type="text/javascript"></script>

    <style type="text/css">
        BODY
        {}{
            font-size: 12px;
            font-family: "Verdana" , "Arial" , "细明体" , "sans-serif";
        }
        table
        {}{
            font-size: 12px;
            font-family: "Verdana" , "Arial" , "细明体" , "sans-serif";
        }
    </style>
</head>
<body scroll="no" onbeforeunload="return CloseEvent();" leftmargin="0" topmargin="0"
    marginheight="0" marginwidth="0">
    <form id="form1" runat="server">
    <div>
        <table id="TableMain" border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
            <tr>
                <td id="Header" width="100%" height="25" colspan="3" style="border-bottom: 1px solid #000000">
                    &nbsp;
                    Header</td>
            </tr>
            <tr>
                <td id="frmTitle" nowrap="nowrap" valign="middle" align="center" width="180" style="height: auto;
                    border-right: 1px solid #000000">
                    <iframe name="BoardTitle" style="height: 100%; visibility: inherit; width: 180; z-index: 2"
                        scrolling="auto" frameborder="0" src="Left.aspx"></iframe>
                </td>
                <td style="width: 7pt" bgcolor="#7898A8" width="10" title="关闭/打开左栏">
                    <img border="0" src="images/Menu/close.gif" id="menuimg" alt="隐藏左栏" onmouseover="javascript: menuonmouseover();"
                        onmouseout="javascript: menuonmouseout();" onclick="javascript:switchSysBar()"
                        style="cursor: hand" width="11" height="76" />
                </td>
                <td style="width: 100%">
                    <iframe id="mainFrame" name="mainFrame" style="height: 100%; visibility: inherit;
                        width: 100%; z-index: 1" scrolling="auto" frameborder="0" src="Right.aspx"></iframe>
                </td>
            </tr>
            <tr>
                <td colspan="3" height="20">
                    <table cellpadding="0" cellspacing="0" border="0" height="20" width="100%">
                        <tr bgcolor="Black">
                            <td width="200px">
                            </td>
                            <td style="padding-right: 50px">
                                <button name="xsubmit" class="down_tools_button" onclick="javascript:showPopWin('About','About.aspx',510, 170, null,false)">
                                    &nbsp;版本信息</button>
                                <button name="xsubmit" class="down_tools_button" onclick="javascript: window.mainFrame.location.href='Right.aspx'">
                                    回到首页</button>
                                <button name="xsubmit" class="down_tools_button" onclick="javascript: window.top.location.href = 'Logout.aspx'">
                                    &nbsp;退出系统</button>
                                <button name="xsubmit" class="down_tools_button" onclick="javascript:window.open('http://framework.supesoft.com/help/');">
                                    &nbsp;帮助手册</button>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

<script language="javascript" type="text/javascript">

function switchSysBar(){

     if (document.all("frmTitle").style.display=="none") 
     {
        document.all("frmTitle").style.display=""
        menuimg.src="images/Menu/close.gif";
        menuimg.alt="隐藏左栏"
        }
    else {
        document.all("frmTitle").style.display="none"
        menuimg.src="images/Menu/open.gif";
        menuimg.alt="开启左栏"
     }
     
     

}

 function menuonmouseover(){
         if (document.all("frmTitle").style.display=="none") {
         menuimg.src="images/Menu/open_on.gif";
         }
         else{
         menuimg.src="images/Menu/close_on.gif";
         }
 }
 function menuonmouseout(){
         if (document.all("frmTitle").style.display=="none") {
         menuimg.src="images/Menu/open.gif";
         }
         else{
         menuimg.src="images/Menu/close.gif";
         }
 }
 
     if(top!=self)
    {
        top.location.href = "default.aspx";
    }
var gDefaultLogin = "inc/finemessbox/loading.html";  
</script>


 

 

转载于:https://www.cnblogs.com/Tonyyang/archive/2008/01/18/1044652.html

林尧彬
关注
漂亮的可以自动显示隐藏的导航菜单(四个)
03-15
5个导航菜单例子，有的是从别的网站提取出来的，有的是自已的，肯定能满中你的需求。有一个还是非常好看的。有左侧的，有上顶下的，还有ASP的。保存着以后用。
项目菜单导航
weixin_47250816的博客
06-28 414
一、功能实现 菜单导航主要包括1（目录）2（页面）3（按钮）点击图(1)中的系统设置，展现系统设置下的销售中心、库存管理、基础数据，点击基础数据展现基础数据下的页面层，点击酒菜设置展现出该页面的内容。页面里的添加、修改、删除是按钮，点击这些按钮可以实现一些功能。 二、相关业务表和关系 三、经典代码： 遍历菜单： 四、开发总结 我们所有的功能实现到要有数据库来收集数据，如果没有数据库这些数据就没有地方储存，在开发工具上也无法查询到这些数据，有数据库就得有表，上面的两张表，一张是菜单表，一张是菜单权限表，
asp.net隐藏左导航栏菜单
lsynb的专栏
03-13 4761
Default.aspx页面代码：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" >    无标题页                  menuswitch.aspx页面代码：body { margin-left: 0px; margin-to
WordPress菜单导航功能设置教程
热门推荐
老K的博客
07-28 1万+
当你选择了一个心仪的WordPress主题后，看了前面的教程，基本上也知道怎么使用WordPress建立一个个人网站了。 下面，再讲讲WordPress主题的一些使用技巧，让你启动了一款主题后，如果又是第一次建站，基本上首要做的工作有： 新建分类目录 新建几篇文章 新建页面 新建菜单 添加小工具 调整主题功能选项 通常，很多人直接都会忽略掉前面3点  。。直奔赶紧新
前端实战小案例--带隐藏切换的侧边导航栏
朽木自雕的博客
11-05 2385
带隐藏切换的侧边导航栏--前端实战小案例 想练习更多前端案例，请进个人主页，点击前端实战案例->传送门 觉得不错的记得点个赞?支持一下我0.0！谢谢了！ 不积跬步无以至千里，不积小流无以成江海。 效果图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"&...
html带子菜单的纵向导航栏,CSS学习笔记(九) 界面组件之导航菜单
weixin_28695903的博客
05-31 1273
菜单由一组链接组成。用 HTML 中的列表元素(ul 或 ol)来分组链接不仅符合逻辑，而且即使没有额外的 CSS 也能适当显示链接的层次。默认情况下，由于列表(li)是块级元素，因此它们会上下堆叠。1.纵向菜单html 标记：applebananacatdogcss 规则：*{margin: 0;padding: 0;}nav{margin: 50px;width:150px;}.list ul...
html怎样隐藏左侧菜单,点击隐藏显示左边菜单
weixin_29890403的博客
05-30 1353
1.新建一个中间界面menubtn.jspString path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>href="library/css/default.css"...
Android隐藏虚拟菜单（虚拟按钮导航栏）
Greetty的博客
10-14 2063
方法一：方法参考自http://blog.youkuaiyun.com/tian_di_yi_jian/article/details/62425096，方法如下： /** * 隐藏虚拟按键，并且全屏 */ public static void hideBottomUIMenu(Activity activity) { //隐藏虚拟按键，并且全屏 if (Build.VERSION.S...
html左侧隐藏菜单栏,如何制作一个炫酷的隐藏侧边栏菜单
weixin_33262687的博客
05-30 5098
在网上经常可以看到一些效果非常酷的隐藏侧边栏菜单效果。隐藏侧边栏作为一种新的菜单布局方式已经被越来越多的人所接受，它给用户一种全新的体验。特别是在移动手机等小屏幕设备上，隐藏侧边栏就显得特别有用。它不会占用多余的空间，只有在需要的时候才显示出来。隐藏侧边栏菜单经常被使用在移动手机和一些触摸屏设备上。隐藏侧边栏最大的好处是不占用空间，并且只使用少量的javascript和CSS就可以制作出一个隐藏侧...
vue 隐藏导航栏和菜单栏,已解决
weixin_44006009的博客
03-22 865
vue 隐藏导航栏和菜单栏
9种html5+css3隐藏侧边栏导航菜单动画效果
10-04
总之，掌握这9种隐藏侧边栏导航菜单的动画效果，不仅可以提升你的网页设计技能，还能让你的作品在视觉和交互性上脱颖而出，吸引更多的用户。同时，这也是一种对新技术持续学习和探索的过程，对于任何IT从业者来说，...
jQuery滚动自动隐藏导航菜单代码
04-07
"jQuery滚动自动隐藏导航菜单代码"是一种增强用户体验的技巧，它使得导航菜单在页面滚动时能动态改变其显示状态，既保持了页面的简洁性，又保证了用户的便利性。 jQuery 是一个广泛使用的JavaScript库，它简化了...
jQuery网页页面滚动自动隐藏导航菜单代码
06-05
"jQuery网页页面滚动自动隐藏导航菜单代码"是一个实用的功能，它通过JavaScript库jQuery实现了当用户滚动页面时，导航菜单的动态显示与隐藏效果，提升了用户体验。本知识点将详细介绍这一功能的实现原理和步骤。 ...
漂亮的可以自动显示_隐藏的导航菜单.rar
07-04
首先，菜单导航的自动显示和隐藏功能通常基于JavaScript的事件监听和DOM操作。JavaScript是一种强大的客户端脚本语言，它可以实时响应用户的交互，如鼠标点击、页面滚动等，为网页增加动态效果。在这个例子中，可能...
9种html5+css3隐藏侧边栏导航菜单动画效果.rar
04-10
在本资源包中，“9种html5+css3隐藏侧边栏导航菜单动画效果”展示了如何利用这两项技术来设计各种创新且实用的侧边栏导航菜单。 1. **HTML5基础**：HTML5是超文本标记语言的最新版本，增加了许多新的元素，如（导航...
实现导航菜单功能
xzy的博客
05-03 1402
文章目录实现导航菜单功能需求数据库中的表和java中的bean类钩子函数初始化菜单数据SpringBoot后端MenuController控制器接收"/menus"请求的getAllMenus方法MenuDao动态代理接口MenuDao.xml映射文件Home.vue组件中的路由嵌套使用element ui中的导航菜单生成菜单测试 实现导航菜单功能 需求 点击不同的菜单，会在Home.vue的主体部分显示不同的组件内容。 数据库中的表和java中的bean类 数据库中需要两张表，一张是主菜单表mainmen
《Linux运维总结：Redis7.4.5哨兵集群开启ACL并配置用户》
东城绝神
09-12 587
《Linux运维总结：Redis7.4.5哨兵集群开启ACL并配置用户》
前后端开发Mock作用说明，mock.ts
循环编织时间年轮，递归叩问存在本质，谁能在硅基荒原上，种出思想的玫瑰……
09-12 476
mock.ts是前端开发中用于模拟后端接口的TypeScript文件，通过生成虚假数据使前端无需等待后端即可独立开发。它定义数据结构、模拟请求响应，并提供与真实接口一致的调用方式。示例展示了如何生成用户数据并模拟分页接口，使用vite-plugin-mock等工具实现。前端代码调用Mock接口与调用真实接口方式相同，待后端完成时只需替换接口地址即可平滑切换，实现了前后端并行开发。
JavaScript 对象：一份全面的回顾
最新发布
低代码布道师的博客
09-13 361
JavaScript 对象是基础的数据结构，是更复杂数据类型的基石。它们是一个由组成的集合，每个属性都包含一个键和一个值。掌握它们是精通 JavaScript 的关键。🔑。
实现页面树形导航菜单的可隐藏功能
页面树形可隐藏导航菜单是一种常见的网页布局组件，它通常用于创建具有层次结构的导航界面，以便用户能够通过折叠和展开菜单项来浏览网站的不同部分。在现代网页设计中，这类导航菜单被广泛应用于电商网站、企业网站...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值