网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 菜单导航 >> 正文
最新文章
· JS版无限级网页折叠菜单,类似于树形
· CSS实现4级的下拉菜单
· 简洁的滑动门菜单
· jQuery带动画效果的多级下拉菜单
· 自动切换的JS菜单
· 隔指定时间选项卡自动切换
· CSS+JS实现兼容性很好的无限级下拉菜
· 自动切换的选项卡
· 仿163网盘网站的Js折叠菜单
· 随鼠标移过动态放大的菜单导航
热门文章
 自动固定在网页顶部的悬浮菜单栏
 仿天涯固定在网页顶部的导航条
 仿淘宝商城商品属性选择效果
 无限级CSS树形菜单 Ltree Ver2.0
 二级树形菜单CSS TreeMenu
 同一页面多种Tab及滑动门应用的综合
 仿淘宝网导航的选项卡效果
 自动切换的JS菜单
 适用于网站后台的竖向二级下拉导航
 政府网站常用的蓝色二级导航菜单
相关文章
带缓冲的展开、收缩效果
仿淘宝网站的产品名称展开与折叠的代码
仿QQ导航菜单
DIV+JS可展开、折叠得仿QQ菜单
来源:站长资源网 更新时间:2010/8/11 11:44:51 阅读次数: 我要投稿
△运行 ☉预览 #复制 +收藏
特效代码:
<html>
<head>
<title>QQ菜单</title>
<style>
td { cursor: hand; font-family: Tahoma; background-color: #0066cc; color: #fff; font-size: 9pt; }
li { color: #FF0000; font-family: Tahoma; background-color: skyblue; font-size: 9pt;}
.up{ background-color: #3A6EA5; border: 1 solid #fff;
 }
</style>

<script>
function show(c_Str)
{if(document.all(c_Str).style.display=='none')
{document.all(c_Str).style.display='block';}
else{document.all(c_Str).style.display='none';}}
function high(){
if (event.srcElement.className=="k"){
event.srcElement.style.background="336699"
event.srcElement.style.color="white"
}
}
function low(){
if (event.srcElement.className=="k"){
event.srcElement.style.background="99CCFF"
event.srcElement.style.color=""
}
}
</script>
</head>

<body topmargin="0" leftmargin="5">
<div align="left">
  <table border="0" width="98" cellspacing="0" cellpadding="0">
    <tr>
      <td><div class=up onclick=show("a0")>ASP代码</div><div onmouseover=high() onmouseout=low()  id=a0 style="display:none">
<li><a href="http://admin158.com/sort/list_1_1.shtml">菜单导航</a></li><li><a href="http://admin158.com/sort/list_3_1.shtml">层和布局</a></li><li><a href="http://admin158.com/sort/list_5_1.shtml">背景特效</a></li><li><a href="http://admin158.com/sort/list_10_1.shtml">图片特效</a></li><li><a href="http://admin158.com/sort/list_9_1.shtml">浏览器相关</a></li><li><a href="http://admin158.com/sort/list_13_1.shtml">广告代码</a></li></div></td>
    </tr>
    <tr>
      <td><div class=up onclick=show("a1")>PHP源码</div><div onmouseover=high() onmouseout=low()  id=a1 style="display:none">
<li><a href="http://admin158.com/sort/list_6_1.shtml">日期时间</a></li><li><a href="list_2_1.shtml">文本特效</a></li><li><a href="http://admin158.com/sort/list_8_1.shtml">表格相关</a></li><li><a href="http://admin158.com/sort/list_11_1.shtml">表单及按钮</a></li><li><a href="http://admin158.com/sort/list_4_1.shtml">计算转换</a></li><li><a href="http://admin158.com/sort/list_7_1.shtml">游戏娱乐</a></li></div></td>
    </tr>
  </table>
</div>
</body>
</html>

△运行 ☉预览 #复制 +收藏
特效说明:
DIV+JS类QQ菜单,可展开折叠,小巧灵活,代码修改方便,菜单采用LI列表,用CSS可以统一去控制,有兴趣的可以再完善一下。
  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号