[网网秀]Javascript代码碎片四(导航{tx}) - 无边尘事皆忘却,只有雪花满 ...企业库|免费b2b网站

[网网秀]Javascript代码碎片四(导航{tx}) - 无边尘事皆忘却,只有雪花满 ...

[网网秀]Javascript代码碎片四(导航{tx}) [原创 2010-06-06 14:24:38] 删除...

4-1 折叠展开收缩效果的栏目分类导航

td {font-size: 12px;}

</style>

</head>

<body>

<tr>

</tr>

<tr>

<!--

var number=8;

function LMYC() {

var lbmc;

//var treePic;

for (i=1;i<=number;i++) {

lbmc = eval('LM' + i);

//treePic = eval('treePic'+i);

//treePic.src = 'images/file.gif';

lbmc.style.display = 'none';

}

function ShowFLT(i) {

lbmc = eval('LM' + i);

//treePic = eval('treePic' + i)

if (lbmc.style.display == 'none') {

LMYC();

//treePic.src = 'images/nofile.gif';

lbmc.style.display = '';

}

else {

//treePic.src = 'images/file.gif';

lbmc.style.display = 'none';

}

//-->

</script>

<tr>

文管产品</a> </td>

</tr>

<td>

<tr>

文件夹</a> </td>

</tr>

<tr>

</tr>

<tr>

资料册</a> </td>

</tr>

<tr>

</tr>

<tr>

档案盒</a> </td>

</tr>

<tr>

</tr>

<tr>

文件盒</a> </td>

</tr>

<tr>

</tr>

<tr>

文件柜</a> </td>

</tr>

<tr>

</tr>

<tr>

公文包</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

桌面文具</a> </td>

</tr>

<td>

<tr>

削笔机</a> </td>

</tr>

<tr>

</tr>

<tr>

订书机</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

商用机器</a> </td>

</tr>

<td>

<tr>

碎纸机</a> </td>

</tr>

<tr>

</tr>

<tr>

切纸刀</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

书写工具</a> </td>

</tr>

<td>

<tr>

中性笔</a> </td>

</tr>

<tr>

</tr>

<tr>

圆珠笔</a> </td>

</tr>

<tr>

</tr>

<tr>

记号笔</a> </td>

</tr>

<tr>

</tr>

<tr>

白板笔</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

纸制品</a> </td>

</tr>

<td>

<tr>

传真纸</a> </td>

</tr>

<tr>

</tr>

<tr>

复印纸</a> </td>

</tr>

<tr>

</tr>

<tr>

复写纸</a> </td>

</tr>

<tr>

</tr>

<tr>

便条纸</a> </td>

</tr>

<tr>

</tr>

<tr>

百事贴</a> </td>

</tr>

<tr>

</tr>

<tr>

皮面笔记本</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

办公电子</a> </td>

</tr>

<td>

<tr>

计算器</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

IT周边产品</a> </td>

</tr>

<td>

<tr>

阅读架</a> </td>

</tr>

<tr>

</tr>

<tr>

CD保护</a> </td>

</tr>

<tr>

</tr>

<tr>

光盘盒</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

办公生活用品</a> </td>

</tr>

<td>

<tr>

清洁桶</a> </td>

</tr>

<tr>

</tr>

<tr>

白板</a> </td>

</tr>

<tr>

</tr>

<tr>

网状文具</a> </td>

</tr>

<tr>

</tr>

<tr>

封箱器</a> </td>

</tr>

<tr>

</tr>

<tr>

购物袋</a> </td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</table>

4-2 腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果二

function move(x, y) {

if (document.all) {

object1.style.pixelLeft += x;

object1.style.pixelTop += y;}

else

if (document.layers) {

document.object1.left += x;

document.object1.top += y;

}};

function position() {

document.object1.left += -200;

document.object1.top += 0;

document.object1.visibility = "show"

};

function makeStatic() {

if (document.all) {object1.style.pixelTop=document.body.scrollTop+100}

else {eval('document.object1.top=eval(window.pageYOffset+20)');}

setTimeout("makeStatic()",0);}

</script>

if (document.all)

document.write('<DIV ID="object1" style="Position : Absolute ;Left : -125px ;Top : 20px ;Width : 0px ;Z-Index : 20">')

</script>

<tr>

<tr>

</tr>

<tr>

<td>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<!--

if (document.all||document.layers)

makeStatic();

if (document.layers) {

window.onload=position;

}

var sitems=new Array();

var sitemlinks=new Array();

function hl(n) {

n.className='hl'}

function n(h) {

h.className='n'}

//--></script>

</table>

if (document.all)

document.write('<\/DIV>')

</script>

</layer>

</body>

</html>

4-3 左右交叉合并导航效果

<!-- Beginning of JavaScript -

// Edit your messages. You can add as many messages a you like.

var message = new Array()

message[0]="欢迎光临国内{zd0}的新闻站点---新浪网!"

message[1]="欢迎光临国内{zd0}的综合性站点---网易!"

message[2]="欢迎光临国内{zd0}的搜索引擎站点---搜狐!"

message[3]="欢迎光临国内{zd0}的游戏站点---第九城市!"

// The links of your messages. Be sure that you configure as many links as messages.

// If don't want to link your messages write '#' instead of an URL (see last sample).

var messageurl = new Array()

messageurl[0]="http://../www.sina.com.cn/default.htm"

messageurl[1]="http://../www.163.com/default.htm"

messageurl[2]="http://../www.sohu.com/default.htm"

messageurl[3]="http://../www.the9.com/default.htm"

var messagetarget=new Array()

messagetarget[0]="_blank"

messagetarget[1]="_blank"

messagetarget[2]="_blank"

messagetarget[3]="_blank"

// The width of your textbox (pixels).

// Be sure that 'textwidth' is slightly bigger than the 'width' configured inside the stylesheet

var textwidth=260

// The height of your textbox (pixels)

// Be sure that 'textheight' is slightly bigger than the 'height' configured inside the stylesheet

var textheight=75

// Final horizontal position of the textbox: distance to the left margin of the window (pixels)

// IMPORTANT:

// if you want to center the textbox in the middle of the browser-window then write -1.

// If you want to place the textbox on an absolute position

// then write the number (for instance 223).

var x_finalpos=-1

// Final vertical position of the textbox: distance to the top margin of the window

var y_finalpos=20

// Total number of textslices

var textslices=10

// Standstill of textbox (seconds)

var pausetext=5

// Speed of horizontal gliding

var step=10

var pause=40

// Do not edit the variables below this line

var x_rightspans=0

var x_leftspans=0

var marginright

var marginleft

var height_slice=Math.floor(textheight/textslices)

var cliptop=0

var clipbottom=cliptop+height_slice

var clipleft=0

var clipright=textwidth

var spannummer=0

var spannrbefore=0

var i_message=0

pausetext=pausetext*1000

function initiate() {

if (document.all) {

if (x_finalpos==-1) {

x_finalpos=Math.floor(document.body.clientWidth/2)-Math.floor(textwidth/2)

}

changemessage()

}

function changemessage() {

for (i=0;i<=textslices-1;i++) {

var thisspan=eval("span"+i)

thisspan.innerHTML="<a href='"+messageurl[i_message]+"' target='blank'>"+message[i_message]+"</a>"

}

gostartposition()

}

function gostartposition() {

for (i=0;i<=textslices-1;i+=2) {

var thisspan=eval("document.all.span"+i+".style")

thisspan.posLeft=marginright

}

for (i=1;i<=textslices-1;i+=2) {

var thisspan=eval("document.all.span"+i+".style")

thisspan.posLeft=marginleft

}

moveslices_IE()

}

function moveslices_IE() {

if (x_rightspans==0 || x_leftspans==0) {

if (x_rightspans==0) {

for (i=0;i<=textslices-1;i+=2) {

var thisspan=eval("document.all.span"+i+".style")

thisspan.posLeft-=step

}

if (thisspan.posLeft<=x_finalpos) {

x_rightspans=1

for (i=0;i<=textslices-1;i+=2) {

var thisspan=eval("document.all.span"+i+".style")

thisspan.posLeft=x_finalpos

}

if (x_leftspans==0) {

for (i=1;i<=textslices-1;i+=2) {

var thisspan=eval("document.all.span"+i+".style")

thisspan.posLeft+=step

}

if (thisspan.posLeft>=x_finalpos) {

x_leftspans=1

for (i=1;i<=textslices-1;i+=2) {

var thisspan=eval("document.all.span"+i+".style")

thisspan.posLeft=x_finalpos

}

var timer=setTimeout("moveslices_IE()",pause)

}

else {

clearTimeout(timer)

x_rightspans=0

x_leftspans=0

i_message++

if (i_message > message.length-1) {

i_message=0

}

var timer=setTimeout("changemessage()",pausetext)

}

// - End of JavaScript - -->

</script>

<style>

A {

color : red;

text-decoration : none

}

A:hover {

color : white;

text-decoration : none

}

.textbox {

font-size : 18;

font-family : Verdana;

font-style : normal;

color : red;

border-width : 4;

text-align : center;

background-color : blue;

border-style : solid;

padding : 5;

height : 65;

width : 250;

overflow : clip;

font-weight : bold;

}

</style>

<!-- Beginning of JavaScript -

// Do not edit this script-block

if (document.all) {

for (i=0;i<=textslices-1;i+=2) {

marginright=document.body.clientWidth+50

document.write("<span class='textbox' id='span"+i+"' style='position:absolute;visibility:visible; left:"+marginright+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")

document.write("</span>")

cliptop+=2*height_slice

clipbottom+=2*height_slice

}

cliptop=height_slice

clipbottom=2*height_slice

for (i=1;i<=textslices-1;i+=2) {

marginleft=-textwidth-50

document.write("<span class='textbox' id='span"+i+"' style='position:absolute;visibility:visible; left:"+marginleft+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")

document.write("</span>")

cliptop+=2*height_slice

clipbottom+=2*height_slice

}

// - End of JavaScript - -->

</script>

</div></body>

4-4类似按钮效果的网站导航CSS代码(html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Lists as navigation</title>

content="text/html; charset=utf-8" />

#navigation {

font-size:90%

}

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

padding-top: 1em;

}

#navigation li {

display: inline;

}

#navigation a:link, #navigation a:visited {

margin-right: 0.2em;

padding: 0.2em 0.6em 0.2em 0.6em;

color: #A62020;

background-color: #FCE6EA;

text-decoration: none;

border-top: 1px solid #FFFFFF;

border-left: 1px solid #FFFFFF;

border-bottom: 1px solid #717171;

border-right: 1px solid #717171;

}

#navigation a:hover {

border-top: 1px solid #717171;

border-left: 1px solid #717171;

border-bottom: 1px solid #FFFFFF;

border-right: 1px solid #FFFFFF;

}

</style>

</head>

<body>

<ul>

<li><a href="#">Recipes</a></li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Articles</a></li>

<li><a href="#">Buy Online</a></li>

</ul>

</div>

</body>

</html>

4-5网页教学网制作的网页下拉菜单（html）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

content="text/html; charset=gb2312" />

/* 整体设置*/

#menu {

margin:0;

padding:0;

width:610px;

list-style-type:none;

font:14px Arial;

}

#menu li {

float:left;

padding:0;

margin:0 1px 0 0;

width:150px;

}

/* 设置菜单项*/

#menu li dl {

width:150px;/*ie6*/

margin: 0;

padding: 0 0 10px 0;

background: #cb6 url(images/bottom.gif) no-repeat bottom left;

}

#menu li dt a,#menu li dd a{ display:block;}

/* 设置菜单项的dt */

#menu li dt {

margin:0;

padding: 5px;

text-align:center;

border-bottom:1px solid #b00;

background:

}

#menu li dt.orange { background:#fa5 url(images/top.gif) no-repeat top left;}

#menu li dt.yellow { background:#ee5 url(images/top.gif) no-repeat top left;}

#menu li dt.green { background:#5e5 url(images/top.gif) no-repeat top left;}

#menu li dt.blue { background:#5cf url(images/top.gif) no-repeat top left;}

#menu li dt a ,#menu li dt a:visited {

display:block;

color:#333;

text-decoration:none;

}

/* 设置菜单项的dd */

#menu li dd {

margin:0;

padding:0;

color: #fff;

background: #47a;

}

#menu li dd.last {

border-bottom:1px solid #b00;

}

#menu li dd a, #menu li dd a:visited {

display:block;

color:#fff;

text-decoration:none;

padding:4px 5px 4px 20px;

background: #47a url(images/arrow.gif) no-repeat 10px 10px;

height:1em;

}

/*关闭子菜单*/

#menu li dd { display:none;}

/* 设置鼠标响应 */

#menu li:hover dd , #menu li a:hover dd { display:block;}

#menu li:hover, #menu li a:hover { border:0;}/*ie6*/

#menu li dd a:hover {

background: #147;

color:#9cf;

}

/*针对ie6的设置*/

#menu table { border-collapse:collapse;

padding:0;

margin:-1px;

font-size:1em;

}

</style>

</head>

<body>

<li>

<dl>

<dt class="orange"><a href="#">Artech Studio</a></dt>

<dd><a href="#">Web Design</a></dd>

<dd><a href="#">Books</a></dd>

<dd class="last"><a href="#">Contact Us</a></dd>

</dl>

</li>

<li>

<dl>

<dt class="yellow"><a href="#">Artech Store</a></dt>

<dd><a href="#">Books</a></dd>

<dd><a href="#">Movies</a></dd>

<dd class="last"><a href="#">Service</a></dd>

</dl>

</li>

<li>

<dl>

<dt class="green"><a href="#">Artech Achi</a></dt>

<dd><a href="#">Landscape</a></dd>

<dd><a href="#">Design</a></dd>

</dl>

</li>

<li>

<dl>

<dt class="blue"><a href="#">Artech Science</a></dt>

<dd><a href="#">Physics</a></dd>

<dd><a href="#">Maths</a></dd>

<dd><a href="#">Chemistry</a></dd>

<dd class="last"><a href="#">Courses</a></dd>

</dl>

</li>

</ul>

</body>

</html>

4-6网页教学网制作的网页下拉菜单（html）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

content="text/html; charset=utf-8" />

<title>纯CSS下拉菜单</title>

/* common styling */

.menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;}

.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; background:#c9c9a7; line-height:25px; font-size:11px;}

.menu ul {padding:0; margin:0;list-style-type: none; }

.menu ul li {float:left; position:relative;}

.menu ul li ul {display: none;}

/* specific to non IE browsers */

.menu ul li:hover a {color:#000; background:#e9e9c7;}

.menu ul li:hover ul {display:block; position:absolute; bottom:26px; left:0;}

.menu ul li:hover ul li a.hide {background:#a7c9c9; color:#000;}

.menu ul li:hover ul li {display:block; background:#fff; color:#000;width:199px; clear:both;}

.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}

.menu ul li:hover ul li ul {display: none;}

.menu ul li:hover ul li a {display:block; background:#c9a7c9; color:#000; width:{bfb}; padding-left:10px;}

.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}

.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:210px; bottom:0;}

.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}

.menu ul li:hover ul li:hover ul li a:hover {background:#c9c9a7; color:#000;}

.menu ul li:hover ul.left {left:-105px;}

.menu ul li:hover ul li:hover ul.left {left:-210px; width:209px;}

</style>

<!--[if lte IE 6]>

table {border-collapse:collapse; margin:0; padding:0;}

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}

.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#000; background:#e9e9c7;}

.menu ul li a:hover ul {display:block; position:absolute; bottom:26px; left:0;}

.menu ul li a:hover ul li {display:block; background:#fff; color:#000; width:199px;}

.menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#000;}

.menu ul li a:hover ul li a {display:block; background:#c9a7c9; color:#000; width:{bfb}; padding-left:10px;}

.menu ul li a:hover ul li a ul {visibility:hidden;}

.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}

.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:210px; bottom:0;}

.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}

.menu ul li a:hover ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;}

.menu ul li a:hover ul.left {left:-105px;}

.menu ul li a:hover ul li a:hover ul.left {left:-210px;}

</style>

<![endif]-->

</head>

<body>

<ul>

<li><a class="hide" href="../menu/index.html">DEMOS</a>

<!--[if lte IE 6]>

<a href="../menu/index.html">DEMOS

<![endif]-->

<ul>

<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>

<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>

<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>

<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>

<!--[if lte IE 6]>

<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >

<![endif]-->

<ul>

<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>

<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>

<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>

<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>

<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>

<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="index.html">MENUS</a>

<!--[if lte IE 6]>

<a href="index.html">MENUS

<![endif]-->

<ul>

<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>

<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>

<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>

<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>

<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>

<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>

<li><a href="circles.html" title="circular links">circular links</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<!--[if lte IE 6]>

<a href="../layouts/index.html">LAYOUTS

<![endif]-->

<ul>

<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>

<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>

<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>

<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>

<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

<!--[if lte IE 6]>

<a href="../boxes/index.html">BOXES

<![endif]-->

<ul>

<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>

<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>

<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>

<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>

<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>

<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>

<li><a href="circles.html" title="circular links">circular links</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<!--[if lte IE 6]>

<a href="../mozilla/index.html">MOZILLA

<![endif]-->

<ul>

<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>

<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>

<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>

<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>

<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>

<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>

<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>

<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<!--[if lte IE 6]>

<a href="../ie/index.html">EXPLORER

<![endif]-->

<ul>

<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>

<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>

<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>

<a href="../opacity/index.html">OPACITY

<![endif]-->

<!--[if lte IE 6]>

<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK

<![endif]-->

<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>

<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>

<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>

<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>

<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

</ul>

</div>

</body>

</html>

4-7网页教学网制作的网页下拉菜单（4）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

content="text/html; charset=utf-8" />

<title>纯CSS下拉菜单</title>

/* common styling */

.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}

.menu ul {padding:0; margin:0; list-style-type: none;}

.menu ul li {float:left; border-left:1px solid #eee; width:106px;}

.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}

.menu ul li ul {display: none;}

/* specific to non IE browsers */

.menu ul li:hover a {color:#fff; background:#b3ab79;}

.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}

.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}

.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}

.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}

.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}

.menu ul li:hover ul li ul {display: none;}

.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}

.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}

.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}

.menu ul li:hover ul.right li {float:right;}

.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}

.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}

.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}

</style>

<!--[if lte IE 6]>

table {border-collapse:collapse; margin:0; padding:0;}

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}

.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;}

.menu ul li a:hover {color:#fff; background:#b3ab79;}

.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}

.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}

.menu ul li a:hover ul.left_side li {float:left;}

.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;}

.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}

.menu ul li a:hover ul li a ul {visibility:hidden;}

.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}

.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}

.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}

.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}

</style>

<![endif]-->

</head>

<body>

<ul>

<li><a class="hide" href="../menu/index.html">DEMOS</a>

<!--[if lte IE 6]>

<a href="../menu/index.html">DEMOS

<![endif]-->

<ul>

<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>

<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>

<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>

<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>

<!--[if lte IE 6]>

<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK

<![endif]-->

<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>

<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>

<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="index.html">MENUS</a>

<!--[if lte IE 6]>

<a href="index.html">MENUS

<![endif]-->

<ul>

<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>

<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>

<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>

<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>

<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>

<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>

<li><a href="circles.html" title="circular links">circular links</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<!--[if lte IE 6]>

<a href="../layouts/index.html">LAYOUTS

<![endif]-->

<ul>

<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>

<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>

<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>

<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>

<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

<!--[if lte IE 6]>

<a href="../boxes/index.html">BOXES

<![endif]-->

<ul>

<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>

<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>

<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>

<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>

<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>

<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>

<li><a href="circles.html" title="circular links">circular links</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<!--[if lte IE 6]>

<a href="../mozilla/index.html">MOZILLA

<![endif]-->

<ul>

<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>

<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>

<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>

<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>

<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>

<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<!--[if lte IE 6]>

<a href="../ie/index.html">EXPLORER

<![endif]-->

<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>

<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>

<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>

<a href="../opacity/index.html">OPACITY

<![endif]-->

<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>

<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>

<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>

<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>

<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>

<!--[if lte IE 6]>

<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK

<![endif]-->

<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>

<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

</ul>

</div>

</body>

</html>

4-8网页教学网制作的网页下拉菜单（3）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>纯CSS下拉菜单</title>

/* common styling */

/* set up the overall width of the menu div, the font and the margins */

.menu {

font-family: arial, sans-serif;

width:750px;

margin:0;

margin:50px 0;

}

/* remove the bullets and set the margin and padding to zero for the unordered list */

.menu ul {

padding:0;

margin:0;

list-style-type: none;

}

/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */

.menu ul li {

float:left;

position:relative;

}

/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */

.menu ul li a, .menu ul li a:visited {

display:block;

text-align:center;

text-decoration:none;

width:104px;

height:30px;

color:#000;

border:1px solid #fff;

border-width:1px 1px 0 0;

background:#c9c9a7;

line-height:30px;

font-size:11px;

}

/* make the dropdown ul invisible */

.menu ul li ul {

display: none;

}

/* specific to non IE browsers */

/* set the background and foreground color of the main menu li on hover */

.menu ul li:hover a {

color:#fff;

background:#b3ab79;

}

/* make the sub menu ul visible and position it beneath the main menu list item */

.menu ul li:hover ul {

display:block;

position:absolute;

top:31px;

left:0;

width:105px;

}

/* style the background and foreground color of the submenu links */

.menu ul li:hover ul li a {

display:block;

background:#faeec7;

color:#000;

}

/* style the background and forground colors of the links on hover */

.menu ul li:hover ul li a:hover {

background:#dfc184;

color:#000;

}

</style>

<!--[if lte IE 6]>

/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */

/* Get rid of any default table style */

table {

border-collapse:collapse;

margin:0;

padding:0;

}

/* ignore the link used by 'other browsers' */

.menu ul li a.hide, .menu ul li a:visited.hide {

display:none;

}

/* set the background and foreground color of the main menu link on hover */

.menu ul li a:hover {

color:#fff;

background:#b3ab79;

}

/* make the sub menu ul visible and position it beneath the main menu list item */

.menu ul li a:hover ul {

display:block;

position:absolute;

top:32px;

left:0;

width:105px;

}

/* style the background and foreground color of the submenu links */

.menu ul li a:hover ul li a {

background:#faeec7;

color:#000;

}

/* style the background and forground colors of the links on hover */

.menu ul li a:hover ul li a:hover {