菜单的展开和伸缩

最新推荐文章于 2022-06-24 17:55:17 发布
最新推荐文章于 2022-06-24 17:55:17 发布
阅读量1.6k 收藏
点赞数
分类专栏： Java 文章标签： menu table html javascript class function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laiahu/article/details/1541332
版权

菜单的展开和伸缩

<%@ page language="java" contentType="text/html; charset=gbk"
    pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>左边的框架</title>
<STYLE type=text/css>
 BODY {
  BACKGROUND: #CCCCCC url(images/top.jpg) repeat-x fixed top; MARGIN: 0px; FONT: 12px 宋体;
   SCROLLBAR-FACE-COLOR: #C5D5B7; 
  SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
  SCROLLBAR-SHADOW-COLOR: #ffffff;
  SCROLLBAR-3DLIGHT-COLOR: #C5D5B7;
  SCROLLBAR-ARROW-COLOR: #006600;
  SCROLLBAR-TRACK-COLOR: #999966;
  SCROLLBAR-DARKSHADOW-COLOR: #C5D5B7;
 }
 TABLE {
  BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
 }
 TD {
  FONT: 12px 宋体
 }
 IMG {
  BORDER-RIGHT: 0px; BORDER-TOP: 0px; VERTICAL-ALIGN: bottom; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
 }
 A {
  FONT: 12px 宋体; COLOR: #000000; TEXT-DECORATION: none
 }
 A:hover {
  COLOR: #009900; TEXT-DECORATION: underline
 }
 .sec_menu {
  BORDER-RIGHT: white 1px solid; BACKGROUND: #E9EBE2; OVERFLOW: hidden; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid
 }
 .menu_title {
  
 }
 .menu_title SPAN {
  FONT-WEIGHT: normal;
  LEFT: 8px;
  COLOR: #333333;
  POSITION: relative;
  TOP: 2px;
  font-size: 14px;
 }
 .menu_title2 {
  
 }
 .menu_title2 SPAN {
  FONT-WEIGHT: normal;
  LEFT: 8px;
  COLOR: #333333;
  POSITION: relative;
  TOP: 2px;
  font-size: 14px;
 }
</STYLE>
<SCRIPT language="javascript">
function showsubmenu(sid)
{
whichEl = eval("submenu" + sid);
if (whichEl.style.display == "none")
{
eval("submenu" + sid + ".style.display=/"/";");
}
else
{
eval("submenu" + sid + ".style.display=/"none/";");
}
}
</SCRIPT>

</head>
<body>
<table cellpadding=0 cellspacing=0 width=158 align=center>
 <tr>
    <td height=25 class=menu_title οnmοuseοver=this.className='menu_title2'; οnmοuseοut=this.className='menu_title'; background="../images/top.jpg" id=menuTitle2 onClick="showsubmenu(0)" style="cursor:hand;">
    <span>论坛管理</span>
    </td>
 </tr>
 <tr>
    <td style="display:display" id='submenu0'>
      <div class=sec_menu style="width:158">
        <table cellpadding=0 cellspacing=0 align=center width=130>
              <tr>
                <td height=20><a href="admin_main.jsp" target="main">论坛分类管理</a></td>
              </tr>
              <tr>
                <td height=20><a href="admin_main.jsp" target="main">图片管理</a></td>
              </tr>
            </table>
      </div>
    </td>
 </tr>
 
</table>
</body>
</html> 

laiahu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单模拟菜单栏展开收缩效果
01-07
最近要用到android动画 所以就把做的小列子分享一下，也许不够好，但是对于刚研究动画的新手应该有帮助！
关于伸缩菜单js代码正确实现
qflyalltime的博客
03-29 2037
今天在imooc上看的伸缩菜单的js实现 http://www.imooc.com/video/93 自己实践的时候发现这个代码是有问题的。     先上错误代码 第一个 第二个 第三个 window.onload = function () { var ls = document.getElementsByTagName("li");
伸缩菜单
bin1813的博客
12-08 485
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> *{ margin: 0; padding: 0; } #ul1 li{ width: 100px;
unity-Ugui-伸缩缩菜单显示固定内容一一一一新手
菜的抠脚的博客
12-14 4176
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class demo1 : MonoBehaviour { private List _btnlist = new List();//同级按钮组 public Transf
jsp 很实用的JS+CSS多级树形展开菜单_网页代码
07-11
jsp 很实用的JS+CSS多级树形展开菜单_网页代码
html伸缩展开菜单,【HTML5】Jquery打造竖向伸缩/展开菜单
weixin_39929465的博客
06-02 215
该楼层疑似违规已被系统折叠隐藏此楼查看此楼效果图如下：jquery打造竖向伸缩/展开菜单body { font-family: Arial; font-size: 16px; }dl { width: 300px; }dl,dd { margin: 0; }dt { background-color:#ae8758; background-image:url(/jscss/demoimg/201...
html点击收缩展开菜单栏,jquery实现点击向下展开菜单项(伸缩导航)效果
weixin_29914581的博客
05-30 2675
本文实例讲述了jquery实现点击向下展开菜单项(伸缩导航)效果。分享给大家供大家参考。具体如下：这里演示基于jquery打造的向下展开的多级导航条效果，纵向垂直排列，风格非常的简洁，鼠标点击时候展开菜单的二级项，再次点击的时候又向上合拢，平时只显示一级菜单，二级菜单是隐藏不显示的，代码简洁，包括了完整的JS、css和jquery部分。运行效果如下图所示：在线演示地址如下：具体代码如下：可折叠展开...
admin框架左菜单栏完全伸缩
userzou的博客
07-08 587
若依vue改左菜单栏完全伸缩 src/assets/styles/sidebar.scss
html点击收缩展开菜单栏,jquery实现可点击伸缩与展开的菜单效果代码
weixin_35452206的博客
05-30 2270
本文实例讲述了jquery实现可点击伸缩与展开的菜单效果代码。分享给大家供大家参考。具体如下：这是一款jquery实现的点击伸缩与展开的菜单代码，操作方式大家都知道吧，点击一下展开二级菜单的内容，再次点击则合拢，很经典的折叠菜单。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d...
php伸缩菜单_jQuery特效---菜单伸缩展开收起效果
weixin_31570865的博客
03-09 93
/p>'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>jquery菜单伸缩效果 www.iiwnet.com$(document).ready(function(){$('dd:not(:first)').hide();$('dt a').click(function(){$('dd:visible').slideUp...
JSP菜单特效
08-20
利用javascript 写的特效，很苦很炫的菜单特效，对于初学者非常有用，
本示例 实现伸缩列表
10-27
本示例 实现伸缩列表 2013.10.27
jquery实现可点击伸缩与展开的菜单效果代码
10-23
主要介绍了jquery实现可点击伸缩与展开的菜单效果代码,涉及jquery鼠标click事件控制页面元素样式变换的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
可伸缩/展开的C#版窗体菜单
03-16
内容索引:C#源码,菜单窗体,伸缩菜单　可以伸缩/展开的C#版窗体菜单，类似Windows的开始-程序菜单一样，最先显示最常用的菜单项，点击下拉箭头会显示出全部的菜单项，本例和这种效果非常相似，这是基于C#2005版的，这...
C#Winform左侧伸缩菜单实现
03-21
C#Winform左侧伸缩菜单实现
JS 实现伸缩菜单
Youareseeing的博客
06-24 1004
使用 三种方法 实现伸缩菜单直接放代码：html 代码和 style 代码 js代码（1）： js代码（2）： js代码（3）： 注：btns[i].onclick=function(){} 通过遍历给每个按钮赋予点击事件，再通过遍历找到你所点击的按钮的下标，最后通过divs[index].classList.toggle("open"); 改变每个 divs[index] 的样式，赋予 open 样式 最终实现伸缩菜单。效果图： 如果有不懂的，可以留言。...
Android 自定义展开收缩旋转菜单
安卓兼职framework和app工程师的博客
10-08 900
Android 自定义菜单各种样式的都有，今天自定义一个可以展开收缩的旋转菜单 自定义效果图如下: 自定义菜单： import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.animation.AnimatorSet; import android.animation.ObjectAnimator; import android.content.Context; im
Android之抽屉效果的下拉菜单(上下伸缩和展开)
12-02
实现了一个Android的抽屉效果的下拉菜单(上下伸缩和展开)，和大家一起交流学习，如果有更好的实现效果，也请分享一下(注：积分只是希望能评论的方式。）【联系方式：评论即可】
VB 可伸缩展开的菜单实例
06-07
VB 可伸缩展开的菜单实例 VB 可伸缩展开的菜单实例 VB 可伸缩展开的菜单实例
layui 带伸缩菜单
最新发布
07-28
接着，通过监听菜单元素的点击事件，通过判断当前菜单项的展开状态来决定是展开菜单还是收起菜单。可以使用 tree 组件提供的方法，如 changeState，来改变菜单项的状态。 最后，通过 CSS 样式来控制菜单项的样式，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值