梦幻式下拉菜单

A {
TEXT-DECORATION: none
}
A:hover {
COLOR: #ff9900; TEXT-DECORATION: underline
}
TD {
FONT-SIZE: 9pt; LINE-HEIGHT: 13pt
}
TH {
FONT-SIZE: 9pt; LINE-HEIGHT: 13pt
}
BODY {
FONT-SIZE: 9pt; LINE-HEIGHT: 13pt
}
#mnu {
FILTER: revealTrans(Duration=1.5,Transition=12) visibility:hide
}

function set_mnu()
{
if (mnu.style.visibility=="hidden")
{
//产生效果和把图层显示
mnu.filters.revealTrans.apply();
mnu.style.visibility="visible";
mnu.filters.revealTrans.play();
}
else{
//隐藏图层和停止效果播放
mnu.filters.revealTrans.stop();
mnu.style.visibility="hidden" ;
}
}

　


显示菜单












测试一
测试一
测试一
查看源文件

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 梦幻式下拉菜单

    A { TEXT-DECORATION: none } A:hover { COLOR: #ff9900; TEXT-DECORATION: underline } TD { FONT-SIZE: 9pt; LINE-HEIGHT: 13pt } TH { FONT-SIZE: 9pt; LINE-HEIGHT: 13pt } BODY { FONT-SIZE: 9pt; LINE-HEIGHT: 13pt } #mnu { FILTER: revealTrans(Duration=1.5,Tr

  • Android编程之ICS式下拉菜单PopupWindow实现方法详解(附源码下载)

    Android编程之ICS式下拉菜单PopupWindow实现方法详解(附源码下载)

    本文实例讲述了Android编程之ICS式下拉菜单PopupWindow实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 右边这个就是下拉菜单啦,看见有的地方叫他 ICS式下拉菜单,哎哟,不错哦! 下面先讲一下实现原理: 这种菜单实际上就是一个弹出式的菜单,于是我们想到android PopupWindow 类,给他设置一个view 在弹出来不就OK了吗. PopupWindow 的用法也很简单 主要方法: 步骤1.new 一个实例出来,我们使用这个构造方法即可, 复制代码 代码如

  • js 单击式的下拉菜单效果实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • bootstrap响应式导航条模板使用详解（含下拉菜单，弹出框）

    本文实例为大家分享了bootstrap响应式导航条模板展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=&quo

  • Bootstrap 下拉菜单.dropdown的具体使用方法

    本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 下拉菜单.dropdown具体用法 .dropdown <下拉菜单触发器button+下拉菜单ul> .dropdown 包裹层 .dropdown-toggle 下拉菜单触发器 data-toggle="dropdown  自定义属性 可以与js关联起来 .dropdown-menu  下拉菜单 具体实例: <div class=&

  • 详解Vue用自定义指令完成一个下拉菜单（select组件）

    详解Vue用自定义指令完成一个下拉菜单（select组件）

    这次分享的是关于Vue自定义指令的使用方法,学习完基础后我们再来实战完成一个下拉列表,废话不多说,直接上干货 基本用法 //全局注册 Vue.directive('my-directive', { // 指令选项 }) // 局部注册 var app = new Vue({ el: '#app' directives: { 'my-directive': { // 指令选项 } }) 相信对Vue比较熟悉的人看完都知道,directive的写法与组件 基本类似,只是方法名由component改为

  • bootstrap组件之按钮式下拉菜单小结

    bootstrap组件之按钮式下拉菜单小结

    1.单按钮下拉菜单 基础的下拉菜单最外层是.dropdown的div 现在只需要改成.btnd-group的div就可以实现单按钮的下拉菜单 <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class=

  • JS组件Bootstrap实现下拉菜单效果代码

    JS组件Bootstrap实现下拉菜单效果代码

    Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 您可以切换下拉菜单(Dropdown)插件的隐藏内容:

  • BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)

    bootstrap框架.导航条.下拉菜单.轮播广告carousel.栅格系统布局.标签页tabs.模态框.菜单定位的个人总结,具体详情如下所示: bootstrap框架 <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 --> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible

  • Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

    Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

    在使用bootstrap制作后台时用到了响应式导航条,其中dropdown组件更是用的比较多,用的多需要点击的就多,dropdown默认鼠标左键单击才展开,如果使用鼠标放上去(hover)就展开则会省去点击时间,这样能提高效率. 原本的改造思路是:给dropdown元素绑定hover事件,hover上去的时候,执行该元素的click事件--即把hover同步为click,hover即为click. 但想到与其自己来改造,不如先在网上搜索搜索看看有没有现成的插件,果不其然就搜索到了,托管在gith

随机推荐