多级滑动菜单

最新推荐文章于 2019-07-02 10:33:20 发布
最新推荐文章于 2019-07-02 10:33:20 发布
阅读量346 收藏
点赞数
分类专栏： div+css 文章标签： filter class border up function div

 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页滑出式菜单</title>
<style>
body,td,a {font-size:9pt;color:black;text-decoration:none}
.normal {padding:2px}
.up {padding:1px;border:#999999 1px solid;background:#cccccc}
.down {padding:1px;border:dbdbdb 1px solid;background:dbdbdb}
.menuv {filter: revealTrans(transition=23,duration=0.5);padding:2px}
</style>
</head>

<body onMouseMove="move()" onLoad="bodyload()">
<script>
//闪烁的表格边框
function flashit(){if(!document.all)return;if (td123.style.borderColor=="black")td123.style.borderColor="#999999";else td123.style.borderColor="black"}setInterval("flashit()",500)
//渐入的效果,改变alpha值
function high(image){theobject=image,highlighting=setInterval("highlightit(theobject)",100)}function low(image){clearInterval(highlighting),image.filters.alpha.opacity=50}function highlightit(cur2){if (cur2.filters.alpha.opacity<100)cur2.filters.alpha.opacity+=20;else if(window.highlighting)clearInterval (highlighting)}
//拖动层的js
var over=false,down=false,divleft,divtop;function move(){if(down){plane.style.left=event.clientX-divleft;plane.style.top=event.clientY-divtop;}}
//滑动层
function bodyload()
{
if(plane.style.pixelTop!=0)
{
plane.style.pixelTop-=10
setTimeout('bodyload()',1)
}
}
//渐变显示层
function Show(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "visible";
divid.filters.revealTrans.play();
}
function Hide(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "hidden";
divid.filters.revealTrans.play();
}
</script>
<div style="position:absolute;z-index:1;width:1;height:1; left: 0; top: 500" ID=plane οnmοusedοwn="down=true;divleft=event.clientX-parseInt(plane.style.left);divtop=event.clientY-parseInt(plane.style.top)" οnmοuseup="down=false">
  <table id="td123" cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="f4f4f4">
<tr>
<td bgcolor="#cccccc" height="20" style="BORDER:#999999 1px solid;cursor:move">
<div align="center">多级滑动菜单</div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this),Show(menu1)
" onMouseOut="this.className='normal',low(this),menu1.style.visibility='hidden'" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'" >
<div align="right">有下级菜单>></div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this),Show(menu2)" onMouseOut="this.className='normal',low(this),menu2.style.visibility='hidden'" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'" >
<div align="right">有下级菜单>></div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align="right">无下级菜单>></div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align="right">无下级菜单>></div>
</td>
</tr>
</table>
<div id="menu1" style="position:absolute;top:24px;left:96px; z-index:1; visibility: hidden; width: 105"
onMouseOver=this.style.visibility='visible'
onMouseOut=this.style.visibility='hidden' class="menuv">
<table cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="f4f4f4" align="right">
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align="center">子菜单</div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align=center>子菜单</div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align=center>子菜单</div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align=center>子菜单</div>
</td>
</tr>
</table>
</div>
<div id="menu2" style="position:absolute;top:45px;left:96; z-index:1; visibility: hidden; width: 105"
onMouseOver=this.style.visibility='visible'
onMouseOut=this.style.visibility='hidden' class="menuv">
<table cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="f4f4f4" align="right">
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align="center">子菜单</div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align=center>子菜单</div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align=center>子菜单</div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align=center>子菜单</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

cf_nick
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
多级菜单
暖心少年
05-29 512
链接：https://pan.baidu.com/s/1lqOwouuupdF57wPw8fdZRg 密码：6wjt
多级下拉菜单
ainizhongguoaa的博客
08-18 315
----------------------- Private Sub ComboBox1_Click() ActiveCell = Me.ComboBox1.Value End Sub --------------------------------- Private Sub ComboBox2_Click() ActiveCell = Me.ComboBox2.Value E
CSS多级滑动门效果导航菜单代码
迷失曾经
04-07 2251
CSS多级滑动门效果导航菜单代码!真不错。很好用。 演示图片: 详细代码: 纯CSS多级滑动门效果导航菜单 #info {width:750px; margin:0 auto;} #outer {width:750px; height:81px; position:relative; background:url(http://cssdh.mianfeimoban.co
制作多级滑动tab菜单
03-01
NULL 博文链接：https://niunan.iteye.com/blog/278962
jQuery 横向多级滑动导航菜单
12-02
jQuery 横向多级滑动导航菜单，配合CSS形成超炫丽的菜单效果，鼠标同时滑过多个菜单，会有意想不到的效果，希望大家喜欢。 http://www.codefans.net/upload/softimg/11/11137.gif
滑动（二级分类）
Jang_AnGe的博客
07-02 272
public class MainActivity extends AppCompatActivity { @BindView(R.id.viewPager) ViewPager viewPager; @BindView(R.id.radioGroup) RadioGroup radioGroup; List list = new ArrayList<>(); @Override pr...
JavaScript 多级联动浮动(下拉)菜单 (第二版)
wcqlwyt的博客
05-20 2423
上一个版本（第一版请看这里）基本实现了多级联动和浮动菜单的功能，但效果不是太好，使用麻烦还有些bug，实用性不高。 这次除了修改已发现的问题外，还对程序做了大幅调整和改进，使程序实用性更高，功能更强大
Js开发多级滑动菜单
02-22
在JavaScript（JS）开发中，创建一个多级滑动菜单是一项常见的任务，特别是在构建交互式网站时。这样的菜单能够提供良好的用户体验，使用户能够方便地浏览和访问网站的深层内容。以下是一些关于如何使用JS开发多级...
jquery多级下拉菜单
06-22
在创建交互式网站时，多级下拉菜单是常见的导航元素，尤其适用于组织复杂的网站结构。本教程将重点讲解如何使用jQuery实现一个简单易用的多级下拉菜单，适合jQuery初学者。 首先，我们需要理解基本的HTML结构来构建...
侧边栏多级菜单滑动效果+JQ解决事件冒泡
lochoto的博客
11-25 610
先搭好整体结构，样式根据情况设计 &amp;amp;lt;ul&amp;amp;gt; &amp;amp;lt;li&amp;amp;gt; &amp;amp;lt;a class=&amp;quot;item-1st&amp;quot;&amp;amp;gt;一级菜单&amp;amp;lt;/a&amp;amp;gt; &amp;amp;lt;ul class=&amp;
纯CSS滑动显示多级菜单
tyt叮当tyt的专栏
06-20 819
a { text-decoration: none; /*取消下划线*/ } #menu ul { list-style: none; /*取消前缀符号*/ padding: 0; border-top: 1px solid #fff; /*border用于设置菜单边界线，可有可无*/ border-left: 1px solid #fff; } #menu ul li { flo
计算机模拟考试.doc
07-18
计算机
《单片机原理与接口技术》--试卷A及参考答案.doc
07-18
单片机
艾意凯2023国际制药企业的中国市场机遇分析报告英文版.pdf
07-18
医疗行业研究报告
胰岛素行业深度报告国产替代开拓欧美市场国产胰岛素进入新阶段.pdf
07-18
胰岛素行业深度报告国产替代开拓欧美市场国产胰岛素进入新阶段
药物涂层球囊临床应用中国专家共识（第二版）.pdf
07-18
药物涂层球囊临床应用中国专家共识（第二版）
计算机审计稿.doc
07-18
计算机
细胞分选仪，全球前10强生产商排名及市场份额.docx
最新发布
07-18
细胞分选仪，全球前10强生产商排名及市场份额.docx
CSS实现：滑动菜单、多级下拉等炫酷菜单栏实例
"利用CSS实现菜单栏的各种实例代码，包括滑动菜单、左侧带图标多级下拉菜单、立体动感菜单、手风琴菜单、鼠标滑动展开的二级菜单以及带有未读数目显示和折叠功能的垂直多级菜单。" 在前端开发中，创建吸引人的用户...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值