不用script仅用css编写无限分级弹出菜单

不用script仅用css编写无限分级弹出菜单

  一直以来,我们大多使用js来实现弹出菜单,可是根据 w3c 的CSS标准,根本就没有这个必要。只需要简单得使用css+html就可以做出一个无限分级的弹出菜单。

  没错,就是利用 Element:hover 这个伪类。

  注意,浏览这个例子,你必须使用标准浏览器,例如 Mozilla Firefox/ Opera 7.5

  IE 不行!!

  

function Preview(obj)

{

var TestWin=open(”);

TestWin.document.write(obj.value);

}

function copyCode(obj) {

var rng = document.body.createTextRange();

rng.moveToElementText(obj);

rng.scrollIntoView();

rng.select();

rng.execCommand(“Copy”);

rng.collapse(false);

}

function saveCode(obj) {

var winname = window.open(”, ‘_blank’, ‘top=10000’);

winname.document.open(‘text/html’, ‘replace’);

winname.document.writeln(obj.value);

winname.document.execCommand(‘saveas’,”,’homepage.yesky.com.htm’);

winname.close();

}

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>css menu</title>

<style type=”text/css”>

/*<![CDATA[*/

ul.menu

{

width:180px;

cursor:hand;

list-style-type:none;

border:1px solid #cccccc;

padding:0px;

margin:0px;

}

ul.menu li

{

width:100%;

display:block;

position:relative;

}

ul.menu li a

{

background-color:#06829C;

color:#ffffff;

width:100%;

display:block;

font-size:9pt;

padding:2px;

padding-left:10px;

}

ul.menu li ul.menu

{

display:none;

width:190px;

第 1 2 3 页

不用script仅用css编写无限分级弹出菜单

相关文章:

你感兴趣的文章:

标签云: