用CSS添<ul> + prototype.js + cookiejar.js 作一个菜单

用CSS加<ul> + prototype.js + cookiejar.js 作一个菜单

用CSS做<ul>菜单的样式控制
用prototype + scriptaculous.js做菜单的动态效果.关于这些JS的资料我的以前文章里说过
用cookiejar.js做操作近的事件忆

<div id="menu_div">    <div style="width: 183px; height: 20px; margin: 0 auto;"></div>    <div src="/images/Darrow.gif" alt="用CSS添<ul> + prototype.js + cookiejar.js 作一个菜单" />                    订单跟踪查询<img src="/images/left_04.jpg" alt="用CSS添<ul> + prototype.js + cookiejar.js 作一个菜单"/>                </label>                <ul id="order_menu" src="/images/Rarrow.gif" alt="用CSS添<ul> + prototype.js + cookiejar.js 作一个菜单" />                    ##支付查询<img src="/images/left_05.jpg" alt="用CSS添<ul> + prototype.js + cookiejar.js 作一个菜单"/>                </label>                <ul id="comm_menu" name="code">/* A CSS Framework by Liu_jc of Content with Style *//* SITE MENU LAYOUT *//* MENU */    div#menu_div {        width:223px;        min-height:600px;        background-image:url(/images/left_01.jpg);           }    ul#primary-nav,    ul#primary-nav ul{        padding:0px;        margin:0px;        border: 0;            list-style:none;    }    ul#primary-nav li {        position: relative;        list-style: none;    }    ul#primary-nav li label {        text-align: center;        width:182px;        height:33px;        float:left;        background-image:url(images/menu_th_bg.jpg);        background-repeat:no-repeat;        font-size:14px;        font-weight:bold;        color:#336699;    }    ul#primary-nav li label img {        padding-left:15px;        vertical-align:bottom;     }   ul#primary-nav li ul li {        width:183px;        height:20px;        text-align:center;        border-bottom:1px #999999 dashed;        margin-top: 5px;        float:left;   }    ul#primary-nav li ul li a {        font-size:12px;        color:#999999;        text-decoration:none;    }/*    ul#primary-nav li ul.show {        display:block;    }    ul#primary-nav li ul.hidden {        display:none;    }*/   /* END MENU */

  function openCloseMenu(menuId) {         var myCookies = new CookieJar();        $(menuId).toggle('slide', {duration: 0});        var dis = $(menuId).style.display;        if(dis == "none") {           $(menuId + "_arrow").src =  "/images/Rarrow.gif";           myCookies.put(menuId, "close");        }else {           $(menuId + "_arrow").src =  "/images/Darrow.gif";           myCookies.put(menuId, "open");        }    }

function showMenu() {        var myCookies = new CookieJar();        var menubars = $$("ul.menubar");        for(var i = 0; i < menubars.length; i++) {            var menuBarId = menubars[i].id;            var showMenuBar = myCookies.get(menuBarId);            if(showMenuBar == "open") {                menubars[i].show();                $(menuBarId + "_arrow").src =  "/images/Darrow.gif";            } else {                menubars[i].hide();                $(menuBarId + "_arrow").src =  "/images/Rarrow.gif";            }        }    }