用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 class="left_table">
        <ul id="primary-nav">
            <li>
                <label onclick="openCloseMenu('order_menu')">
                    <img id="order_menu_arrow" class="left" src="/images/Darrow.gif" alt="arrow" />
                    订单跟踪查询<img src="/images/left_04.jpg" alt="order"/>
                </label>
                <ul id="order_menu" class="menubar over">
                    <li><a href="orderTrace.html">订单跟踪</a></li>
                </ul>
            </li>
            <li>
                <label onclick="openCloseMenu('comm_menu')">
                    <img id="comm_menu_arrow" class="left" src="/images/Rarrow.gif" alt="arrow" />
                    ##支付查询<img src="/images/left_05.jpg" alt=""/>
                </label>
                <ul id="comm_menu" class="menubar">                    
                    <li><a href="addSeries.html">####</a></li>
                    <li><a href="setCommision.html">###</a></li>
                    <li><a href="listCommision.html">###</a></li>
                </ul>
            </li>
            
        </ul>
    </div>
</div>
<script type="text/javascript">
    showMenu();
</script>

/* 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";
            }
        }
    }

评论

1 楼 3923075 2010-11-03  

哎 一看就知道 做电信的 啊啊啊