`
jackie9305
  • 浏览: 39118 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

页面中推拉菜单的简易实现

阅读更多

直接将下面这段代码复制到html中就可以看到效果啦!

<html>
<head><style type="text/css">
<!--.link {
color : #000000;
text-decoration : none;
}A.link:hover {
color : red;
}A.link:active {
color : #000000;
text-decoration : none;
}//-->
</style>
<style type="text/css">
<!--
#slidemenubar2{position:absolute;left:-110pt;width:120pt;top:100pt;border:1.5pt solid black;
background-color:#ffffff;layer-background-color:#ffffff;font: 9pt/20pt "宋体";}
body {  font-size: 9pt; margin: 0pt}
#slidemenubar { position:absolute;
left:-110pt;width:120pt;top:100pt;border:1.5pt black solid;background-color:#F3F3F3;layer-background-color:lightyellow;
font: 9pt/20pt "宋体"; }
//-->
</style>

<title>预览特效</title>
</head>
<body><script language="JavaScript1.2">
if (document.all)
document.write('<div id="slidemenubar2" style="left:-100" onMouseover="pull()" onMouseout="draw()">')
</script> <layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()"> <script language="JavaScript1.2">
var sitems=new Array()
var sitemlinks=new Array()
//以下是菜单内容,自由设置;
sitems[0]="本站首页"
sitems[1]="最新更新"
sitems[2]="梦想软件"
sitems[3]="其它栏目"
sitems[4]="桌面壁纸"
sitems[5]="给我留言"
sitems[6]="下载特区"
sitems[7]="Email Me"
sitems[8]="我的简介"
//菜单项目连接
sitemlinks[0]="http://qdjacky.126.com"
sitemlinks[1]="http://www.abc.com"
sitemlinks[2]="http://abc.ab.com"
sitemlinks[3]="../index.htm"
sitemlinks[4]="../jsschool/index.htm"
sitemlinks[5]="../../../gsbook.htm"
sitemlinks[6]="../../../perl/index.htm"
sitemlinks[7]="mailto:jackie@163.com"
sitemlinks[8]="http://qdjacky.126.com"
for (i=0;i<=sitems.length-1;i++)
document.write('<a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>')
</script> </layer>
<script language="JavaScript1.2">
function regenerate(){
window.location.reload()
}function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}window.onload=regenerate2
if (document.all){
document.write('</div>')
themenu=document.all.slidemenubar2.style
rightboundary=0
leftboundary=-150
}else{
themenu=document.layers.slidemenubar
rightboundary=150
leftboundary=10
}function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",50)
}function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",50)
}function pullengine(){
if (document.all&&themenu.pixelLeft<rightboundary)
themenu.pixelLeft+=5
else if(document.layers&&themenu.left<rightboundary)
themenu.left+=5
else if (window.pullit)
clearInterval(pullit)
}function drawengine(){
if (document.all&&themenu.pixelLeft>leftboundary)
themenu.pixelLeft-=5
else if(document.layers&&themenu.left>leftboundary)
themenu.left-=5
else if (window.drawit)
clearInterval(drawit)
}</script><p align="center" style="line-height: 20px"><font color="#666666"><span
style="font-size: 9pt">主页特效制作百宝箱V2.0-特效预览窗口-推拉门式样的菜单<br>
<font face="Arial, Helvetica, sans-serif">Copyright By dream workroom<font color="#ff0000">
</font>All Right Reserved</font> </span></font><img src="logo.gif"></p>
<hr size="1" noshade width="100%" color="red">
<font face="Arial, Helvetica, sans-serif" color="#666666">
<p align="center" style="line-height: 20px"></font> 

</body>
</html>

分享到:
评论

相关推荐

    Axure 侧边栏推拉菜单原型.zip

    在设计侧边栏推拉菜单时,我们可以利用Axure的动态面板、交互事件和页面状态等功能,构建出真实世界中的用户体验。 1. **动态面板与状态管理**:侧边栏推拉菜单的核心是动态面板,它可以在不同的状态下显示不同的...

    delphi左侧推拉式菜单实例代码

    通过打开和分析这些文件,初学者可以逐步了解如何在Delphi中实现推拉式菜单功能。 总之,这个Delphi实例代码提供了一个左侧推拉式菜单的实现,涵盖了基本的界面设计和事件处理,对于熟悉Delphi界面开发的初学者来说...

    delphi推拉式菜单实例

    本实例将探讨如何在Delphi中实现一个推拉式菜单。 首先,我们需要了解Delphi中的菜单系统。在Delphi中,菜单通常由TMainMenu组件来创建和管理。TMainMenu是一个可视化组件,可以在表单设计时直接拖放到表单上。你...

    javascript推拉门式菜单

    在JavaScript中,可以通过动态改变子菜单图层的`left`属性值来实现推拉效果。当用户点击主菜单项时,触发`onclick`事件,调用相应的JavaScript函数,例如`canout()`和`moveout()`,这两个函数负责控制子菜单的展开和...

    Android实现3D推拉门式滑动菜单源码解析

    在实现3D滑动菜单时,通常会在滑动事件中调整Matrix和Camera的状态,从而实现沿Y轴的旋转动画。 为了封装这个功能,我们可以创建一个自定义视图类,比如名为`Sliding3DLayout`。这个类继承自`FrameLayout`,并包含...

    android页面推拉效果

    在Android开发中,"android页面推拉效果"通常指的是实现侧滑菜单或者抽屉式导航的效果,这种效果在很多应用中都非常常见,如Facebook的原生应用就使用了类似的设计。这种效果允许用户通过从屏幕边缘向内滑动来显示或...

    推拉门式菜单-兼容ie,ff

    在本资源中,作者针对兼容性问题进行了优化,使得推拉门菜单可以在Internet Explorer(IE)和Firefox(FF)这两个主流浏览器上正常工作。 在Web开发中,由于不同浏览器对CSS、JavaScript等技术的解析和实现存在差异...

    Android 3D滑动菜单完全解析,实现推拉门式的立体特效Demo

    本文将深入探讨如何实现一个3D滑动菜单,即推拉门式的立体特效。这种效果可以使应用程序的用户体验更加生动,增加用户与应用的互动性。我们将基于提供的"ThreeDSlidingLayoutDemo"代码示例进行讨论。 首先,3D滑动...

    “推拉窗”样式图文菜单,横向滑动展开.rar

    在本例中,当用户点击一个图标,对应的菜单项将展开显示内容,而之前展开的菜单则会自动收拢,保持了“推拉窗”的独特风格,同时也保证了页面空间的有效利用。 实现这个效果的关键代码可能包括以下几个部分: 1. *...

    推拉门式菜单

    推拉门式样的菜单[根据提示修改][共2步]====1、将以下代码加入到HEML的&lt;head&gt;&lt;/head&gt;之间:;text/css&quot;&gt;&lt;!--.link {color : #000000;text-decoration : none;}A.link:hover {color : red;}A.link:active {color ...

    Qt实现推拉功能源码

    在本文中,我们将深入探讨如何使用Qt框架来实现推拉(Docking)功能,以便在一个主窗体上灵活地推拉出子窗体,同时保持布局的完整性和可移动性。Qt是一个强大的C++库,它提供了丰富的图形用户界面(GUI)工具,使...

    jQuery推拉式3D隐藏侧边栏菜单特效

    此特效中的侧边栏不仅能够隐藏和显示,而且在切换时具有3D推拉效果,增强了用户体验,使菜单的打开和关闭过程更具动态感。 CSS(层叠样式表)在这个特效中起到了关键作用,它定义了元素的外观、布局和结构。通过CSS...

    jQuery和CSS3全屏推拉式滑动菜单特效

    本篇将深入探讨如何利用jQuery和CSS3实现全屏推拉式滑动菜单特效,以及相关技术的核心知识点。 **jQuery库** jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。jQuery的...

    侧边栏推拉菜单原型-Axure原型图线框图RP源文件模板.zip

    此外,模板还提供了丰富的交互效果,如轮播图、下拉菜单、弹窗等,让您的原型更具吸引力和实用性。在设计这套模板时,我们充分考虑了用户体验和视觉美观。每个组件都经过精心设计,既符合最新的设计趋势,又易于使用...

    超级推拉__SU插件

    "超级推拉__SU插件"是一款专为SketchUp设计的增强型插件,它扩展了SketchUp原生的功能,特别是在3D建模过程中提供了更高效、更精确的推拉操作。SketchUp是一款广泛应用于建筑、室内设计、景观设计等领域的三维建模...

    FlashMeeting(FFmpeg集成metaRTC实现webrtc推拉流)

    Windows下FFmpeg集成metaRTC实现webrtc推拉流的例子Windows下FFmpeg集成metaRTC实现webrtc推拉流的例子Windows下FFmpeg集成metaRTC实现webrtc推拉流的例子Windows下FFmpeg集成metaRTC实现webrtc推拉流的例子Windows...

    2018.3.22联合推拉4.3

    重启SketchUp后,可以在“窗口”菜单下的“插件”选项中找到它。激活插件后,只需选择需要操作的面,点击插件图标,即可进行联合推拉操作。 在实际应用中,“联合推拉4.3”插件能帮助用户快速创建和修改复杂的建筑...

    推拉门效果

    推拉门效果是一种常见的UI动画效果,常用于应用界面的导航栏或抽屉式菜单,让用户通过滑动手势实现内容的展示与隐藏。在Android开发中,这种效果可以通过结合触摸事件处理和Scroller类来实现。 触摸事件是Android...

    Delphi 仿B/S横向菜单

    TMenu是Delphi中用于创建菜单的内置组件,它可以用来创建下拉式菜单、弹出式菜单以及横向菜单。要实现横向菜单,我们可以将TMenu的Style属性设置为msPopup,这样菜单项就会在水平方向上展开。 接着,我们可以利用...

Global site tag (gtag.js) - Google Analytics