五颜六色的弹性下拉导航菜单代码

代码简介：

弹性十足的个性化导航菜单，鼠标点击后像弹簧一样弹开，缓慢稳定结束，菜单里可以放上图片和文字，或者是列表内容，基于CSS+JS实现，比较实用。

代码内容：

?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>五颜六色的弹性下拉导航菜单代码_网页代码站(www.webdm.cn)</title>
<style type="text/css">
<!--
a:link,a:visited    { text-decoration: none; color: #666666 }
a:hover            { text-decoration: underline }
#hor1 {
    position:absolute;
    left:320px;
    top:20px;
    width:220px;
    height:20px;
    z-index:1;
    background-color: #999900;
}
#hor2 {
    position:absolute;
    left:320px;
    top:40px;
    width:220px;
    height:20px;
    z-index:2;
    background-color: #FFCC00;
}
#hor3 {
    position:absolute;
    left:320px;
    top:60px;
    width:220px;
    height:20px;
    z-index:3;
    background-color: #99CC00;
}
#board1 {
    position:absolute;
    left:320px;
    top:40px;
    width:220px;
    height:120px;
    z-index:-100;
    background-color: #333333;
    visibility: hidden;
}
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: bold;
}
body {
    background-color: #666666;
}
#board2 {
    position:absolute;
    left:320px;
    top:60px;
    width:220px;
    height:120px;
    z-index:-90;
    background-color: #333333;
    visibility: hidden;
}
#board3 {
    position:absolute;
    width:220px;
    height:120px;
    z-index:-80;
    left: 320px;
    top: 80px;
    background-color: #333333;
    visibility: hidden;
}
#hor4 {
    position:absolute;
    left:320px;
    top:80px;
    width:220px;
    height:20px;
    z-index:4;
    background-color: #99CCCC;
}
#board4 {
    position:absolute;
    left:320px;
    top:100px;
    width:220px;
    height:120px;
    z-index:-70;
    background-color: #333333;
    visibility: hidden;
}
 
-->
</style>
<script type="text/javascript">
lastNo=0
function re(menu_no){
if(lastNo!=menu_no){
cur=menu_no+1
lastNo=menu_no
rest()
}else{
cur=100
}
document.getElementById("board"+menu_no).style.visibility="visible"
}
function rest(){
for(i=1;i<=4;i++){
document.getElementById("hor"+i).style.top=20*i;
document.getElementById("board"+i).style.visibility="hidden"
}
menu_num=4;
 act=1
 height=120+20
 speed=0;
 posY=0;
}
function huke(){
if(act==1 && cur<100){
speed=(height-posY)*0.69+speed*0.6
posY+=speed
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=posY+(i-2)*20
}
if(Math.abs(height-posY)<0.5){
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=height+(i-2)*20
}
act=0
}
setTimeout("huke()",50)
}
}
 
</script>
</head>
<body>
<div id="hor1" onclick="re(1);huke()">ASP</div>
<div id="hor2" onclick="re(2);huke()">PHP</div>
<div id="hor3" onclick="re(3);huke()">DELPHI</div>
<div id="hor4" onclick="re(4);huke()">AJAX</div>
<div id="board1">本栏提供精品ASP源码下载。</div>
<div id="board2">你难道不喜欢WebDm.CN吗？</div>
<div id="board3">网站与老婆有什么不同？</div>
<div id="board4">Ajax是一种新型的WEB编程脚本，大家都很喜欢啊……
<a href="/" target="_blank">WebDm.CN</a></div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/6a6cee74-0c02-429a-8ddc-7b410bd1cbea.html

posted @   网页代码站  阅读(414)  评论(2)  编辑  收藏  举报
编辑推荐：
· ASP.NET Core 模型验证消息的本地化新姿势
· 对象命名为何需要避免'-er'和'-or'后缀
· SQL Server如何跟踪自动统计信息更新?
· AI与.NET技术实操系列：使用Catalyst进行自然语言处理
· 分享一个我遇到过的“量子力学”级别的BUG。
阅读排行：
· dotnet 源代码生成器分析器入门
· 官方的 MCP C# SDK：csharp-sdk
· 从零开始：基于 PyTorch 的图像分类模型
· [WPF] 在RichTextBox中输出Microsoft.Extension.Logging库的
· 一步一步教你部署ktransformers，大内存单显卡用上Deepseek-R1
点击右上角即可分享
微信分享提示