类似于qq官网的html,html实现类似QQ功能

/p>

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

无标题文档

#my_menu{

background:#F5F9FD; margin:0px 5px;

border: #C1E0FF 1px solid;height:99%

}

div.sdmenu {

width: 170px;

font-size: 12px;

padding-bottom: 10px;

background:#F00;

color: #fff;

}

div.sdmenu div {

overflow: hidden;

}

div.sdmenu div.collapsed {

border-bottom:#BBDDFF 1px solid;

height: 25px;

}

div.sdmenu div span {

display: block;

padding: 3px 0 0 20px;

color: #CC0000;

line-height: 22px;

background:#DDEEFF url(expanded.gif) no-repeat 4px center;

cursor: pointer;

font-size:13px

}

div.sdmenu div.collapsed span {

background-image: url(collapsed.gif);

color:#004488;

}

div.sdmenu div a {

line-height: 23px;

padding: 0 0 0 20px;

background: #ffffff url(li.gif) no-repeat 5px 7px;

display: block;

color: #333;

}

div.sdmenu div a.current {

background: #FFEEDD;

}

div.sdmenu div a:hover {

background: #FFEEDD url(linkarrow.gif) no-repeat right

center;

color: #F00;

text-decoration: none;

}

#sss{

position:absolute;

width:170px;

height:500px;

background-color:#E1F0FF;

}

.QQ

{

border-bottom:#BBDDFF 1px solid;

height: 25px;

text-align:center;

cursor: pointer;

font-size:13px

}

function SDMenu(id) {

if (!document.getElementByIdx_x ||

!document.getElementsByTagName)

return false;

this.menu = document.getElementByIdx_x(id);

this.submenus = this.menu.getElementsByTagName_r("div");

this.remember = true;

this.speed = 3;

this.markCurrent = true;

this.oneSmOnly = false;

}

SDMenu.prototype.init = function() {

var mainInstance = this;

for (var i = 0; i < this.submenus.length; i++)

this.submenus[i].getElementsByTagName_r("span")[0].onclick =

function() {

mainInstance.toggleMenu(this.parentNode);

};

if (this.markCurrent) {

var links =

this.menu.getElementsByTagName_r("a");

for (var i = 0; i

< links.length; i++)

if

(links[i].href == document.location.href) {

links[i].className = "current";

break;

}

}

if (this.remember) {

var regex = new

RegExp("sdmenu_" +

encodeURIComponent(this.menu.id) + "=([01]+)");

var match =

regex.exec(document.cookie);

if (match) {

var states =

match[1].split("");

for (var i =

0; i < states.length; i++)

this.submenus[i].className =

(states[i] == 0 ? "collapsed" : "");

}

}

};

SDMenu.prototype.toggleMenu = function(submenu) {

if (submenu.className == "collapsed")

this.expandMenu(submenu);

else

this.collapseMenu(submenu);

};

SDMenu.prototype.expandMenu = function(submenu) {

var fullHeight =

submenu.getElementsByTagName_r("span")[0].offsetHeight;

var links = submenu.getElementsByTagName_r("a");

for (var i = 0; i < links.length; i++)

fullHeight +=

links[i].offsetHeight;

var moveBy = Math.round(this.speed * links.length);

var mainInstance = this;

var intId = setInterval(function() {

var curHeight =

submenu.offsetHeight;

var newHeight = curHeight +

moveBy;

if (newHeight <

fullHeight)

submenu.style.height = newHeight + "px";

else {

clearInterval(intId);

submenu.style.height = "";

submenu.className = "";

mainInstance.memorize();

}

}, 30);

this.collapseOthers(submenu);

};

SDMenu.prototype.collapseMenu = function(submenu) {

var minHeight =

submenu.getElementsByTagName_r("span")[0].offsetHeight;

var moveBy = Math.round(this.speed *

submenu.getElementsByTagName_r("a").length);

var mainInstance = this;

var intId = setInterval(function() {

var curHeight =

submenu.offsetHeight;

var newHeight = curHeight -

moveBy;

if (newHeight >

minHeight)

submenu.style.height = newHeight + "px";

else {

clearInterval(intId);

submenu.style.height = "";

submenu.className = "collapsed";

mainInstance.memorize();

}

}, 30);

};

SDMenu.prototype.collapseOthers = function(submenu) {

if (this.oneSmOnly) {

for (var i = 0; i

< this.submenus.length; i++)

if

(this.submenus[i] != submenu

&&

this.submenus[i].className != "collapsed")

this.collapseMenu(this.submenus[i]);

}

};

SDMenu.prototype.expandAll = function() {

var oldOneSmOnly = this.oneSmOnly;

this.oneSmOnly = false;

for (var i = 0; i < this.submenus.length; i++)

if (this.submenus[i].className

== "collapsed")

this.expandMenu(this.submenus[i]);

this.oneSmOnly = oldOneSmOnly;

};

SDMenu.prototype.collapseAll = function() {

for (var i = 0; i < this.submenus.length; i++)

if (this.submenus[i].className

!= "collapsed")

this.collapseMenu(this.submenus[i]);

};

SDMenu.prototype.memorize = function() {

if (this.remember) {

var states = new

Array();

for (var i = 0; i

< this.submenus.length; i++)

states.push(this.submenus[i].className == "collapsed" ? 0 :

1);

var d = new Date();

d.setTime(d.getTime() + (30 *

24 * 60 * 60 * 1000));

document.cookie = "sdmenu_"

+

encodeURIComponent(this.menu.id) + "=" +

states.join("") + "; expires=" + d.toGMTString() + ";

path=/";

}

};

onMouseUp="releaseDiv()">

QQ面板

class="sdmenu">

系统管理

target="main">管理员设置

target="main">数据库管理

酒店管理

target="main">酒店列表

href="#">所有房间

度假管理

target="main">度假路线

target="main">高尔夫球

// </p><p>var myMenu;</p><p>window.onload = function() {</p><p>myMenu = new</p><p>SDMenu("my_menu");</p><p>myMenu.init();</p><p>myMenu.oneSmOnly = true;</p><p>};</p><p>//