凹丫丫网络社区 » 【网页编程】 » 类似与QQ的好友/黑名单之类的树型菜单

Amm 发表于 2008-5-16 13:10

类似与QQ的好友/黑名单之类的树型菜单

<P>把如下代码复制到&lt;head&gt;与&lt;/head&gt;之间</P>
<P>&lt;script&gt;<BR>if (!document.getElementById)<BR>&nbsp;&nbsp;&nbsp; document.getElementById = function() { return null; }</P>
<P>function initializeMenu(menuId, actuatorId) {<BR>&nbsp;&nbsp;&nbsp; var menu = document.getElementById(menuId);<BR>&nbsp;&nbsp;&nbsp; var actuator = document.getElementById(actuatorId);</P>
<P>&nbsp;&nbsp;&nbsp; if (menu == null || actuator == null) return;</P>
<P>&nbsp;&nbsp;&nbsp; //if (window.opera) return; // I'm too tired</P>
<P>&nbsp;&nbsp;&nbsp; actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)";<BR>&nbsp;&nbsp;&nbsp; actuator.onclick = function() {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var display = menu.style.display;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.parentNode.style.backgroundImage =<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)";<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; menu.style.display = (display == "block") ? "none" : "block";</P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return false;<BR>&nbsp;&nbsp;&nbsp; }<BR>}<BR>&nbsp;window.onload = function() {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; initializeMenu("productsMenu", "productsActuator");<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; initializeMenu("newPhonesMenu", "newPhonesActuator");<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; initializeMenu("compareMenu", "compareActuator");<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>&lt;/script&gt;<BR>&lt;style&gt;<BR>body {<BR>&nbsp; font-family: verdana, helvetica, arial, sans-serif;<BR>}</P>
<P>#mainMenu {<BR>&nbsp; background-color: #EEE;<BR>&nbsp; border: 1px solid #CCC;<BR>&nbsp; color: #000;<BR>&nbsp; width: 203px;<BR>}</P>
<P>#menuList {<BR>&nbsp; margin: 0px;<BR>&nbsp; padding: 10px 0px 10px 15px;<BR>}</P>
<P>li.menubar {<BR>&nbsp; background: url(/images/plus.gif) no-repeat 0em 0.3em;<BR>&nbsp; font-size: 12px;<BR>&nbsp; line-height: 1.5em;<BR>&nbsp; list-style: none outside;<BR>}</P>
<P>.menu, .submenu {<BR>&nbsp; display: none;<BR>&nbsp; margin-left: 15px;<BR>&nbsp; padding: 0px;<BR>}</P>
<P>.menu li, .submenu li {<BR>&nbsp; background: url(/images/square.gif) no-repeat 0em 0.3em;<BR>&nbsp; list-style: none outside;<BR>}</P>
<P>a.actuator {<BR>&nbsp; background-color: transparent;<BR>&nbsp; color: #000;<BR>&nbsp; font-size: 12px;<BR>&nbsp; padding-left: 15px;<BR>&nbsp; text-decoration: none;<BR>}</P>
<P>a.actuator:hover {<BR>&nbsp; text-decoration: underline;<BR>}</P>
<P>.menu li a, .submenu li a {<BR>&nbsp; background-color: transparent;<BR>&nbsp; color: #000;<BR>&nbsp; font-size: 12px;<BR>&nbsp; padding-left: 15px;<BR>&nbsp; text-decoration: none;<BR>}</P>
<P>.menu li a:hover, submenu li a:hover {<BR>&nbsp; /*border-bottom: 1px dashed #000;*/<BR>&nbsp; text-decoration: underline;<BR>}</P>
<P>span.key {<BR>&nbsp; text-decoration: underline;<BR>}<BR>&lt;/style&gt;</P>
<P>把如下代码复制到&lt;body&gt;与&lt;/body&gt;之间</P>
<P>&lt;div id="mainMenu"&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul id="menuList"&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li class="menubar"&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#" id="productsActuator" class="actuator"&gt;网页特效库&lt;/a&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul id="productsMenu" class="menu"&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#" id="newPhonesActuator" class="actuator"&gt;栏目导航&lt;/a&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul id="newPhonesMenu" class="submenu"&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="<A href="http://www.butong.net/background/index.htm">http://www.butong.net/background/index.htm</A>" target="_balcn"&gt;背景按钮特效&lt;/a&gt;&lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="<A href="http://www.butong.net/moban/index.htm">http://www.butong.net/moban/index.htm</A>" target="_balcn"&gt;网页模板&lt;/a&gt;&lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="<A href="http://www.butong.net/navigation/index.htm">http://www.butong.net/navigation/index.htm</A>" target="_balcn"&gt;导航菜单特效&lt;/a&gt;&lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="<A href="http://www.butong.net/img/index.htm">http://www.butong.net/img/index.htm</A>" target="_balcn"&gt;图像特效&lt;/a&gt;&lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#" id="compareActuator" class="actuator"&gt;栏目导航&lt;/a&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul id="compareMenu" class="submenu"&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="<A href="http://www.butong.net/text/index.htm">http://www.butong.net/text/index.htm</A>" target="_balcn"&gt;文本特效&lt;/a&gt;&lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="<A href="http://www.butong.net/time/index.htm">http://www.butong.net/time/index.htm</A>" target="_balcn"&gt;时间日期特效&lt;/a&gt;&lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="<A href="http://www.butong.net/state/index.htm">http://www.butong.net/state/index.htm</A>" target="_balcn"&gt;状态栏特效&lt;/a&gt;&lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="<A href="http://www.butong.net/other/index.htm">http://www.butong.net/other/index.htm</A>" target="_balcn"&gt;另类网页特效&lt;/a&gt;&lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<BR>&nbsp;&nbsp;&nbsp; &lt;/div&gt;</P>

查看完整版本: 类似与QQ的好友/黑名单之类的树型菜单