经典三行两列布局带隐藏导航功能和菜单折叠功能

最新推荐文章于 2024-07-22 00:14:23 发布
最新推荐文章于 2024-07-22 00:14:23 发布
阅读量121 收藏 1
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/Tonyyang/archive/2008/01/15/1039462.html
版权

      经典三行两列布局带隐藏导航功能和菜单折叠功能:

源代码如下:

Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Navigate Page</title>

    <script language="javascript" type="text/jscript">
    
     
       function showHideLeftPanel(obj)
       { 
            var oStyle  = leftPanel.style; 
            oStyle.display == "none" ? oStyle.display = "" : oStyle.display = "none"; 
//             var oStyle = obj.parentElement.parentElement.parentElement.rows[1].style; 
//            oStyle.display == "none" ? oStyle.display = "block" : oStyle.display = "none"; 
        }
        
        function showHide(obj)
       {            
            var oStyle = obj.parentElement.parentElement.parentElement.rows[1].style; 
            oStyle.display == "none" ? oStyle.display = "block" : oStyle.display = "none"; 
        }
    </script>

    <style type="text/css">
        .style1
        {}{
            width: 100%;
            height: 454px;
        }
        .style2
        {}{
            height: 467px;
        }
        .style3
        {}{
            width: 144px;
        }
        .style4
        {}{
            width: 100%;
        }
        .style5
        {}{
            width: 1px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table class="style1" border="2">
            <tr>
                <td style="background-color: #CC00FF">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    <table class="style1" border="2" style="height: 100%" width="100%">
                        <tr>
                            <td id="leftPanel" class="style3" valign="top" 
                                style="background-color: #00FFFF">
                                <table class="style4">
                                    <tr>
                                        <td style="background-color: #C0C0C0" onclick="JavaScript:showHide(this);">
                                            货仓
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table class="style4">
                                                <tr>
                                                    <td>
                                                        &nbsp;&nbsp; 仓库收获&nbsp;
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        &nbsp;&nbsp;&nbsp; 仓库入仓&nbsp;
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td valign="top" style="background-color: #FFFFFF">
                                            &nbsp;
                                        </td>
                                    </tr>
                                </table>
                                <table class="style4">
                                    <tr>
                                        <td style="background-color: #C0C0C0" onclick="JavaScript:showHide(this);">
                                            会计
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table class="style4">
                                                <tr>
                                                    <td>
                                                        &nbsp; &gt;会计月结&nbsp;
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        &nbsp; &gt;&nbsp;会计对帐
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            &nbsp;
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td  class="style5">
                                <a href="JavaScript:showHideLeftPanel(this);">
                                    <img height="50" src="images/Menu/box_topleft.gif" width="2" /></a>
                            </td>
                            <td style="background-color: #CC9900"> </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="background-color: #808080">
                    &nbsp;</td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

     

 

转载于:https://www.cnblogs.com/Tonyyang/archive/2008/01/15/1039462.html

weixin_30678349
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【SpringBoot+VUE后台管理系统】（一）Vue后台管理系统主框架搭建（左侧菜单栏，表格，分页插件，搜索栏，操作按钮等）
Robin的博客
06-24 827
实现折叠按钮绑定的点击事件触发 collapse函数，实现 折叠属性 isCollapse的值的修改。在项目主页中发现刚才编写的测试按钮样式生效，说明element-ui集成成功。到element-ui官网找到分页插件，点击显示代码，找到完整功能插件。注意：element-ui的版本要装2.8.0否则表格显示会有问题。解决菜单栏折叠后文字不消失，以及菜单使用span标签包裹。安装结束，如下图所示没有出现错误，则安装成功。在app.vue中编写一个 测试按钮。导入并注册Element-ui插件。
两款jquery下拉导航菜单支持多级的下拉导航菜单代码
11-19
两款jquery下拉导航菜单支持多级的下拉导航菜单代码 两款jquery下拉导航菜单支持多级的下拉导航菜单代码 两款jquery下拉导航菜单支持多级的下拉导航菜单代码
标准的CSS代码编写习惯：两列左导航设计，顶
weixin_34319374的博客
12-06 92
/***********************************************//*2col_leftNav.css*//*Usewithtemplate2col_leftNav.html*//***********************************************//**...
后台管理菜单导航（界面）
03-18
最新整理的一份易想后台管理导航菜单及界面
Css面试题：实现两列/三列布局
lalala_dxf的博客
12-20 1708
css实现两列布局/三列布局
DIV+CSS三行两列经典布局
02-26 2060
这个XHTML1标准的DIV+CSS布局是著名网页设计师阿捷2004年发布在《网页设计师 》上的，一个非常经典的布局，在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下（在原代码的基础上作了一定规范整理）：                       SEO参考:XHTML之经典三行两列布局- seobbs.net           body
React 和 Bootstrap Web 开发学习手册（一）
最新发布
龙哥盟
07-22 606
我们都知道 JavaScript 应用程序是 Web 开发的未来，有许多不同的框架可用于构建同构 JavaScript Web 应用程序。然而，随着 Web 开发世界的变化，我们都需要作为开发人员现代化，学习新的框架并构建新的工具。重要的是要分析框架的代码方法，并采用相同的方法，而不是迷失在框架市场中。ReactJS 是一个开源的 JavaScript 库，类似于 Bootstrap，用于构建用户界面，被称为MVC中的V（视图）。当我们谈论M和C。
007.UG_NX工程图功能
weixin_30270889的博客
08-25 1243
第6章 工程图功能 本章主要内容： l UG的工程图模块 l 工程图管理功能 l 视图管理功能 l 剖视图的应用 l 工程图中的对象插入功能 l 工程图标注功能 l 编辑绘图对象 l 工程图参数的设置 l 工程图的其他功能 l 本章实例 6.1 UG的工程图模块 利用UG的Modeling（实体建模）功能创建的零件和装配模...
仪表盘css_使用CSS和Java来构建管理仪表盘布局
Web design 教程小屋
07-10 661
您将要创造的 在这个新教程中，我们将使用CSS和JavaScript来创建响应式管理仪表板布局。 要构建它，我们将从WordPress仪表板中借鉴一些想法，例如其可折叠的侧边栏菜单。 在整个教程中，我们将面临许多挑战，但是这些挑战将为我们提供良好的实践技巧，以提高我们的前端技能。 事不宜迟，让我们看一下最终的管理仪表板演示（单击侧边栏底部的“ 折叠”按钮以查看可折叠的导航功能，并查看...
ul和li实现分两列（多列）布局显示
09-25
DIV+CSS分两列（多列）布局显示，下面有个不错的示例，大家可以参考下
后台管理模板，左边菜单
10-11
很漂亮的后台管理模板，左边菜单很有质感。
二级下拉菜单特效
06-06
二级下拉菜单特效，无过度效果，点击后立即显示，可支持二级导航分两列，干净清爽，方便二次修改
初识Bootstrap 3：构建响应式网页布局
响应式网页布局是指能够根据不同的设备和屏幕尺寸自适应地调整页面布局以提供更好的用户体验。随着移动设备的普及，人们越来越多地使用手机和平板电脑浏览网页，而传统的固定布局无法适应不同设备的屏幕尺寸，因此...
《第一行代码Android》学习总结第十二章 Material Design
LBW9368的博客
12-13 506
        它是由谷歌设计师基于传统优秀的设计原则，结合丰富的创意和科学技术所发明的一套全新的界面设计语言，包括了视觉、运动、互动效果等特性。 一、Toolbar （一）创建Toolbar          Material控件中的一个控件，类似于ActionBar。 1、将res/values/styles.xml文件中的parent属性改为Theme.AppCompat.Light...
Wordpress页面生成器：Elementor 插件制作网站页面教程（图文完整）
程序人生
11-17 3241
Wordpress页面生成器：Elementor 插件制作网站页面教程（图文完整）
动手练一练，做一个响应式的后台管理面板
前端达人
03-06 1190
作为一名前端开发者，我们或多或少都会接触后台管理系统的制作，你是否会亲自纯手工制作做还是从网上找源码改一个呢？今天我们将从零开始纯手工制作一个后台管理面板的首页，通过这个案例你将会学习到...
前端提高篇（四十四）CSS练习3：flex布局（导航栏，两列三列布局）
安之ccy的博客
03-10 2049
导航栏 <nav> <ul> <li>首页</li> <li>课程</li> <li>教资</li> <li>关于我们</li> </ul> </nav> 基础样式： body, ul, li { margin: 0; padding: 0;
JavaScript实现动态导航菜单：带动画效果的折叠菜单
"这篇文章主要介绍了如何使用JavaScript实现一个带有收放动画效果的导航菜单，旨在通过实战案例提升读者的技能。作者强调欢迎前辈提出建议，以确保教程的准确性。该菜单具有鼠标悬停改变颜色、鼠标移动到特定项时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值