Tip: you can modify some code before running
<p><! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><Html xmlns = "http://www.w3.org/1999/xhtml"><br /><Head><br /><Title> classic sliding door navigation menu (1) </title><br /><Meta http-equiv = "content-type" content = "text/html; charset = gb2312"><br /><! -- Add the following code between <pead> and </pead> --><br /><Style type = "text/css"><br />/*<br />* Author raceman<br />* Website www.daqianduan.com<br />* Time 2010.05.05<br />* Modify 2010.05.11<br />* Color #444 #0064B1 # ff6700<br />*/<br />Body {font-size: 12px; color: #444; font-family: Arial, Verdana, Helvetica, sans-serif; word-break: break-all ;}<br />Ul, li {padding: 0; margin: 0 ;}<br />Li {list-style: none ;}<br />A {color: #0064B1; text-decoration: none; outline: none; blr: expression (this. onFocus = this. blur ());}<br />A: hover {color: # ff6700; text-decoration: underline ;}<br /># Menu_l, # menu_r {width: 4px; height: 73px; overflow: hidden; position: absolute; top: 0 ;}<br /># Menu_l {background: url (yun_qi_img/menu_left.gif) no-repeat; left:-4px ;}<br /># Menu_r {background: url (yun_qi_img/menu_right.gif) no-repeat; right:-4px ;}<br /># Menu {background: url (yun_qi_img/menu_bg.gif) repeat-x; height: 73px; width: 960px; margin: 0 auto; position: relative ;}<br /># Menu ul {padding: 0 16px; clear: both ;}<br />/* Navigation */<br /># Nav li {float: left; height: 35px ;}<br /># Nav li. line {background: url (yun_qi_img/menu_line.gif) no-repeat center top; width: 8px ;}<br /># Nav li a {float: left; display: block; padding-left: 6px; height: 35px; background: url (yun_qi_img/menu_on_left.gif) no-repeat left top; cursor: pointer; text-decoration: none ;}<br /># Nav li a span {float: left; padding: 11px 14px 10px; line-height: 14px; background: url (yun_qi_img/menu_on_right.gif) no-repeat right top; font-size: 14px; font-weight: bold; color: # ffffff; text-decoration: none ;}<br /># Nav li a. on {background-position: left 100% ;}<br /># Nav li a. on span {background-position: right 100%; color: #333333; text-decoration: none; padding: 14px 14px 7px 10px ;}<br />/* Level 2 */<br /># Con li {display: none ;}<br /># Con li. on, # con li # con0 {display: block ;}<br /># Con a {float: left; height: 22px; margin-top: 8px; margin-right: 10px; display: block; float: left; background: url (yun_qi_img/menu_on_left2.gif) no-repeat left top; cursor: pointer; padding-left: 3px ;}<br /># Con a span {float: left; padding: 6px 10px 4px 6px; line-height: 12px; background: url (yun_qi_img/menu_on_right2.gif) no-repeat right top ;}<br /># Con a: hover {text-decoration: none; background: url (yun_qi_img/menu_on_left2.gif) no-repeat left bottom ;}<br /># Con a: hover span {background: url (yun_qi_img/menu_on_right2.gif) no-repeat right bottom ;}<br /></Style><br /><Script language = "javascript"></p><blockquote>Function sliding (num ){<br />For (var id = 0; id <= 3; id ++)<br /> {<br />If (id = num)<br /> {<br />Document. getElementById ("con" + id). style. display = "block ";<br />Document. getElementById ("nav" + id). className = "on ";<br /> }<br />Else<br /> {<br />Document. getElementById ("con" + id). style. display = "none ";<br />Document. getElementById ("nav" + id). className = "";<br /> }<br /> }<br />}<br /></blockquote><p></Script><br /></Head><br /><Body><br /><! -- Add the following code to the <body> and </body> --><br /><Div id = "menu"><br /><Ul id = "nav"><br /><Li> <a id = "nav0" class = "on" href = "#" onmouseover = "javascript: sliding (0) "> <span> Index </span> </a> </li> <li class =" line "> </li><br /><Li> <a id = "nav1" href = "#" onmouseover = "javascript: sliding (1) "> <span> HTML/CSS </span> </a> </li> <li class =" line "> </li><br /><Li> <a id = "nav2" href = "#" onmouseover = "javascript: sliding (2) "> <span> JavaScript </span> </a> </li> <li class =" line "> </li><br /><Li class = "bgnone"> <a id = "nav3" href = "#" onmouseover = "javascript: sliding (3) "> <span> SEO </span> </a> </li><br /></Ul><br /><Ul id = "con"><br /><Li id = "con0"> <a href = "#"> <span> Index </span> </a> <a href = "#"> <span> News </span> </a> <a href = "#"> <span> UI Design </span> </a> </li><br /><Li id = "con1"> <a href = "#"> <span> HTML </span> </a> <a href = "#"> <span> CSS </span> </a> </li><br /><Li id = "con2"> <a href = "#"> <span> JavaScript </span> </a> <a href = "#"> <span> jQuery </span> </a> <a href = "#"> <span> Ajax </span> </a> </li><br /><Li id = "con3"> <a href = "#"> <span> SEO </span> </a> </li><br /></Ul><br /><Div id = "menu_l"> </div><br /><Div id = "menu_r"> </div><br /></Div><br /></Body><br /></Html></p>
Tip: you can modify some code before running
