JS模擬的QQ面板上的多級可展開的菜單

2024-09-05 12:20:27

字體：大中小

來源：轉載

供稿：網友

JavaScript結合 CSS完成QQ聊天面板菜單的功能，點擊某一項菜單后，開始展開，再次點擊則關閉，支持多級（三級），代碼中預留有用于修飾的背景圖像代碼，請根據你的實際需要補全，應該是非常實用的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>QQ菜單</TITLE></HEAD><BODY><script>if (!document.getElementById)    document.getElementById = function() { return null; }function initializeMenu(menuId, actuatorId) {    var menu = document.getElementById(menuId);    var actuator = document.getElementById(actuatorId);    if (menu == null || actuator == null) return;    actuator.parentNode.style.backgroundImage = "url()";    actuator.onclick = function() {        var display = menu.style.display;        this.parentNode.style.backgroundImage =            (display == "block") ? "url(/images/plus.gif)" : "url()";        menu.style.display = (display == "block") ? "none" : "block";        return false;    }} window.onload = function() {            initializeMenu("productsMenu", "productsActuator");            initializeMenu("newPhonesMenu", "newPhonesActuator");            initializeMenu("compareMenu", "compareActuator");        }</script><style>body {  font-family: verdana, helvetica, arial, sans-serif;}#mainMenu {  background-color: #EEE;  border: 1px solid #CCC;  color: #000;  width: 203px;}#menuList {  margin: 0px;  padding: 10px 0px 10px 15px;}li.menubar {  background: url() no-repeat 0em 0.3em;  font-size: 12px;  line-height: 1.5em;  list-style: none outside;}.menu, .submenu {  display: none;  margin-left: 15px;  padding: 0px;}.menu li, .submenu li {  background: url() no-repeat 0em 0.3em;  list-style: none outside;}a.actuator {  background-color: transparent;  color: #000;  font-size: 12px;  padding-left: 15px;  text-decoration: none;}a.actuator:hover {  text-decoration: underline;}.menu li a, .submenu li a {  background-color: transparent;  color: #000;  font-size: 12px;  padding-left: 15px;  text-decoration: none;}.menu li a:hover, submenu li a:hover {  text-decoration: underline;}span.key {  text-decoration: underline;}</style></head><body><div   class="jvpywna"   id="mainMenu">      <ul id="menuList">        <li id="xgsmkmw"    class="menubar">          我有朋友圈          <ul id="productsMenu" class="menu">            <li>              我的好友              <ul id="newPhonesMenu" class="submenu">                <li>張三[10000001]</li>                <li>李四[10000002]</li>                <li>李四[10000002]</li>              </ul>            </li>            <li>              陌生人              <ul id="compareMenu" class="submenu">                <li>張三[10000001]</li>                <li>李四[10000002]</li>              </ul>            </li>          </ul>        </li>      </ul>    </div>  </body></BODY></HTML>

上一篇：JS+CSS但分類動態選擇及移動功能

下一篇：純CSS+XHTML打造簡約下拉菜單

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注