有趣的仿QQ面板导航菜单


QQ的组切换效果相信大家都很熟悉,现在我们在网页中用JavaScript模拟制作一个这样的切换效果,用它作为页面导航菜单可是个不错的主意哦!

  以下是效果演示,其中菜单的组数和内容可以任意定义。

  代码及其解释:
    先创建一个<a href="/keys/css/index.html" target="_blank">CSS</a>样式表,置于<HEAD>模块中,分别定义导航菜单的标题和内容的样式:

 

    然后在<BODY>模块中加入以下JavaScript代码:

  QQ的组切换效果相信大家都很熟悉,现在我们在网页中用JavaScript模拟制作一个这样的切换效果,用它作为页面导航菜单可是个不错的主意哦!

  以下是效果演示,其中菜单的组数和内容可以任意定义。

  代码及其解释:
    先创建一个<a href="/keys/css/index.html" target="_blank">CSS</a>样式表,置于<HEAD>模块中,分别定义导航菜单的标题和内容的样式:

 

    然后在<BODY>模块中加入以下JavaScript代码:

 

(该脚本在windows 2000、windows XP及各自带的IE下测试通过)

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3