js菜单效果

最新推荐文章于 2022-08-07 13:22:01 发布
最新推荐文章于 2022-08-07 13:22:01 发布
阅读量522 收藏
点赞数
分类专栏： 架构美文 文章标签： class border c table 电话 function
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/songhait/article/details/6928557
版权

效果图：

参考代码：

test1.htm

========

<%@ page contentType="text/html; charset=gb2312" %>

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

<SCRIPT language="JavaScript">
function hideAll()
{
 for(i=0;i<odiv.length;i++)
 {
   odiv[i].style.display="none";
  }
}

function showObj(num)
{
 
 if(odiv[num].style.display=="none")
 {
  hideAll();
  odiv[num].style.display="inline";
  }
}


</SCRIPT>
</head>
<body  leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (main.psd) -->
<table id="__01" width="829"  border="0" cellpadding="0" cellspacing="0">


<!--公共信息 >> 讨论 -->
 <tr onClick="showObj(0)">
  
  <td width="2" ></td>
  <td width="825" height="27"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title_01">
          <tr>
            <td width="160"><span class="b_t">&nbsp;==1==</span></td>
          </tr>
        </table></td>
  <td width="2"  ></td>
  
 </tr>

 <tr>
  <td colspan="3" align="center" valign="top">
  <div name="odiv" id="odiv" style="display:inline">
  <table width="98%"  border="0" cellpadding="0" cellspacing="0">
         
          <tr>
            <td width="76%" colspan="3" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="51%" align="center" bgcolor="#8C8C8C" class="title_1">主题</td>
                <td width="16%" align="center" bgcolor="#8C8C8C" class="title_1">回复数</td>
                <td width="13%" align="center" bgcolor="#8C8C8C" class="title_1">发表者</td>
                <td width="20%" align="center" bgcolor="#8C8C8C" class="title_1">更新日期</td>
              </tr>
              <tr>
                <td width="13%" align="center" >1</td>
                <td width="13%" align="center" >3</td>
                <td width="13%" align="center" >43</td>
                <td width="13%" align="center" >daf</td>
              </tr>
             
            </table></td>
          </tr>
         
        </table>
  </div>
  </td>
 </tr>


<!--公共信息 >> 大事记 -->
 <tr onClick="showObj(1)">
  <td width="2" ></td>
  <td width="825" height="27"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title_01">
          <tr>
            <td width="160"><span class="b_t">&nbsp;==2==</span></td>
          </tr>
        </table></td>
  <td width="2"  ></td>
 </tr>
 <tr>
  <td colspan="3" align="center" valign="top">
   <div name="odiv" style="display:none" id="odiv">
   <table width="98%"  border="0" cellpadding="0" cellspacing="0">
         
         


          <tr>
            <td width="100%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="20%" align="center" bgcolor="#8C8C8C" class="title_1">标题</td>
                <td width="16%" align="center" bgcolor="#8C8C8C" class="title_1">部门</td>
                <td width="30%" align="center" bgcolor="#8C8C8C" class="title_1">内容</td>
                <td width="15%" align="center" bgcolor="#8C8C8C" class="title_1">发生日期</td>
        <td width="19%" align="center" bgcolor="#8C8C8C" class="title_1">操作</td>
              </tr>
           
              <tr>
                <td width="20%" align="center" >1</td>
                <td width="16%" align="center" >3</td>
                <td width="30%" align="center" >43</td>
                <td width="15%" align="center" >daf</td>
  <td width="19%" align="center">adf</td>
              </tr>
              <tr>
                <td width="20%" align="center" >1</td>
                <td width="16%" align="center" >3</td>
                <td width="30%" align="center" >43</td>
                <td width="15%" align="center" >daf</td>
  <td width="19%" align="center">adf</td>
              </tr>
            </table></td>
          </tr>
         
        </table>
   </div>
  </td>
 </tr>

 

<!--公共信息 >> 公共通讯录 -->
 <tr onClick="showObj(2)">
  <td width="2" ></td>
  <td width="825" height="27"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title_01">
            <tr>
            <td width="160"><span class="b_t">&nbsp;==3==</span></td>
            </tr>
         </table></td>
   <td width="2"  ></td>
 </tr>
 <tr>
  <td colspan="3" align="center" valign="top">
   <div name="odiv" style="display:none" id="odiv">
   <table width="98%"  border="0" cellpadding="0" cellspacing="0">
         
        

 

           <tr>
            <td width="100%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="15%" align="center" bgcolor="#8C8C8C" class="title_1">姓名</td>
                <td width="15%" align="center" bgcolor="#8C8C8C" class="title_1">手机</td>
        <td width="15%" align="center" bgcolor="#8C8C8C" class="title_1">办公电话</td>
                <td width="15%" align="center" bgcolor="#8C8C8C" class="title_1">家庭电话</td>
        <td width="20%" align="center" bgcolor="#8C8C8C" class="title_1">电子邮件</td>
        <td width="20%" align="center" bgcolor="#8C8C8C" class="title_1">操作</td>
              </tr>

              <tr>
                <td width="13%" align="center" >1</td>
                <td width="13%" align="center" >3</td>
                <td width="13%" align="center" >43</td>
                <td width="13%" align="center" >daf</td>
  <td width="13%" align="center">adf</td>
  <td width="13%" align="center">adf</td>
              </tr>
            </table>
   </td>
          </tr>
         
        </table>
   </div>
  </td>
 </tr>

 

<!--公共信息 >> 简报 -->
 <tr onClick="showObj(3)">
  <td width="2" ></td>
  <td width="825" height="27"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title_01">
          <tr>
            <td width="160"></a><span class="b_t">&nbsp;==4==</span></td>
          </tr>
        </table></td>
   <td width="2"  ></td>
 </tr>
 <tr>
  <td colspan="3" align="center" valign="top">
   <div name="odiv" style="display:none" id="odiv">
   <table width="98%"  border="0" cellpadding="0" cellspacing="0">
         
         

 


 <tr>
            <td width="100%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="20%" align="center" bgcolor="#8C8C8C" class="title_1">名称</td>
                <td width="30%" align="center" bgcolor="#8C8C8C" class="title_1">内容</td>
                <td width="20%" align="center" bgcolor="#8C8C8C" class="title_1">网址</td>
                <td width="10%" align="center" bgcolor="#8C8C8C" class="title_1">期号</td>
  <td width="15%" align="center" bgcolor="#8C8C8C" class="title_1">操作</td>
              </tr>
           
               <tr>
                <td width="13%" align="center" >1</td>
                <td width="13%" align="center" >3</td>
                <td width="13%" align="center" >43</td>
                <td width="13%" align="center" >daf</td>
  <td width="13%" align="center">adf</td>
              </tr>      
       

            </table>
   </td>
          </tr>
         
        </table>
   </div>
  </td>
 </tr>
</table>

</body>
</html>




http://blog.csdn.net/liulian720/article/details/637168

看看山观观海
关注
专栏目录
js实现下拉菜单动画效果
Gyoung杨广
01-08 7263
js实现下拉菜单动画效果
原生JS 实现可折叠树菜单效果
m0_64191440的博客
08-18 1442
5.在编辑器创建文件夹复制进去压缩下载后的图标代码。1.百度阿里图标库 “网上查了好多树菜单的写法。CSDN中竟然大部分收费。
右击弹出小窗口实现删除，重命名功能---简单易懂
weixin_42484910的博客
11-15 363
右击弹出小窗口实现删除，重命名功能—简单易懂 *[ #modalDiv { width: 250px; height: 200px; border: 1px solid #000; } .gongneng { width:150px; height:50px; display: none; position: absolute; left: 160px; top: 21px; border: 1p...
重命名程序(可用js语法自定义命名格式)
我的笔记
04-09 862
实用程序function　(path){//请在这输入处理文件的方法,其它不变。//path 传入的文件路径//显示信息框ID=show//Ntxt21(oldpath,newpath); oldpath是取到的文件,newpath是已建立好的空白文本文件,此含数的作用是把oldpath追加到newpath后面,//Ntxt21(path,"f:/new.txt")//deltxt(old
HTML中制作多级菜单的js,基于JavaScript实现多级菜单效果
weixin_32915107的博客
06-15 812
本文实例为大家分享了js实现多级菜单效果展示的具体代码，供大家参考，具体内容如下具体代码如下：Document*{margin:0;padding:0;font-size:14px;}ul,li{list-style:none;}.box{margin:10px;padding:10px;width:300px;border:1px dashed #008000;/*渐进增强:首先设置一个纯色的背...
html菜单效果,HTML+JS实现的简单菜单效果
weixin_39888080的博客
06-04 338
一、实现的功能：鼠标移至菜单项，显示子菜单； 鼠标移开菜单项，隐藏子菜单。 二、实现原理简述：菜单及子菜单项位于同一容器中(我用了)，各子容器为(每一行内容放在一个div中)；鼠标进入事件，显示子菜单，鼠标离开，隐藏子菜单。三、部分代码：HTML布局部分菜单菜单项1菜单项2JS脚本部分function fun1(){document.getElementById('index').style.ba...
利用js实现下拉菜单效果
weixin_45658984的博客
02-03 5792
这个模块在实际开发中也是经常会用到的,所以让我们一起学起来把 成果图展示 鼠标移动到某一个模块上就会显示下拉菜单,在后续的开发中自己可以根据实际情况添加各种样式和链接,我这里只是做了基础的功能配置 代码展示 -------css------- <style> *{ margin: 0; padding: 0; ...
【小河今学 | JavaScript】原生JS折叠菜单效果
LB_laber的博客
08-07 769
原生JS折叠菜单效果
用JS实现下拉菜单效果
qq_37855074的博客
11-28 3639
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;下拉菜单&amp;lt;/title&amp;gt; &amp;lt;script ty
html js实现横向菜单,JavaScript实现横版菜单栏
weixin_39653361的博客
06-17 752
本文实例为大家分享了JavaScript实现横版菜单栏的具体代码，供大家参考，具体内容如下示例代码：横版菜单栏.active{background-color: aqua;}.hide{display: none;}.menu{background-color: #667dbd;width: 300px;height: 30px;}.menu-item{border: #bd342d solid ...
原生JS菜单效果.html
最新发布
08-11
原生JS菜单效果
一个很Cool的JS菜单效果
01-19
偶参照一些Flash站点的菜单, 用javascript仿了一个,效果还是挺Cool的. 简单地写一个使用说明: 第一步：实体化X-Menu类 用法: var <实体变量>.new CoolMenuControl() 第二步：建立菜单项目— 用法: <实体...
基于JavaScript实现多级菜单效果
10-19
本篇文章将详细介绍如何使用JavaScript实现一个功能完备的多级菜单。 首先，我们来看HTML结构。在提供的代码片段中，`<ul>`元素被用来构建菜单的基础结构。每个`<li>`元素代表一级菜单项，而二级、三级甚至四级菜单...
原生JS实现导航下拉菜单效果
11-27
【标题】：原生JS实现导航下拉菜单效果 【描述】：本示例旨在创建一个响应式的导航下拉菜单，其特点是一级菜单项下的二级菜单会在鼠标悬停时展开，且二级菜单的宽度与浏览器视口相同。实现这个功能主要依赖于...
js实现向右横向滑出的二级菜单效果
10-23
总结来说，js实现向右横向滑出的二级菜单效果的实现，涉及到JavaScript的鼠标事件处理、CSS的样式和动画设计，以及对DOM元素的操作。这种效果的实现不仅增加了界面的动态交互性，也提高了用户界面的可用性。通过在...
php常用函数总结
程序文摘（CodeDigest）
03-17 1895
PHP String 函数PHP：指示支持该函数的最早的 PHP 版本。函数             描述                             PHP    addcslashes() 在指定的字符前添加反斜杠。 4    addslashes() 在指定的预定义字符前添加反斜杠。 3    bin2hex() 把 ASCII 字符的字符串转换为十六进制值。 3    chop() rtrim() 的别名。 3    chr() 从指定的 ASCII 值返回字符。 3    chunk_
status87
程序文摘（CodeDigest）
10-13 888
函数名: _status87 功  能: 取浮点状态 用  法: unsigned int _status87(void); 程序例: #include  #include  int main(void) {    float x;    double y =
使用JavaScript实现打字效果动态菜单代码
这个JS打字效果动态菜单的实现涉及到JavaScript的DOM操作、定时器应用、事件监听等技术，通过结合HTML和CSS，能够创建一个富有动感和趣味性的网页菜单。对于想要提升网页交互性的开发者来说，这是一个值得学习和参考...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值